Skip to content

Commit 70e8e3a

Browse files
authored
docs(js): Update nextjs docs on tunnelRoute option (#14066)
1 parent a345a53 commit 70e8e3a

File tree

2 files changed

+20
-14
lines changed

2 files changed

+20
-14
lines changed

docs/platforms/javascript/guides/nextjs/configuration/build/index.mdx

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -226,20 +226,24 @@ excludeServerRoutes: [
226226

227227
</SdkOption>
228228

229-
<SdkOption name="tunnelRoute" type="string">
229+
<SdkOption name="tunnelRoute" type="string | boolean">
230230
<Alert level="info">
231231
This feature requires **Next.js version 11+** and doesn't currently work with self-hosted Sentry instances.
232232
</Alert>
233233

234234
Tunnel Sentry requests through this route on your Next.js server to prevent ad-blockers from blocking Sentry events from being sent.
235-
This route should be a path, like `/error-monitoring`, as it adds an API endpoint within your application.
235+
236+
This option can be set to:
237+
238+
- `true` for auto-generated routes, which are unpredictable and change with each deployment.
239+
- A custom static string path like `/error-monitoring`.
236240

237241
Learn more about tunneling in the <PlatformLink to="/troubleshooting/#dealing-with-ad-blockers">troubleshooting section</PlatformLink>.
238242

239-
<Expandable level="warning" title="Complications with Next.js middleware">
240-
Client-side event recording will fail if your Next.js middleware intercepts
241-
the configured route. To prevent this, exclude the tunnel route by adding a
242-
negative matcher to your middleware like `(?!monitoring-tunnel)`.
243+
<Expandable level="warning" title="Using Next.js middleware on Turbopack">
244+
If you're using Turbopack, client-side event recording will fail if your Next.js middleware intercepts the configured tunnel route. To fix this, set the route to a fixed string (like `/error-monitoring`) and add a negative matcher like `(?!error-monitoring)` in your middleware to exclude the tunnel route.
245+
246+
If you're not using Turbopack, Sentry will automatically skip the tunnel route in your middleware.
243247
</Expandable>
244248

245249
</SdkOption>

docs/platforms/javascript/guides/nextjs/manual-setup.mdx

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -449,14 +449,16 @@ Make sure to keep your auth token secret and out of version control.
449449

450450
You can prevent ad blockers from blocking Sentry events using tunneling. Use the `tunnelRoute` option to add an API endpoint in your application that forwards Sentry events to Sentry servers.
451451

452-
Update `withSentryConfig` in your `next.config.(js|mjs)` file with the following options:
452+
For better ad-blocker evasion, you can either:
453+
- Set `tunnelRoute: true` to automatically generate a random tunnel route for each build, making it harder for ad-blockers to detect and block monitoring requests
454+
- Set `tunnelRoute: "/my-tunnel-route"` to use a static route of your choosing
453455

454456
```javascript {tabTitle:ESM} {filename:next.config.mjs}
455457
export default withSentryConfig(nextConfig, {
456458
// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
457459
// This can increase your server load as well as your hosting bill.
458460
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-side errors will fail.
459-
tunnelRoute: "/monitoring",
461+
tunnelRoute: true, // Generates a random route for each build (recommended)
460462
});
461463
```
462464

@@ -465,15 +467,15 @@ module.exports = withSentryConfig(nextConfig, {
465467
// Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
466468
// This can increase your server load as well as your hosting bill.
467469
// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-side errors will fail.
468-
tunnelRoute: "/monitoring",
470+
tunnelRoute: true, // Generates a random route for each build (recommended)
469471
});
470472
```
471473

472-
<Alert level="warning" title="Complications with Next.js middleware">
473-
Client-side event recording will fail if your Next.js middleware intercepts
474-
the configured route. To prevent this, exclude the tunnel route by adding a
475-
negative matcher to your middleware like `(?!monitoring-tunnel)`.
476-
</Alert>
474+
<Expandable level="warning" title="Using Next.js middleware on Turbopack">
475+
If you're using Turbopack, client-side event recording will fail if your Next.js middleware intercepts the configured tunnel route. To fix this, set the route to a fixed string (like `/error-monitoring`) and add a negative matcher like `(?!error-monitoring)` in your middleware to exclude the tunnel route.
476+
477+
If you're not using Turbopack, Sentry will automatically skip the tunnel route in your middleware.
478+
</Expandable>
477479

478480
## Step 6: Instrument Vercel Cron Jobs (Optional)
479481

0 commit comments

Comments
 (0)