-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
feat: Add Svelte SDK docs #5413
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
Changes from all commits
38891c8
129bbda
38c1dae
8adb57a
cdfda21
8085b3f
a055b13
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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); | ||
} | ||
``` |
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). |
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 | ||
``` |
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`. | ||
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. |
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. |
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> |
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 |
---|---|---|
|
@@ -14,6 +14,7 @@ notSupported: | |
- javascript.vue | ||
- javascript.wasm | ||
- javascript.remix | ||
- javascript.svelte | ||
--- | ||
|
||
<PageGrid /> |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
title: Svelte | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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? There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
Uh oh!
There was an error while loading. Please reload this page.