8000 docs(sveltekit): Improve setup instructions (#7903) · benjick/sentry-javascript@2e64ef7 · GitHub
[go: up one dir, main page]

Skip to content

Commit 2e64ef7

Browse files
authored
docs(sveltekit): Improve setup instructions (getsentry#7903)
1 parent 55b51ef commit 2e64ef7

File tree

1 file changed

+13
-5
lines changed

1 file changed

+13
-5
lines changed

packages/sveltekit/README.md

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -55,11 +55,12 @@ Although the SDK is not yet stable, you're more than welcome to give it a try an
5555

5656
The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.dev/docs/hooks) to capture error and performance data.
5757

58-
1. If you don't already have a `hooks.client.(js|ts)` file, create a new one.
58+
1. If you don't already have a client hooks file, create a new one in `src/hooks.client.(js|ts)`.
5959

6060
2. On the top of your `hooks.client.(js|ts)` file, initialize the Sentry SDK:
6161

6262
```javascript
63+
// hooks.client.(js|ts)
6364
import * as Sentry from '@sentry/sveltekit';
6465

6566
Sentry.init({
@@ -75,6 +76,7 @@ The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.d
7576
3. Add our `handleErrorWithSentry` function to the `handleError` hook:
7677

7778
```javascript
79+
// hooks.client.(js|ts)
7880
import { handleErrorWithSentry } from '@sentry/sveltekit';
7981

8082
const myErrorHandler = (({ error, event }) => {
@@ -88,11 +90,12 @@ The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.d
8890

8991
### 3. Server-side Setup
9092

91-
1. If you don't already have a `hooks.server.(js|ts)` file, create a new one.
93+
1. If you don't already have a server hooks file, create a new one in `src/hooks.server.(js|ts)`.
9294

9395
2. On the top of your `hooks.server.(js|ts)` file, initialize the Sentry SDK:
9496

9597
```javascript
98+
// hooks.server.(js|ts)
9699
import * as Sentry from '@sentry/sveltekit';
97100

98101
Sentry.init({
@@ -104,6 +107,7 @@ The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.d
104107
3. Add our `handleErrorWithSentry` function to the `handleError` hook:
105108

106109
```javascript
110+
// hooks.server.(js|ts)
107111
import { handleErrorWithSentry } from '@sentry/sveltekit';
108112

109113
const myErrorHandler = (({ error, event }) => {
@@ -118,6 +122,7 @@ The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.d
118122
4. Add our request handler to the `handle` hook in `hooks.server.ts`:
119123

120124
```javascript
125+
// hooks.server.(js|ts)
121126
import { sentryHandle } from '@sentry/sveltekit';
122127

123128
export const handle = sentryHandle;
@@ -131,6 +136,7 @@ The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.d
131136
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:
132137

133138
```javascript
139+
// +page.(js|ts)
134140
import { wrapLoadWithSentry } from '@sentry/sveltekit';
135141

136142
export const load = wrapLoadWithSentry((event) => {
@@ -141,6 +147,7 @@ The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.d
141147
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:
142148

143149
```javascript
150+
// +page.server.(js|ts)
144151
import { wrapServerLoadWithSentry } from '@sentry/sveltekit';
145152

146153
export const load = wrapServerLoadWithSentry((event) => {
@@ -154,6 +161,7 @@ The Sentry SvelteKit SDK mostly relies on [SvelteKit Hooks](https://kit.svelte.d
154161
Make sure that it is added before the `sveltekit` plugin:
155162

156163
```javascript
164+
// vite.config.(js|ts)
157165
import { sveltekit } from '@sveltejs/kit/vite';
158166
import { sentrySvelteKit } from '@sentry/sveltekit';
159167
@@ -178,7 +186,7 @@ can either set them as env variables (for example in a `.env` file):
178186
Or you can pass them in whatever form you prefer to `sentrySvelteKit`:
179187

180188
```js
181-
// vite.config.js
189+
// vite.config.(js|ts)
182190
import { sveltekit } from '@sveltejs/kit/vite';
183191
import { sentrySvelteKit } from '@sentry/sveltekit';
184192
@@ -204,7 +212,7 @@ Under `sourceMapsUploadOptions`, you can also specify all additional options sup
204212
This might be useful if you're using adapters other than the Node adapter or have a more customized build setup.
205213
206214
```js
207-
// vite.config.js
215+
// vite.config.(js|ts)
208216
import { sveltekit } from '@sveltejs/kit/vite';
209217
import { sentrySvelteKit } from '@sentry/sveltekit';
210218
@@ -233,7 +241,7 @@ export default {
233241
If you don't want to upload source maps automatically, you can disable it as follows:
234242

235243
```js
236-
// vite.config.js
244+
// vite.config.(js|ts)
237245
import { sveltekit } from '@sveltejs/kit/vite';
238246
import { sentrySvelteKit } from '@sentry/sveltekit';
239247

0 commit comments

Comments
 (0)
0