You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Next, update your `src/hooks.server.(ts|js)` file to use the `initCloudflareSentryHandle` method from the Sentry Cloudflare SDK and remove the `Sentry.init` call from `@sentry/sveltekit`.
description: "Official Sentry SDK for Cloudflare Workers and Cloudflare Pages."
3
+
description: "Learn how to manually set up Sentry for Cloudflare Workers and Cloudflare Pages and capture your first errors."
4
4
sdk: sentry.javascript.cloudflare
5
5
categories:
6
6
- javascript
@@ -9,43 +9,49 @@ categories:
9
9
- serverless
10
10
---
11
11
12
-
You can use the Sentry Cloudflare SDK with popular frameworks running on Cloudflare:
12
+
Use this guide for general instructions on using the Sentry SDK with Cloudflare. If you're using any of the listed frameworks, follow their specific setup instructions:
13
13
14
14
-**[Astro](frameworks/astro/)**
15
15
-**[Hono](frameworks/hono/)**
16
+
-**[Nuxt](frameworks/nuxt)**
16
17
-**[Remix](frameworks/remix/)**
17
18
-**[SvelteKit](frameworks/sveltekit/)**
18
19
19
-
Take a look at your framework of choice, as there are likely additional instructions for setting up Sentry with it. For more framework-specific guidance, see the [frameworks section](frameworks/).
If you're not using one of these frameworks, or are just looking for general instructions for Cloudflare usage, you're in the right place.
22
+
## Step 1: Install
22
23
23
-
## Features
24
-
25
-
In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/).
26
-
27
-
Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
24
+
Choose the features you want to configure, and this guide will show you how:
To use this SDK, add the `sentryPagesPlugin` as [middleware to your Cloudflare Pages application](https://developers.cloudflare.com/pages/functions/middleware/).
75
+
### Setup for Cloudflare Pages
70
76
71
-
We recommend adding a `functions/_middleware.js` for the middleware setup so that Sentry is initialized for your entire
72
-
app.
77
+
To use the Sentry SDK, add the `sentryPagesPlugin` as [middleware to your Cloudflare Pages application](https://developers.cloudflare.com/pages/functions/middleware/).
78
+
For this, we recommend you create a `functions/_middleware.js` file to set up the middleware for your entire app:
73
79
74
80
```javascript {filename:functions/_middleware.js}
75
81
import*asSentryfrom"@sentry/cloudflare";
@@ -92,11 +98,11 @@ export const onRequest = [
92
98
// Enable logs to be sent to Sentry
93
99
enableLogs:true,
94
100
// ___PRODUCT_OPTION_END___ logs
95
-
96
101
// ___PRODUCT_OPTION_START___ performance
102
+
97
103
// Set tracesSampleRate to 1.0 to capture 100% of spans for tracing.
##Step 3: Add Readable Stack Traces With Source Maps (Optional)
109
115
110
-
You can use the `instrumentDurableObjectWithSentry` method to instrument [Cloudflare Durable Objects](https://developers.cloudflare.com/durable-objects/). This will need to be done alongside the worker setup.
116
+
The stack traces in your Sentry errors probably won't look like your actual code. To fix this, upload your source maps to Sentry.
111
117
112
-
See the [Cloudflare Durable Objects](features/durableobject/) guide for more information.
118
+
First, set the `upload_source_maps` option to `true` in your `wrangler.(jsonc|toml)` config file to enable source map uploading:
You can use the `instrumentWorkflowWithSentry` method to instrument [Cloudflare Workflows](https://developers.cloudflare.com/workflows/). This will need to be done alongside the worker setup.
126
+
```toml {tabTitle:Toml} {filename:wrangler.toml}
127
+
upload_source_maps = true
128
+
```
117
129
118
-
See the [Cloudflare Workflows](features/workflows/) guide for more information.
130
+
Next, run the Sentry Wizard to finish your setup:
119
131
120
-
## Add Readable Stack Traces to Errors
132
+
```bash
133
+
npx @sentry/wizard@latest -i sourcemaps
134
+
```
121
135
122
-
Depending on how you've set up your project, the stack traces in your Sentry errors probably don't look like your actual code.
136
+
## Step 4: Verify Your Setup
123
137
124
-
To fix this, upload your source maps to Sentry.
138
+
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
125
139
126
-
To start, set the `upload_source_maps` option to `true` in your wrangler config file to enable source map uploading.
First, let's make sure Sentry is correctly capturing errors and creating issues in your project. Add the following code to a new route that will trigger an error when called.
143
+
144
+
#### Cloudflare Workers
145
+
146
+
Add the following code snippet to your main worker file to create a `/debug-sentry` route:
147
+
148
+
```javascript {filename:index.js}
149
+
exportdefault {
150
+
asyncfetch(request) {
151
+
consturl=newURL(request.url);
152
+
153
+
if (url.pathname==="/debug-sentry") {
154
+
thrownewError("My first Sentry error!");
155
+
}
156
+
157
+
// Your existing routes and logic here...
158
+
returnnewResponse("...");
159
+
},
160
+
};
161
+
```
162
+
163
+
#### Cloudflare Pages
164
+
165
+
Create a new route by adding the following code snippet to a file in your `functions` directory, such as `functions/debug-sentry.js`:
166
+
167
+
```javascript {filename:debug-sentry.js}
168
+
exportasyncfunctiononRequest(context) {
169
+
thrownewError("My first Sentry error!");
131
170
}
132
171
```
133
172
134
-
```toml {tabTitle:Toml} {filename:wrangler.toml}
135
-
upload_source_maps = true
173
+
<OnboardingOptionoptionId="performance">
174
+
### Tracing
175
+
To test your tracing configuration, update the previous code snippet by starting a trace to measure the time it takes to run your code.
176
+
177
+
#### Cloudflare Workers
178
+
179
+
```javascript {filename:index.js}
180
+
exportdefault {
181
+
asyncfetch(request) {
182
+
consturl=newURL(request.url);
183
+
184
+
if (url.pathname==="/debug-sentry") {
185
+
awaitSentry.startSpan(
186
+
{
187
+
op:"test",
188
+
name:"My First Test Transaction",
189
+
},
190
+
async () => {
191
+
awaitnewPromise((resolve) =>setTimeout(resolve, 100)); // Wait for 100ms
192
+
thrownewError("My first Sentry error!");
193
+
}
194
+
);
195
+
}
196
+
197
+
// Your existing routes and logic here...
198
+
returnnewResponse("...");
199
+
},
200
+
};
201
+
```
202
+
203
+
#### Cloudflare Pages
204
+
205
+
```javascript {filename:debug-sentry.js}
206
+
exportasyncfunctiononRequest(context) {
207
+
awaitSentry.startSpan(
208
+
{
209
+
op:"test",
210
+
name:"My First Test Transaction",
211
+
},
212
+
async () => {
213
+
awaitnewPromise((resolve) =>setTimeout(resolve, 100)); // Wait for 100ms
For more information on source maps or for more options to upload them, head over to our <PlatformLinkto="/sourcemaps/">Source Maps</PlatformLink> documentation.
224
+
Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.
Copy file name to clipboardExpand all lines: platform-includes/getting-started-config/javascript.cloudflare.mdx
+3-5Lines changed: 3 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,4 @@
1
-
Configuration should happen as early as possible in your application's lifecycle.
2
-
3
-
To use the SDK, you'll need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.jsonc` / `wrangler.toml` config. This is because the SDK needs access to the `AsyncLocalStorage` API to work correctly.
1
+
Since the SDK needs access to the `AsyncLocalStorage` API, you need to set either the `nodejs_compat` or `nodejs_als` compatibility flags in your `wrangler.(jsonc|toml)` configuration file:
0 commit comments