docs(js): Add tunneling to existing quick start guides (#13803)

inventarSarah · web-flow · commit 3db6bb9a495e · 2025-05-28T11:18:04.000+02:00
## DESCRIBE YOUR PR Added a step on tunneling to our existing (relevant) quick start guides: - Angular (manual, wizard) - React (manual) - Nuxt (manual, wizard) - Svelte (manual) - Sveltekit (manual, wizard) - Remix (wizard) Closes: #13713 ## IS YOUR CHANGE URGENT? Help us prioritize incoming PRs by letting us know when the change needs to go live. - [ ] Urgent deadline (GA date, etc.):  - [ ] Other deadline:  - [x] None: 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 added an urgent due date to it. 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) ## EXTRA RESOURCES - [Sentry Docs contributor guide](https://docs.sentry.io/contributing/)
diff --git a/docs/platforms/javascript/guides/angular/index.mdx b/docs/platforms/javascript/guides/angular/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: Angular
-description: 'Learn how to set up Sentry in your Angular application and capture your first errors.'
+description: "Learn how to set up Sentry in your Angular application and capture your first errors."
 sdk: sentry.javascript.angular
 categories:
   - javascript
@@ -46,7 +46,11 @@ This guide assumes that you enable all features and allow the wizard to add an e
 
 </Expandable>
 
-## Step 2: Verify
+## Step 2: Avoid Ad Blockers With Tunneling (Optional)
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+## Step 3: Verify
 
 If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that the Sentry SDK is sending data to your Sentry project by using the example component created by the installation wizard:
 
diff --git a/docs/platforms/javascript/guides/angular/manual-setup.mdx b/docs/platforms/javascript/guides/angular/manual-setup.mdx
@@ -9,7 +9,6 @@ description: "Learn how to set up the Sentry Angular SDK manually."
   installer](/platforms/javascript/guides/angular).
 </Alert>
 
-
 If you can't (or prefer not to) use the installation wizard, follow the instructions below to configure the Sentry Angular SDK in your application. This guide is also useful to adjust the pre-set configuration if you used the installation wizard for automatic setup.
 
 ## Prerequisites
@@ -24,7 +23,9 @@ You need:
 
 Choose the features you want to configure, and this guide will show you how:
 
-<OnboardingOptionButtons options={["error-monitoring", "performance", "session-replay"]} />
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "session-replay"]}
+/>
 
 <PlatformContent includePath="getting-started-features-expandable" />
 
@@ -44,7 +45,6 @@ pnpm add @sentry/angular
 
 <Expandable title="Which SDK version should you use with your Angular version?" permalink="true" level="warning">
 
-
 In its current major version, the Sentry Angular SDK supports Angular 14 and newer.
 
 If you're using an older version of Angular, you also need to use an older version of the SDK. See the table below for compatibility guidance:
@@ -187,7 +187,6 @@ platformBrowserDynamic()
 
 ### Register Sentry Providers
 
-
 The Sentry Angular SDK exports a couple of Angular providers that are necessary to fully instrument your application. We recommend registering them in your `app.config.ts` or main `app.module.ts`:
 
 ```typescript {tabTitle: App Config (Angular 19+)} {filename: app.config.ts} {9, 14-25}
@@ -284,6 +283,7 @@ import * as Sentry from "@sentry/angular";
 })
 export class AppModule {}
 ```
+
 <Alert>
 
 If your Angular app is configured for SSR, make sure that the Sentry providers are not accidentally passed to the SSR config (`app.config.server.ts`). The Sentry Angular SDK can only be used in the browser.
