diff --git a/packages/svelte/README.md b/packages/svelte/README.md index 8f4742d3a37b..89de37495999 100644 --- a/packages/svelte/README.md +++ b/packages/svelte/README.md @@ -6,4 +6,66 @@ # Official Sentry SDK for Svelte -This SDK is work in progress, and should not be used before officially released. +[![npm version](https://img.shields.io/npm/v/@sentry/svelte.svg)](https://www.npmjs.com/package/@sentry/svelte) +[![npm dm](https://img.shields.io/npm/dm/@sentry/svelte.svg)](https://www.npmjs.com/package/@sentry/svelte) +[![npm dt](https://img.shields.io/npm/dt/@sentry/svelte.svg)](https://www.npmjs.com/package/@sentry/svelte) +[![typedoc](https://img.shields.io/badge/docs-typedoc-blue.svg)](http://getsentry.github.io/sentry-javascript/) + +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/). + +## General + +This package is a wrapper around `@sentry/browser`, providing error monitoring and basic performance monitoring +features for [Svelte](https://svelte.dev/). + +To use the SDK, initialize Sentry in your Svelte entry point `main.js` before you bootstrap your Svelte app: + +```ts +// main.js / main.ts + +import App from "./App.svelte"; + +import * as Sentry from "@sentry/svelte"; +import { BrowserTracing } from "@sentry/tracing"; + +// Initialize the Sentry SDK here +Sentry.init({ + dsn: "__DSN__", + release: "my-project-name@2.3.12", + 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, +}); + +// Then bootstrap your Svelte app +const app = new App({ + target: document.getElementById("app"), +}); + +export default app; +``` + +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. + +## Sourcemaps and Releases + +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: + +```bash +#!/bin/bash + +VERSION= +ORG= +PROJECT= + +SOURCEMAPS_PATH=./dist + +sentry-cli releases new $VERSION --org $ORG --project $PROJECT +sentry-cli releases files $VERSION upload-sourcemaps $SOURCEMAPS_PATH --org $ORG --project $PROJECT +sentry-cli releases finalize $VERSION --org $ORG --project $PROJECT +``` + +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/).