From d38ab7a50cd328a62eb96a7c572a5ff52d7b3d6b Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Thu, 22 May 2025 13:19:55 +0200 Subject: [PATCH 1/3] add tunneling step to existing quick start guides --- .../javascript/guides/angular/index.mdx | 8 ++++++-- .../javascript/guides/angular/manual-setup.mdx | 15 +++++++++------ docs/platforms/javascript/guides/nuxt/index.mdx | 6 +++++- .../javascript/guides/nuxt/manual-setup.mdx | 8 ++++++-- .../platforms/javascript/guides/react/index.mdx | 17 +++++++++++++---- .../javascript/guides/svelte/index.mdx | 6 +++++- .../javascript/guides/sveltekit/index.mdx | 6 +++++- .../guides/sveltekit/manual-setup.mdx | 13 +------------ .../getting-started-tunneling/javascript.mdx | 12 ++++++++++++ .../javascript.sveltekit.mdx | 12 ++++++++++++ 10 files changed, 74 insertions(+), 29 deletions(-) create mode 100644 platform-includes/getting-started-tunneling/javascript.mdx create mode 100644 platform-includes/getting-started-tunneling/javascript.sveltekit.mdx diff --git a/docs/platforms/javascript/guides/angular/index.mdx b/docs/platforms/javascript/guides/angular/index.mdx index 5e533c74e7a7fe..cf9d8b14f8921a 100644 --- 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 -## Step 2: Verify +## Step 2: Avoid Ad Blockers With Tunneling (Optional) + + + +## 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 index ecfe8af3c184ce..134edd46d32cd4 100644 --- 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). - 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: - + @@ -44,7 +45,6 @@ pnpm add @sentry/angular - 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 {} ``` + 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,7 +315,11 @@ export class AppModule { Alternatively, take a look at our Uploading Source Maps docs -## Step 4: Verify +## Step 4: Avoid Ad Blockers With Tunneling (Optional) + + + +## Step 5: Verify Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. @@ -323,7 +327,6 @@ Let's test your setup and confirm that Sentry is working correctly and sending d 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 index 175934c809ce2c..202d9325e92750 100644 --- 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 -## Step 2: Verify Your Setup +## Step 2: Avoid Ad Blockers With Tunneling (Optional) + + + +## 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 index 06a864f61c5bee..6bd88ef8380c96 100644 --- 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) + + + +## 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 index e422ea03a34a2f..5dba9631e1668f 100644 --- a/docs/platforms/javascript/guides/react/index.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -48,11 +48,11 @@ import * as Sentry from "@sentry/react"; Sentry.init({ dsn: "___PUBLIC_DSN___", - + // Adds request headers and IP for users, for more info visit: // https://docs.sentry.io/platforms/javascript/guides/react/configuration/options/#sendDefaultPii sendDefaultPii: true, - + integrations: [ // ___PRODUCT_OPTION_START___ performance // If you're using react router, use the integration for your react router version instead. @@ -179,10 +179,19 @@ To capture Redux state data, use `Sentry.createReduxEnhancer` when initializing - ## Step 7: Verify Your Setup + ## Step 7: Avoid Ad Blockers With Tunneling (Optional) + + + ## Step 6: Avoid Ad Blockers With Tunneling (Optional) + + + + + + ## Step 8: Verify Your Setup - ## Step 6: Verify Your Setup + ## Step 7: 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/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx index ce1c2d1fef0443..5d2822a93665b7 100644 --- a/docs/platforms/javascript/guides/svelte/index.mdx +++ b/docs/platforms/javascript/guides/svelte/index.mdx @@ -143,7 +143,11 @@ export default app; -## Step 4: Verify Your Setup +## Step 4: Avoid Ad Blockers With Tunneling (Optional) + + + +## 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 index 5da274010c3689..f664504bc380b9 100644 --- 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 -## Step 2: Verify Your Setup +## Step 2: Avoid Ad Blockers With Tunneling (Optional) + + + +## 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 index c3f4f8504b3205..4aef36604b4583 100644 --- 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). + ## Step 6: Verify Your Setup diff --git a/platform-includes/getting-started-tunneling/javascript.mdx b/platform-includes/getting-started-tunneling/javascript.mdx new file mode 100644 index 00000000000000..849ffa4ab56008 --- /dev/null +++ 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. + +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 need to do additional configuration on the server. You can find a detailed explanation on how to do this on our Troubleshooting page. diff --git a/platform-includes/getting-started-tunneling/javascript.sveltekit.mdx b/platform-includes/getting-started-tunneling/javascript.sveltekit.mdx new file mode 100644 index 00000000000000..3a457e45fd9547 --- /dev/null +++ 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. + +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). From c4a73dde88e0cb7a508668352b798684d6d3e9df Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Tue, 27 May 2025 14:33:06 +0200 Subject: [PATCH 2/3] add tunneling to remix wizard qs guide --- docs/platforms/javascript/guides/remix/index.mdx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/platforms/javascript/guides/remix/index.mdx b/docs/platforms/javascript/guides/remix/index.mdx index 38f560583d4468..702a62f375cc32 100644 --- 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 -## Step 2: Verify Your Setup +## Step 2: Avoid Ad Blockers With Tunneling (Optional) + + + +## 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. From 5b8a0b52912d91bfc45a1288d5345b4bc0a36747 Mon Sep 17 00:00:00 2001 From: Sarah Mischinger Date: Wed, 28 May 2025 09:08:24 +0200 Subject: [PATCH 3/3] PR feedback --- .../getting-started-tunneling/javascript.mdx | 4 ++-- .../getting-started-tunneling/javascript.remix.mdx | 12 ++++++++++++ .../javascript.sveltekit.mdx | 4 ++-- 3 files changed, 16 insertions(+), 4 deletions(-) create mode 100644 platform-includes/getting-started-tunneling/javascript.remix.mdx diff --git a/platform-includes/getting-started-tunneling/javascript.mdx b/platform-includes/getting-started-tunneling/javascript.mdx index 849ffa4ab56008..e0876777600375 100644 --- a/platform-includes/getting-started-tunneling/javascript.mdx +++ b/platform-includes/getting-started-tunneling/javascript.mdx @@ -1,6 +1,6 @@ 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` with the following option: +To enable tunneling, update `Sentry.init` with the following option: ```javascript {3} Sentry.init({ @@ -9,4 +9,4 @@ Sentry.init({ }); ``` -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. +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. diff --git a/platform-includes/getting-started-tunneling/javascript.remix.mdx b/platform-includes/getting-started-tunneling/javascript.remix.mdx new file mode 100644 index 00000000000000..8542d25e76feef --- /dev/null +++ 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 Troubleshooting page. diff --git a/platform-includes/getting-started-tunneling/javascript.sveltekit.mdx b/platform-includes/getting-started-tunneling/javascript.sveltekit.mdx index 3a457e45fd9547..fab9b03a6f8f04 100644 --- a/platform-includes/getting-started-tunneling/javascript.sveltekit.mdx +++ b/platform-includes/getting-started-tunneling/javascript.sveltekit.mdx @@ -1,6 +1,6 @@ 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: +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({ @@ -9,4 +9,4 @@ Sentry.init({ }); ``` -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). +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).