From a6b2faac1a37d0aec6a95baa34fcf9605a75551c Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 16 Mar 2023 17:45:39 +0100 Subject: [PATCH 1/4] chore(sveltekit): Update `README` with setup instructions for alpha release --- packages/sveltekit/README.md | 92 +++++++++++++++++++++++++++++++++++- 1 file changed, 91 insertions(+), 1 deletion(-) diff --git a/packages/sveltekit/README.md b/packages/sveltekit/README.md index bb0206a72ac4..be027527cd68 100644 --- a/packages/sveltekit/README.md +++ b/packages/sveltekit/README.md @@ -29,4 +29,94 @@ Currently, the minimum supported version of SvelteKit is `1.0.0`. This package is a wrapper around `@sentry/node` for the server and `@sentry/svelte` for the client, with added functionality related to SvelteKit. -TODO: Add usage instructions +## Usage + +Although the SDK is not yet stable, you're more than welcome to give it a try and provide us some early feedback. + +**Here's how to get started:** + +1. Ensure you've set up the [`@sveltejs/adapter-node` adapter](https://kit.svelte.dev/docs/adapter-node) + +2. Install the SvelteKit SDK: + + ```bash + # Using npm + npm install @sentry/sveltekit + + # Using yarn + yarn add @sentry/sveltekit + ``` + +3. Create a `sentry.client.config.(js|ts)` file in the root directory of your SvelteKit project. + In this file you can configure the client-side Sentry SDK just like every other browser-based SDK: + + ```javascript + import * as Sentry from '@sentry/sveltekit'; + + Sentry.init({ + dsn: 'https://27dbca58093d401f9b18f88c40ec718f@o447951.ingest.sentry.io/4504796902588416', + + // For instance, initialize Session Replay: + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + integrations: [new Sentry.Replay()] + }); + ``` + +4. Create a `sentry.server.config.(js|ts)` file in the root directory of your SvelteKit project. + In this file you can configure the server-side Sentry SDK, like the Sentry Node SDK: + + ```javascript + import * as Sentry from '@sentry/sveltekit'; + + Sentry.init({ + dsn: 'https://27dbca58093d401f9b18f88c40ec718f@o447951.ingest.sentry.io/4504796902588416', + }); + ``` + +5. To catch errors in your `load` functions in `+page.(js|ts)`, wrap our `wrapLoadWithSentry` function: + + ```javascript + import { wrapLoadWithSentry } from '@sentry/sveltekit'; + + export const load = wrapLoadWithSentry((event) => { + //... + }); + ``` + +6. In your `hooks.client.(js|ts)` or `hooks.server.(js|ts)`, you can wrap the `handleError` function as follows: + + ```javascript + import { handleErrorWithSentry } from '@sentry/sveltekit'; + import type { HandleClientError } from '@sveltejs/kit'; + + const myErrorHandler = ((input) => { + console.log('This is the client error handler'); + console.log(input.error); + }) satisfies HandleClientError; + + export const handleError = handleErrorWithSentry(myErrorHandler); + + // or alternatively, if you don't have a custom error handler: + // export const handleError = handleErrorWithSentry(); + ``` + +## Known Limitations + +This SDK is still under active development and several features are missing. +Take a look at our [SvelteKit SDK Development Roadmap](https://github.com/getsentry/sentry-javascript/issues/6692) to follow the progress: + +- **Performance monitoring** is not yet fully supported. + You can add the `BrowserTracing` integration but proper instrumentation for routes, page loads and navigations is still missing. + This will be addressed next, as we release the next alpha builds. + +- **Source Maps** upload is not yet working correctly. + We already investigated [some options](https://github.com/getsentry/sentry-javascript/discussions/5838#discussioncomment-4696985) but uploading source maps doesn't work automtatically out of the box yet. + This will be addressed next, as we release the next alpha builds. + +- **Adapters** other than `@sveltejs/adapter-node` are currently not supported. + We haven't yet tested other platforms like Vercel. + This is on our roadmap but it will come at a later time. + +- We're aiming to **simplify SDK setup** in the future so that you don't have to go in and manually add our wrappers to all your `load` functions and hooks. + This will be addressed once we the SDK supports all Sentry features. From 52274b1527939fb4719e01ce31cec9e39c2abe1c Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 16 Mar 2023 17:55:37 +0100 Subject: [PATCH 2/4] add withSentryViteConfig --- packages/sveltekit/README.md | 19 +++++++++++++++---- 1 file changed, 15 insertions(+), 4 deletions(-) diff --git a/packages/sveltekit/README.md b/packages/sveltekit/README.md index be027527cd68..efe45ad7b1bd 100644 --- a/packages/sveltekit/README.md +++ b/packages/sveltekit/README.md @@ -37,7 +37,7 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an 1. Ensure you've set up the [`@sveltejs/adapter-node` adapter](https://kit.svelte.dev/docs/adapter-node) -2. Install the SvelteKit SDK: +2. Install the Sentry SvelteKit SDK: ```bash # Using npm @@ -63,7 +63,18 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an }); ``` -4. Create a `sentry.server.config.(js|ts)` file in the root directory of your SvelteKit project. +4. Add our `withSentryViteConfig` wrapper around your Vite config so that the Sentry SDK is added to your application in `vite.config.(js|ts)`: + ```javascript + import { sveltekit } from '@sveltejs/kit/vite'; + import { withSentryViteConfig } from '@sentry/sveltekit'; + + export default withSentryViteConfig({ + plugins: [sveltekit()], + // ... + }); + ``` + +5. Create a `sentry.server.config.(js|ts)` file in the root directory of your SvelteKit project. In this file you can configure the server-side Sentry SDK, like the Sentry Node SDK: ```javascript @@ -74,7 +85,7 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an }); ``` -5. To catch errors in your `load` functions in `+page.(js|ts)`, wrap our `wrapLoadWithSentry` function: +6. To catch errors in your `load` functions in `+page.(js|ts)`, wrap our `wrapLoadWithSentry` function: ```javascript import { wrapLoadWithSentry } from '@sentry/sveltekit'; @@ -84,7 +95,7 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an }); ``` -6. In your `hooks.client.(js|ts)` or `hooks.server.(js|ts)`, you can wrap the `handleError` function as follows: +7. In your `hooks.client.(js|ts)` or `hooks.server.(js|ts)`, you can wrap the `handleError` function as follows: ```javascript import { handleErrorWithSentry } from '@sentry/sveltekit'; From 0f02cb24eaeb3ece94581bc2d17648d565f331f8 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Thu, 16 Mar 2023 18:10:02 +0100 Subject: [PATCH 3/4] fix typo --- packages/sveltekit/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sveltekit/README.md b/packages/sveltekit/README.md index efe45ad7b1bd..439968508529 100644 --- a/packages/sveltekit/README.md +++ b/packages/sveltekit/README.md @@ -130,4 +130,4 @@ Take a look at our [SvelteKit SDK Development Roadmap](https://github.com/getsen This is on our roadmap but it will come at a later time. - We're aiming to **simplify SDK setup** in the future so that you don't have to go in and manually add our wrappers to all your `load` functions and hooks. - This will be addressed once we the SDK supports all Sentry features. + This will be addressed once the SDK supports all Sentry features. From a7c61c080d8af061853a60625db0cfe947fab593 Mon Sep 17 00:00:00 2001 From: Lukas Stracke Date: Fri, 17 Mar 2023 09:16:58 +0100 Subject: [PATCH 4/4] Update packages/sveltekit/README.md Co-authored-by: Francesco Novy --- packages/sveltekit/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/sveltekit/README.md b/packages/sveltekit/README.md index 439968508529..b1a8dbc3e943 100644 --- a/packages/sveltekit/README.md +++ b/packages/sveltekit/README.md @@ -31,7 +31,7 @@ This package is a wrapper around `@sentry/node` for the server and `@sentry/svel ## Usage -Although the SDK is not yet stable, you're more than welcome to give it a try and provide us some early feedback. +Although the SDK is not yet stable, you're more than welcome to give it a try and provide us with early feedback. **Here's how to get started:**