8000 doc(sveltekit): Move SDK initialization to hooks and restructure setu… · TrySound/sentry-javascript@1eb271a · GitHub
[go: up one dir, main page]
Skip to content

Commit 1eb271a

Browse files
Lms24Lms24
authored
doc(sveltekit): Move SDK initialization to hooks and restructure setup in README (getsentry#7661)
Restructures SDK setup into client, server and build setup sections. Also moves init call from dedicated files to hooks.
1 parent cefd523 commit 1eb271a

File tree

1 file changed

+53
-24
lines changed

1 file changed

+53
-24
lines changed

‎packages/sveltekit/README.md

Lines changed: 53 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,8 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an
3737

3838
**Here's how to get started:**
3939

40+
### 1. Prerequesits & Installation
41+
4042
1. Ensure you've set up the [`@sveltejs/adapter-node` adapter](https://kit.svelte.dev/docs/adapter-node)
4143

4244
2. Install the Sentry SvelteKit SDK:
@@ -49,8 +51,13 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an
4951
yarn add @sentry/sveltekit
5052
```
5153

52-
3. Create a `sentry.client.config.(js|ts)` file in the root directory of your SvelteKit project.
53-
In this file you can configure the client-side Sentry SDK just like every other browser-based SDK:
54+
### 2. Client-side Setup
55+
56+
The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.dev/docs/hooks) to capture error and performance data.
57+
58+
1. If you don't already have a `hooks.client.(js|ts)` file, create a new one.
59+
60+
2. On the top of your `hooks.client.(js|ts)` file, initialize the Sentry SDK:
5461

5562
```javascript
5663
import * as Sentry from '@sentry/sveltekit';
@@ -61,50 +68,54 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an
6168
// For instance, initialize Session Replay:
6269
replaysSessionSampleRate: 0.1,
6370
replaysOnErrorSampleRate: 1.0,
64-
integrations: [new Sentry.Replay()]
71+
integrations: [new Sentry.Replay()],
6572
});
6673
```
6774

68-
69-
4. Create a `sentry.server.config.(js|ts)` file in the root directory of your SvelteKit project.
70-
In this file you can configure the server-side Sentry SDK, like the Sentry Node SDK:
75+
3. Add our `handleErrorWithSentry` function to the `handleError` hook:
7176

7277
```javascript
73-
import * as Sentry from '@sentry/sveltekit';
78+
import { handleErrorWithSentry } from '@sentry/sveltekit';
7479

75-
Sentry.init({
76-
dsn: '__DSN__',
77-
traceSampleRate: 1.0,
80+
const myErrorHandler = (({ error, event }) => {
81+
console.error('An error occurred on the client side:', error, event);
7882
});
83+
84+
export const handleError = handleErrorWithSentry(myErrorHandler);
85+
// or alternatively, if you don't have a custom error handler:
86+
// export const handleError = handleErrorWithSentry();
7987
```
8088

81-
5. Add our `withSentryViteConfig` wrapper around your Vite config so that the Sentry SDK is added to your application in `vite.config.(js|ts)`:
82-
```javascript
83-
import { sveltekit } from '@sveltejs/kit/vite';
84-
import { withSentryViteConfig } from '@sentry/sveltekit';
89+
### 3. Server-side Setup
8590

86-
export default withSentryViteConfig({
87-
plugins: [sveltekit()],
88-
// ...
91+
1. If you don't already have a `hooks.server.(js|ts)` file, create a new one.
92+
93+
2. On the top of your `hooks.server.(js|ts)` file, initialize the Sentry SDK:
94+
95+
```javascript
96+
import * as Sentry from '@sentry/sveltekit';
97+
98+
Sentry.init({
99+
dsn: '__DSN__',
100+
tracesSampleRate: 1.0,
89101
});
90102
```
91103

92-
6. In your `hooks.client.(js|ts)` or `hooks.server.(js|ts)`, wrap the `handleError` functions as follows:
104+
3. Add our `handleErrorWithSentry` function to the `handleError` hook:
93105

94106
```javascript
95107
import { handleErrorWithSentry } from '@sentry/sveltekit';
96108

97-
const myErrorHandler = ((input) => {
98-
console.error('An error occurred on the client-side');
99-
return error;
109+
const myErrorHandler = (({ error, event }) => {
110+
console.error('An error occurred on the server side:', error, event);
100111
});
101112

102113
export const handleError = handleErrorWithSentry(myErrorHandler);
103114
// or alternatively, if you don't have a custom error handler:
104115
// export const handleError = handleErrorWithSentry();
105116
```
106117

107-
7. To capture performance data on the server-side, add our handler to the `handle` hook in `hooks.server.ts`:
118+
4. Add our request handler to the `handle` hook in `hooks.server.ts`:
108119

109120
```javascript
110121
import { sentryHandle } from '@sentry/sveltekit';
@@ -115,7 +126,9 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an
115126
// export const handle = sequence(sentryHandle, yourHandler);
116127
```
117128

118-
8. To catch errors and performance data in your universal `load` functions (e.g. in `+page.(js|ts)`), wrap our `wrapLoadWithSentry` function around your load code:
129+
### 4. Configuring `load` Functions
130+
131+
5. To catch errors and performance data in your universal `load` functions (e.g. in `+page.(js|ts)`), wrap our `wrapLoadWithSentry` function around your load code:
119132

120133
```javascript
121134
import { wrapLoadWithSentry } from '@sentry/sveltekit';
@@ -125,7 +138,7 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an
125138
});
126139
```
127140

128-
9. To catch errors and performance data in your server `load` functions (e.g. in `+page.server.(js|ts)`), wrap our `wrapServerLoadWithSentry` function around your load code:
141+
6. To catch errors and performance data in your server `load` functions (e.g. in `+page.server.(js|ts)`), wrap our `wrapServerLoadWithSentry` function around your load code:
129142

130143
```javascript
131144
import { wrapServerLoadWithSentry } from '@sentry/sveltekit';
@@ -135,6 +148,22 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an
135148
});
136149
```
137150

151+
### 5. Vite Setup
152+
153+
3. Add our `withSentryViteConfig` wrapper around your Vite config so that the Sentry SDK can add its plugins to your Vite config `vite.config.(js|ts)`:
154+
```javascript
155+
import { sveltekit } from '@sveltejs/kit/vite';
156+
import { withSentryViteConfig } from '@sentry/sveltekit';
157+
158+
export default withSentryViteConfig({
159+
plugins: [sveltekit()],
160+
// ...
161+
});
162+
```
163+
164+
In the near future this wrapper will add and configure our [Sentry Vite Plugin](https://github.com/getsentry/sentry-javascript-bundler-plugins/tree/main/packages/vite-plugin) to automatically upload source maps to Sentry.
165+
Furthermore, if you prefer to intialize the Sentry SDK in dedicated files, instead of the hook files, you can move the `Sentry.init` code to `sentry.(client|server).config.(js|ts)` files and `withSentryViteConfig` will take care of adding them to your server and client bundles.
166+
138167
## Known Limitations
139168

140169
This SDK is still under active development and several features are missing.

0 commit comments

Comments
 (0)
0