Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
May 28, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions docs/platforms/javascript/guides/angular/index.mdx
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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:

Expand Down
15 changes: 9 additions & 6 deletions docs/platforms/javascript/guides/angular/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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" />

Expand All @@ -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:
Expand Down Expand Up @@ -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}
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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",
Expand Down
6 changes: 5 additions & 1 deletion docs/platforms/javascript/guides/nuxt/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
8 changes: 6 additions & 2 deletions docs/platforms/javascript/guides/nuxt/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.

Expand Down
13 changes: 11 additions & 2 deletions docs/platforms/javascript/guides/react/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
8 changes: 6 additions & 2 deletions docs/platforms/javascript/guides/remix/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 5 additions & 1 deletion docs/platforms/javascript/guides/svelte/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
6 changes: 5 additions & 1 deletion docs/platforms/javascript/guides/sveltekit/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
13 changes: 1 addition & 12 deletions docs/platforms/javascript/guides/sveltekit/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
12 changes: 12 additions & 0 deletions platform-includes/getting-started-tunneling/javascript.mdx
Original file line number Diff line number Diff line change
@@ -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>.
12 changes: 12 additions & 0 deletions platform-includes/getting-started-tunneling/javascript.remix.mdx
Original file line number Diff line number Diff line change
@@ -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>.
Original file line number Diff line number Diff line change
@@ -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).