Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add Svelte SDK docs #5413

Merged
merged 7 commits into from
Aug 17, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions src/includes/capture-error/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
You can pass an `Error` object to `captureException()` to have it captured as an event. It's also possible to pass non-`Error` objects and strings, but be aware that the resulting events in Sentry may be missing a stack trace.

```typescript
import * as Sentry from "@sentry/svelte";

try {
aFunctionThatMightFail();
} catch (err) {
Sentry.captureException(err);
}
```
53 changes: 53 additions & 0 deletions src/includes/getting-started-config/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
To use the SDK, initialize it in your Svelte entry point before bootstrapping your app. In a typical Svelte project, that is your `main.js` or `main.ts` file.

```typescript {filename: main.ts}
import "./app.css";
import App from "./App.svelte";

import * as Sentry from "@sentry/svelte";
import { BrowserTracing } from "@sentry/tracing";

// Initialize the Sentry SDK here
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [new BrowserTracing()],

// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
});

const app = new App({
target: document.getElementById("app"),
});

export default app;
```

```javascript {filename: main.js}
import "./app.css";
import App from "./App.svelte";

import * as Sentry from "@sentry/svelte";
import { BrowserTracing } from "@sentry/tracing";

// Initialize the Sentry SDK here
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [new BrowserTracing()],

// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
});

const app = new App({
target: document.getElementById("app"),
});

export default app;
```

Once you've done this, the SDK will automatically capture unhandled errors and promise rejections, and monitor performance in the client. You can also [manually capture errors](/platforms/javascript/guides/svelte/usage).
7 changes: 7 additions & 0 deletions src/includes/getting-started-install/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
```bash {tabTitle:npm}
npm install --save @sentry/svelte @sentry/tracing
```

```bash {tabTitle:yarn}
yarn add @sentry/svelte @sentry/tracing
```
13 changes: 13 additions & 0 deletions src/includes/getting-started-primer/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<Note>

Sentry's Svelte SDK enables automatic reporting of errors and exceptions, as well as performance monitoring for your client-side Svelte apps.

</Note>

<Alert level="info" title="Important">

This SDK is considered **experimental and in alpha state**. It may experience breaking changes. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback or concerns. The SDK currently only supports [Svelte](https://svelte.dev/) and is not yet compatible with with [SvelteKit](https://kit.svelte.dev/).

</Alert>

Sentry's Svelte SDK was introduced with version `7.10.0`.
Lms24 marked this conversation as resolved.
Show resolved Hide resolved
12 changes: 12 additions & 0 deletions src/includes/getting-started-verify/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
```jsx {tabTitle:Svelte} {filename:SomeCmponent.svelte}
<button
type="button"
on:click={() => {
throw new Error("Sentry Frontend Error");
}}
>
Throw error
</button>
```

This snippet adds a button that throws an error in a Svelte component.
32 changes: 32 additions & 0 deletions src/includes/sourcemaps/generate/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
To generate source maps with your Svelte project, you need to set the source map [compiler options](https://svelte.dev/docs#compile-time-svelte-compile) in your Svelte config:

```JavaScript {filename:svelte.config.js}
import sveltePreprocess from "svelte-preprocess";

const config = {
compilerOptions: {
enableSourcemap: true,
},
preprocess: sveltePreprocess({
sourceMap: true,
}),
};

export default config;
```

Additionally, you need to enable source map output in your bundler. The following example shows how to do this for Vite:

```JavaScript {filename:vite.config.js}
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
plugins: [svelte()],
build: {
sourcemap: true,
},
});
```

If you're using bundlers other than Vite, check out our general guide on how to [generate source maps](../../../../sourcemaps/generating) with them, or refer to their documentation.
15 changes: 15 additions & 0 deletions src/includes/sourcemaps/overview/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
Integrate your Svelte project's source maps with Sentry using these steps:

### 1: Generate Source Maps

The Svelte compiler and your bundler (for example, Vite) need to be configured to output source maps. Learn more about [how to generate source maps with Svelte](./generating/).

### 2: Provide Source Maps to Sentry

Source maps can be uploaded to Sentry by creating a release. Learn more about [how to upload source maps](./uploading/).

<Note>

By default, if Sentry can't find the uploaded files it needs, it will attempt to download them from the URLs in the stack trace. To disable this, turn off "Enable JavaScript source fetching" in either your organization's "Security & Privacy" settings or your project's general settings.

</Note>
6 changes: 6 additions & 0 deletions src/includes/sourcemaps/upload/primer/javascript.svelte.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
To upload your Svelte project's source maps to Sentry, you currently have two options:

- Upload source maps manually using [Sentry-CLI](./cli/). Take a look at this [bash script](https://github.com/getsentry/sentry-javascript/tree/master/packages/svelte#sourcemaps-and-releases) as an example of how to configure the CLI for a typical Svelte project.
- Use the [unofficial Sentry Vite plugin](https://github.com/ikenfin/vite-plugin-sentry) to set releases and upload source maps. **Please note that this plugin is not maintained by Sentry and we do not offer support for it.**

For other bundlers or more advanced configurations, take a look at the following guides and options for uploading sourcemaps:
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ Though the above example is Webpack-specific, similar changes can be made to con
"javascript.nextjs",
"javascript.react",
"javascript.remix",
"javascript.svelte",
"javascript.vue",
"javascript.wasm",
]}>
Expand Down
1 change: 1 addition & 0 deletions src/platforms/javascript/common/install/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ notSupported:
- javascript.vue
- javascript.wasm
- javascript.remix
- javascript.svelte
---

<PageGrid />
7 changes: 7 additions & 0 deletions src/platforms/javascript/guides/svelte/config.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
title: Svelte
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(Don't know where else to put this.) Do we already have plans to upload a logo for svelte in the docs?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haven't done it yet but we either do it when we first publish the docs or when we go into beta. Still need to take a look at how we did it with Remix.

sdk: sentry.javascript.svelte
fallbackPlatform: javascript
caseStyle: camelCase
supportLevel: production
categories:
- browser