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
{{ message }}
Repository navigation
Commit c8f68d1
Browse filesBrowse the repository at this point in the historyBrowse files
docs(nextjs): Document the tunnel route handler and tunnel credentials (#20075)
## DESCRIBE YOUR PR
Documents the tunnel changes in SDK 11.9.0.
⚠️ Merge this PR only after 10.77.1 and 11.9.0 are released.
- Next.js `tunnelRoute`: add handler mode
(`app/sentry-tunnel/route.ts`). In this mode, a route handler in the app
forwards only the request body to Sentry. Rewrite mode now sends with
`credentials: "omit"`. Apps behind Vercel Deployment Protection or
another login should use handler mode.
- Troubleshooting: list what a custom tunnel must do, add
`handleTunnelRequest`, and add a new "Credentials on Tunnel Requests"
entry.
- Short notes in `options.mdx`, the getting-started includes, the
Next.js setup pages, and TanStack Start.
Related SDK PRs, all going to be released in **11.9.0**:
- getsentry/sentry-javascript#25456
- getsentry/sentry-javascript#25515
- getsentry/sentry-javascript#25509
Backport PRs for **10.77.1**:
- getsentry/sentry-javascript#25559
- getsentry/sentry-javascript#25560
- getsentry/sentry-javascript#25561
## IS YOUR CHANGE URGENT?
Help us prioritize incoming PRs by letting us know when the change needs
to go live.
Select exactly one option. For deadlines, replace `YYYY-MM-DD` with the
due date. You can update this information later by editing the PR
description.
- [ ] Urgent deadline (GA date, etc.): YYYY-MM-DD
- [x] Other deadline: with the 11.9.0 release
- [ ] No deadline: Not urgent, can wait up to 1 week+
## SLA
- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
supplied a deadline.
Thanks in advance for your help!
## PRE-MERGE CHECKLIST
_Make sure you've checked the following before merging your changes:_
- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)
Copy file name to clipboardExpand all lines: docs/platforms/javascript/common/configuration/options.mdx
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -87,6 +87,8 @@ Environments are case-sensitive. The environment name can't contain newlines, sp
87
87
88
88
Sets the URL that will be used to transport captured events. This can be used to work around ad-blockers or to have more granular control over events sent to Sentry. Adding your DSN is still required when using this option so necessary attributes can be set on the generated Sentry data. This option **requires the implementation** of a custom server endpoint. Learn more and find examples in [Dealing with Ad-Blockers](/platforms/javascript/troubleshooting/#dealing-with-ad-blockers).
89
89
90
+
The endpoint must forward only the request body to Sentry and accept only your own DSNs. Learn more in [Using the `tunnel` Option](/platforms/javascript/troubleshooting/#using-the-tunnel-option).
Copy file name to clipboardExpand all lines: docs/platforms/javascript/common/troubleshooting/index.mdx
+49-2Lines changed: 49 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -250,7 +250,28 @@ Sentry.init({
250
250
});
251
251
```
252
252
253
-
Once configured, all events will be sent to the `/tunnel` endpoint. This solution, however, requires an additional configuration on the server, as the events now need to be parsed and redirected to Sentry. Here's an example for your server component:
253
+
Once configured, all events will be sent to the `/tunnel` endpoint. This solution, however, requires an additional configuration on the server, as the events now need to be parsed and redirected to Sentry.
254
+
255
+
Your tunnel endpoint must:
256
+
257
+
- Forward only the request body to Sentry, without the request headers.
258
+
- Accept only envelopes whose DSN is on a list of allowed DSNs. Otherwise, anyone can use your endpoint to send requests to other servers.
259
+
- Send the envelope only to the host of that DSN.
260
+
261
+
On a JavaScript server with Fetch API `Request` and `Response` objects, `handleTunnelRequest` from `@sentry/core` (SDK version `10.40.0` and later) does this for you. Starting with versions `10.77.1` (v10) and `11.9.0` (v11), it also rejects requests larger than 20 MiB.
@@ -420,6 +441,32 @@ If you would like to copy and paste the snippet directly, here it is minified:
420
441
421
442
</Expandable>
422
443
444
+
<Expandable permalink title="Credentials on Tunnel Requests">
445
+
446
+
The browser SDK doesn't set the [`credentials`](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials) option of `fetch`. With the default value `same-origin`, the browser sends credentials (cookies and HTTP authentication) to a tunnel on the same origin as your app. A tunnel that forwards request headers sends these credentials to Sentry.
The Next.js `tunnelRoute` option handles this for you. See <PlatformLink to="/configuration/build/#tunnelRoute">`tunnelRoute`</PlatformLink>.
451
+
452
+
</PlatformSection>
453
+
454
+
Forward only the request body, or tell the browser to send no credentials:
455
+
456
+
```javascript
457
+
Sentry.init({
458
+
dsn:"___PUBLIC_DSN___",
459
+
tunnel:"/tunnel",
460
+
transportOptions: {
461
+
fetchOptions: { credentials:"omit" },
462
+
},
463
+
});
464
+
```
465
+
466
+
If a layer in front of your tunnel requires credentials (for example, Vercel Deployment Protection, Cloudflare Access, or HTTP Basic authentication), it rejects requests without credentials. Keep the default in this case, and make sure that your tunnel doesn't forward the request headers.
467
+
468
+
</Expandable>
469
+
423
470
</PlatformCategorySection>
424
471
425
472
<Expandable permalink title="Third party promise libraries">
Copy file name to clipboardExpand all lines: docs/platforms/javascript/guides/cordova/configuration/options.mdx
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -51,6 +51,8 @@ Environments are case-sensitive. The environment name can't contain newlines, sp
51
51
52
52
Sets the URL that will be used to transport captured events. This can be used to work around ad-blockers or to have more granular control over events sent to Sentry. Adding your DSN is still required when using this option so necessary attributes can be set on the generated Sentry data. This option **requires the implementation** of a custom server endpoint. Learn more and find examples in [Dealing with Ad-Blockers](/platforms/javascript/troubleshooting/#dealing-with-ad-blockers).
53
53
54
+
The endpoint must forward only the request body to Sentry and accept only your own DSNs. Learn more in [Using the `tunnel` Option](/platforms/javascript/troubleshooting/#using-the-tunnel-option).
This feature requires **Next.js version 11+** and doesn't currently work with self-hosted Sentry instances.
208
+
This feature requires **Next.js version 11+**. Rewrite mode doesn't work with self-hosted Sentry instances.
209
209
</Alert>
210
210
211
211
Tunnel Sentry requests through this route on your Next.js server to prevent ad-blockers from blocking Sentry events from being sent.
@@ -215,15 +215,73 @@ This option can be set to:
215
215
-`true` for auto-generated routes, which are unpredictable and change with each deployment.
216
216
- A custom static string path like `/error-monitoring`.
217
217
218
+
<Expandablelevel="warning"title="If your middleware blocks requests without a session">
219
+
220
+
Your middleware (`proxy.ts` or `middleware.ts`) also runs for tunnel requests. On v10, the SDK skips your middleware only in rewrite mode with Webpack. Exclude the tunnel route in its `matcher`. This needs a fixed string, because `true` creates a new path for each build:
Learn more about tunneling in the <PlatformLinkto="/troubleshooting/#dealing-with-ad-blockers">troubleshooting section</PlatformLink>.
219
231
220
-
<Expandablelevel="warning"title="Using Next.js middleware on Turbopack">
221
-
If you're using Turbopack, client-side event recording will fail if your
222
-
Next.js middleware intercepts the configured tunnel route. To fix this, set
223
-
the route to a fixed string (like `/error-monitoring`) and add a negative
224
-
matcher like `(?!error-monitoring)` in your middleware to exclude the tunnel
225
-
route. If you're not using Turbopack, Sentry will automatically skip the
226
-
tunnel route in your middleware.
232
+
The tunnel route works in one of two modes:
233
+
234
+
-**Rewrite mode** (default): A Next.js rewrite proxies each request to Sentry with all its request headers. Works only with Sentry SaaS DSNs.
235
+
-**Handler mode**: A route handler in your app forwards only the request body to Sentry. Works with any DSN.
236
+
237
+
Starting with versions `10.77.1` (v10) and `11.9.0` (v11), the browser sends tunnel requests in rewrite mode [with `credentials: "omit"`](https://developer.mozilla.org/en-US/docs/Web/API/Request/credentials).
238
+
If a layer in front of your app requires credentials (for example, Vercel Deployment Protection or HTTP Basic authentication), it rejects these requests. Use handler mode in this case.
239
+
You can also set `credentials: "same-origin"`, but rewrite mode then forwards the credentials to Sentry:
This works with any `tunnelRoute` value, including `true`. When the SDK finds the file, the build prints this line:
261
+
262
+
```bash
263
+
[@sentry/nextjs] The tunnel route sends events through app/sentry-tunnel/route.ts. Only the event payload goes to Sentry.
264
+
```
265
+
266
+
If the line is missing, the SDK uses rewrite mode.
267
+
268
+
The handler accepts only the DSN of your server-side SDK. It rejects other DSNs with a `403` and requests larger than 20 MiB with a `413`. If your browser SDK uses a different DSN, list the allowed DSNs:
- The SDK doesn't find the file in a route group, such as `app/(group)/sentry-tunnel/`.
282
+
- With `"moduleResolution": "node"` in `tsconfig.json`, the type check fails with `Cannot find module '@sentry/nextjs/tunnel'`. Set `moduleResolution` to `bundler`, `node16`, or `nodenext`.
283
+
- Each event request runs the route handler. On serverless hosts, this is one function invocation for each request.
Copy file name to clipboardExpand all lines: docs/platforms/javascript/guides/nextjs/index.mdx
+3Lines changed: 3 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -139,6 +139,9 @@ If you use the App Router, the wizard adds Sentry to `app/global-error.tsx` to c
139
139
140
140
The wizard wraps your Next.js configuration with `withSentryConfig`. This instruments your app at build time, uploads source maps, and, if you said yes in the wizard, routes browser requests to Sentry through your server to avoid ad blockers.
141
141
142
+
To forward only the request body to Sentry, add a tunnel route handler (SDK version `10.77.1` and later on v10, `11.9.0` and later on v11). Use the handler if Vercel Deployment Protection or another login protects your app.
143
+
Learn more about the [`tunnelRoute` option](/platforms/javascript/guides/nextjs/configuration/build/#tunnelRoute).
Copy file name to clipboardExpand all lines: docs/platforms/javascript/guides/nextjs/manual-setup/index.mdx
+8Lines changed: 8 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -254,6 +254,9 @@ Prevent ad blockers from blocking Sentry events by routing them through your Nex
254
254
This increases server load. Consider the trade-off for your application.
255
255
</Alert>
256
256
257
+
To forward only the request body to Sentry, also add `app/sentry-tunnel/route.ts` (SDK version `10.77.1` and later on v10, `11.9.0` and later on v11).
258
+
Use this file if Vercel Deployment Protection or another login protects your app. Learn more <PlatformLinkto="/configuration/build/#tunnelRoute">in `tunnelRoute`</PlatformLink>.
259
+
257
260
<Expandabletitle="Using Next.js proxy (middleware) with tunneling">
258
261
259
262
If you're using Next.js proxy/middleware that intercepts requests, exclude the tunnel route. The file is called `proxy.ts` in Next.js 16+ and `middleware.ts` in Next.js 15:
Copy file name to clipboardExpand all lines: docs/platforms/javascript/guides/nextjs/manual-setup/webpack-setup.mdx
+3Lines changed: 3 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -222,6 +222,9 @@ Tunneling works identically for both Webpack and Turbopack. Sentry automatically
222
222
223
223
Enable tunneling to bypass ad-blockers. Use a fixed route so you can exclude it from middleware if needed.
224
224
225
+
To forward only the request body to Sentry, add a tunnel route handler (SDK version `10.77.1` and later on v10, `11.9.0` and later on v11).
226
+
Use the handler if Vercel Deployment Protection or another login protects your app. Learn more about the [`tunnelRoute` option](/platforms/javascript/guides/nextjs/configuration/build/#tunnelRoute).
227
+
225
228
<Expandabletitle="Using random tunnel routes">
226
229
227
230
You can use `tunnelRoute: true` to auto-generate a random route. However, random routes cannot be excluded from middleware matchers since the route changes on each build. This may cause issues if you have middleware that intercepts all requests.
Copy file name to clipboardExpand all lines: docs/platforms/javascript/guides/tanstackstart-react/features/createSentryTunnelRoute.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -13,7 +13,7 @@ description: "Learn how to manually define a Sentry tunnel route in your TanStac
13
13
the route file, the DSN allowlist, or can't use the Vite plugin.
14
14
</Alert>
15
15
16
-
The `createSentryTunnelRoute` helper returns a TanStack Start server-route configuration with a `POST` handler that forwards Sentry envelopes to Sentry's ingest servers. Use it inside a file route to expose a same-origin tunnel endpoint.
16
+
The `createSentryTunnelRoute` helper returns a TanStack Start server-route configuration with a `POST` handler that forwards Sentry envelopes to Sentry's ingest servers. Use it inside a file route to expose a same-origin tunnel endpoint. It forwards only the request body to Sentry.
Copy file name to clipboardExpand all lines: docs/platforms/javascript/guides/tanstackstart-react/features/sentryTanstackStart.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -97,7 +97,7 @@ sentryTanstackStart({
97
97
98
98
<AvailableSinceversion="10.51.0" />
99
99
100
-
The `tunnelRoute` option registers a same-origin TanStack Start server route that forwards Sentry envelopes to Sentry's ingest servers. It also automatically sets the client `tunnel` option in `Sentry.init()` so browser events go through that route. This helps avoid ad blockers and corporate firewalls that block requests to `*.sentry.io`.
100
+
The `tunnelRoute` option registers a same-origin TanStack Start server route that forwards Sentry envelopes to Sentry's ingest servers. It also automatically sets the client `tunnel` option in `Sentry.init()` so browser events go through that route. This helps avoid ad blockers and corporate firewalls that block requests to `*.sentry.io`. It forwards only the request body to Sentry.
Copy file name to clipboardExpand all lines: platform-includes/getting-started-tunneling/javascript.mdx
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
You can prevent ad blockers from blocking Sentry events using tunneling. Use the `tunnel` option in `Sentry.init` to add an API endpoint in your application that forwards Sentry events to Sentry servers.
2
2
3
-
This will send all events to the `tunnel` endpoint. However, the events need to be parsed and redirected to Sentry, so you'll need to do additional configuration on the server. You can find a detailed explanation on how to do this on our <PlatformLinkto="/troubleshooting/#using-the-tunnel-option"> Troubleshooting page</PlatformLink>.
3
+
This will send all events to the `tunnel` endpoint. However, the events need to be parsed and redirected to Sentry, so you'll need to do additional configuration on the server. The endpoint must forward only the request body to Sentry and accept only your own DSN. You can find a detailed explanation on how to do this on our <PlatformLinkto="/troubleshooting/#using-the-tunnel-option"> Troubleshooting page</PlatformLink>.
0 commit comments