|
6 | 6 |
|
7 | 7 | # Official Sentry SDK for Svelte
|
8 | 8 |
|
9 |
| -This SDK is work in progress, and should not be used before officially released. |
| 9 | +[](https://www.npmjs.com/package/@sentry/svelte) |
| 10 | +[](https://www.npmjs.com/package/@sentry/svelte) |
| 11 | +[](https://www.npmjs.com/package/@sentry/svelte) |
| 12 | +[](http://getsentry.github.io/sentry-javascript/) |
| 13 | + |
| 14 | +This SDK is considered **experimental and in an 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. This SDK currently only supports [Svelte](https://svelte.dev/) and is not yet officially compatible with with [SvelteKit](https://kit.svelte.dev/). |
| 15 | + |
| 16 | +## General |
| 17 | + |
| 18 | +This package is a wrapper around `@sentry/browser`, providing error monitoring and basic performance monitoring |
| 19 | +features for [Svelte](https://svelte.dev/). |
| 20 | + |
| 21 | +To use the SDK, initialize Sentry in your Svelte entry point `main.js` before you bootstrap your Svelte app: |
| 22 | + |
| 23 | +```ts |
| 24 | +// main.js / main.ts |
| 25 | + |
| 26 | +import App from "./App.svelte"; |
| 27 | + |
| 28 | +import * as Sentry from "@sentry/svelte"; |
| 29 | +import { BrowserTracing } from "@sentry/tracing"; |
| 30 | + |
| 31 | +// Initialize the Sentry SDK here |
| 32 | +Sentry.init({ |
| 33 | + dsn: "__DSN__", |
| 34 | + release: "my-project-name@2.3.12", |
| 35 | + integrations: [new BrowserTracing()], |
| 36 | + |
| 37 | + // Set tracesSampleRate to 1.0 to capture 100% |
| 38 | + // of transactions for performance monitoring. |
| 39 | + // We recommend adjusting this value in production |
| 40 | + tracesSampleRate: 1.0, |
| 41 | +}); |
| 42 | + |
| 43 | +// Then bootstrap your Svelte app |
| 44 | +const app = new App({ |
| 45 | + target: document.getElementById("app"), |
| 46 | +}); |
| 47 | + |
| 48 | +export default app; |
| 49 | +``` |
| 50 | + |
| 51 | +The Sentry Svelte SDK supports all features from the `@sentry/browser` SDK. Until it becomes more stable, please refer to the Sentry [Browser SDK documentation](https://docs.sentry.io/platforms/javascript/) for more information and usage instructions. |
| 52 | + |
| 53 | +## Sourcemaps and Releases |
| 54 | + |
| 55 | +To [create releases and upload source maps](https://docs.sentry.io/platforms/javascript/sourcemaps/uploading/cli/) to Sentry, we recommend using [`sentry-cli`](https://github.com/getsentry/sentry-cli). You can create a bash script to take care of creating a release, uploading source maps and finalizing the release: |
| 56 | + |
| 57 | +```bash |
| 58 | +#!/bin/bash |
| 59 | + |
| 60 | +VERSION=<your version> |
| 61 | +ORG=<your org-slug> |
| 62 | +PROJECT=<your project-slug> |
| 63 | + |
| 64 | +SOURCEMAPS_PATH=./dist |
| 65 | + |
| 66 | +sentry-cli releases new $VERSION --org $ORG --project $PROJECT |
| 67 | +sentry-cli releases files $VERSION upload-sourcemaps $SOURCEMAPS_PATH --org $ORG --project $PROJECT |
| 68 | +sentry-cli releases finalize $VERSION --org $ORG --project $PROJECT |
| 69 | +``` |
| 70 | + |
| 71 | +Please note that the paths provided in this example work for a typical Svelte project that adheres to the project structure set by [create-vite](https://www.npmjs.com/package/create-vite) with the `svelte(-ts)` template. If your project setup differs from this template, your configuration may need adjustments. Please refer to our documentation of [Advanced `sentry-cli` Sourcemaps Options](https://docs.sentry.io/product/cli/releases/#sentry-cli-sourcemaps) and to our [Sourcemaps Troubleshooting Guide](https://docs.sentry.io/platforms/javascript/sourcemaps/troubleshooting_js/). |
0 commit comments