@@ -315,15 +315,18 @@ export class AppModule {
 
 Alternatively, take a look at our <PlatformLink to="/sourcemaps">Uploading Source Maps</PlatformLink> docs
 
-## Step 4: Verify
+## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+## Step 5: Verify
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
 ### Issues
 
 To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your components (e.g. `app.component.ts`), which will trigger an error that Sentry will capture when you click it:
 
-
 ```javascript {filename: app.component.ts} {5, 9-11}
 @Component({
     selector: "app-root",
diff --git a/docs/platforms/javascript/guides/nuxt/index.mdx b/docs/platforms/javascript/guides/nuxt/index.mdx
@@ -40,7 +40,11 @@ This guide assumes that you enable all features and allow the wizard to create a
 
 </Expandable>
 
-## Step 2: Verify Your Setup
+## Step 2: Avoid Ad Blockers With Tunneling (Optional)
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+## Step 3: Verify Your Setup
 
 If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page created by the installation wizard.
 
diff --git a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx
@@ -96,7 +96,7 @@ Sentry.init({
   // dsn: useRuntimeConfig().public.sentry.dsn
   // modify depending on your custom runtime config
   dsn: "___PUBLIC_DSN___",
-  
+
   // Adds request headers and IP for users, for more info visit:
   // https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/options/#sendDefaultPii
   sendDefaultPii: true,
@@ -225,7 +225,11 @@ export default defineNuxtConfig({
 
 The `hidden` option enables source map generation while preventing source map reference comments that would normally appear at the end of each generated file in the build output.
 
-## Step 4: Verify Your Setup
+## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+## Step 5: Verify Your Setup
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx
@@ -180,10 +180,19 @@ To capture Redux state data, use `Sentry.createReduxEnhancer` when initializing
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
 <OnboardingOption optionId="performance">
-  ## Step 7: Verify Your Setup
+  ## Step 7: Avoid Ad Blockers With Tunneling (Optional)
+</OnboardingOption>
+<OnboardingOption optionId="performance" hideForThisOption>
+  ## Step 6: Avoid Ad Blockers With Tunneling (Optional)
+</OnboardingOption>
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+<OnboardingOption optionId="performance">
+  ## Step 8: Verify Your Setup
 </OnboardingOption>
 <OnboardingOption optionId="performance" hideForThisOption>
-  ## Step 6: Verify Your Setup
+  ## Step 7: Verify Your Setup
 </OnboardingOption>
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
diff --git a/docs/platforms/javascript/guides/remix/index.mdx b/docs/platforms/javascript/guides/remix/index.mdx
@@ -36,11 +36,15 @@ This guide assumes that you enable all features and allow the wizard to create a
 
 </Expandable>
 
-## Step 2: Verify Your Setup
+## Step 2: Avoid Ad Blockers With Tunneling (Optional)
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+## Step 3: Verify Your Setup
 
 If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page created by the installation wizard:
 
-1. Open the example page `/sentry-example-page` in your browser. For most Remix applications, this will be at localhost.
+1. Open the example page `/sentry-example-page` in your browser. For most Remix applications, this will be at localhost.
 2. Click the "Throw Sample Error" button to trigger a frontend error and trace.
 
 <Alert level="success" title="Tip">
diff --git a/docs/platforms/javascript/guides/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx
@@ -143,7 +143,11 @@ export default app;
 
 <PlatformContent includePath="getting-started-sourcemaps-short-version" />
 
-## Step 4: Verify Your Setup
+## Step 4: Avoid Ad Blockers With Tunneling (Optional)
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+## Step 5: Verify Your Setup
 
 Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
 
diff --git a/docs/platforms/javascript/guides/sveltekit/index.mdx b/docs/platforms/javascript/guides/sveltekit/index.mdx
@@ -34,7 +34,11 @@ This guide assumes that you enable all features and allow the wizard to create a
 
 </Expandable>
 
-## Step 2: Verify Your Setup
+## Step 2: Avoid Ad Blockers With Tunneling (Optional)
+
+<PlatformContent includePath="getting-started-tunneling" />
+
+## Step 3: Verify Your Setup
 
 If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard:
 
diff --git a/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx b/docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
@@ -403,18 +403,7 @@ Follow this guide to [configure Sentry for Cloudflare](/platforms/javascript/gui
 
 ## Step 5: Avoid Ad Blockers With Tunneling (Optional)
 
-You can prevent ad blockers from blocking Sentry events using tunneling. Use the `tunnel` option to add an API endpoint in your application that forwards Sentry events to Sentry servers.
-
-Update `Sentry.init` in your `hooks.client.(js|ts)` file with the following option:
-
-```javascript {filename:hooks.client.(js|ts)}
-Sentry.init({
-  dsn: "___PUBLIC_DSN___",,
-  tunnel: "/tunnel",
-});
-```
-
-This will send all events to the `tunnel` endpoint. However, the events need to be parsed and redirected to Sentry, so you need to do additional configuration on the server. You can find a detailed explanation on how to do this on our [Troubleshooting page](/platforms/javascript/guides/sveltekit/troubleshooting/#using-the-tunnel-option).
+<PlatformContent includePath="getting-started-tunneling" />
 
 ## Step 6: Verify Your Setup
 
diff --git a/platform-includes/getting-started-tunneling/javascript.mdx b/platform-includes/getting-started-tunneling/javascript.mdx
@@ -0,0 +1,12 @@
+You can prevent ad blockers from blocking Sentry events using tunneling. Use the `tunnel` option to add an API endpoint in your application that forwards Sentry events to Sentry servers.
+
+To enable tunneling, update `Sentry.init` with the following option:
+
+```javascript {3}
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",,
+  tunnel: "/tunnel",
+});
+```
+
+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 <PlatformLink to="/troubleshooting/#using-the-tunnel-option"> Troubleshooting page</PlatformLink>.
diff --git a/platform-includes/getting-started-tunneling/javascript.remix.mdx b/platform-includes/getting-started-tunneling/javascript.remix.mdx
@@ -0,0 +1,12 @@
+You can prevent ad blockers from blocking Sentry events using tunneling. Use the `tunnel` option to add an API endpoint in your application that forwards Sentry events to Sentry servers.
+
+To enable tunneling, update `Sentry.init` in your `entry.client.tsx` file with the following option:
+
+```javascript {filename:entry.client.tsx}{3}
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",,
+  tunnel: "/tunnel",
+});
+```
+
+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 <PlatformLink to="/troubleshooting/#using-the-tunnel-option"> Troubleshooting page</PlatformLink>.
diff --git a/platform-includes/getting-started-tunneling/javascript.sveltekit.mdx b/platform-includes/getting-started-tunneling/javascript.sveltekit.mdx
@@ -0,0 +1,12 @@
+You can prevent ad blockers from blocking Sentry events using tunneling. Use the `tunnel` option to add an API endpoint in your application that forwards Sentry events to Sentry servers.
+
+To enable tunneling, update `Sentry.init` in your `hooks.client.(js|ts)` file with the following option:
+
+```javascript {filename:hooks.client.(js|ts)}
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",,
+  tunnel: "/tunnel",
+});
+```
+
+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 [Troubleshooting page](/platforms/javascript/guides/sveltekit/troubleshooting/#using-the-tunnel-option).
