Skip to content

docs(js): Update JS quick start guides for Cloudflare and wizard+manual setup SDKs #20170

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.

Sign up for GitHub

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

Open
inventarSarah wants to merge 9 commits into
base: master
Choose a base branch
from
+587 −1,267
Open

docs(js): Update JS quick start guides for Cloudflare and wizard+manual setup SDKs #20170

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
976f545
update angular
inventarSarah Oct 22, 2026
6a568d3
update sveltekit
inventarSarah Oct 22, 2026
a925a98
update remix
inventarSarah Oct 22, 2026
ae2c22a
hydrogen cloudflare
inventarSarah Oct 22, 2026
bd14450
update Nuxt
inventarSarah Oct 22, 2026
e1f3342
update Astro on CF
inventarSarah Oct 22, 2026
c1fd464
update tanstack start react
inventarSarah Oct 22, 2026
abd43d4
update next.js
inventarSarah Oct 22, 2026
30286f7
solve merge conflict and fix code tab issue
inventarSarah Nov 3, 2026
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
29 changes: 14 additions & 15 deletions docs/platforms/javascript/guides/angular/index.mdx
View file
Open in desktop
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 events."
sdk: sentry.javascript.angular
categories:
- browser
Expand All @@ -25,7 +25,7 @@ at least Angular 17.
<StepComponent>
## Install

Run the Sentry wizard to automatically configure Sentry in your Angular application. It will then guide you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
Run the Sentry wizard to automatically configure Sentry in your Angular application. It will then guide you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring. **Logs** and **Application Metrics** need no extra configuration, and you'll learn how to send them in steps [#3](#send-logs) and [#4](#send-application-metrics-).

```bash
npx @sentry/wizard@latest -i angular
Expand All @@ -47,13 +47,19 @@ Prefer to set things up yourself? Check out the [Manual Setup](/platforms/javasc

</Expandable>

## Avoid Ad Blockers With Tunneling (Optional)
## Control the Data You Send to Sentry

<PlatformContent includePath="getting-started-tunneling" />
<PlatformContent includePath="getting-started-data-collection" />

## Control the Data You Send to Sentry (Optional)
## Send Logs

<PlatformContent includePath="getting-started-data-collection" />
<PlatformContent includePath="getting-started-logs" />

If you're already logging with `console` or Consola, you can capture those logs with <PlatformLink to="/logs/#console-integration">our console integrations</PlatformLink>.

## Send Application Metrics <FeatureBadge type="new" />

<PlatformContent includePath="getting-started-metrics" />

## Verify

Expand All @@ -70,8 +76,6 @@ Don't forget to explore the example component's code in your project to understa

</Alert>

<PlatformContent includePath="getting-started-wizard-verify-additional-features" />

### View Captured Data in Sentry

Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
Expand All @@ -82,16 +86,11 @@ Now, head over to your project on [Sentry.io](https://sentry.io) to view the col

## Next Steps

At this point, you should have integrated Sentry into Angular application and should already be sending error and tracing data to your Sentry project.

Now's a good time to customize your setup and look into more advanced topics.
Our next recommended steps for you are:
At this point, you should have integrated Sentry into your Angular application. Here's what to explore next:

- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup
- Extend Sentry to your backend using one of our [SDKs](/)
- Continue to <PlatformLink to="/configuration/">customize your configuration</PlatformLink>
- <PlatformLink to="/troubleshooting/#dealing-with-ad-blockers">Set up tunneling</PlatformLink> to avoid ad blockers from blocking Sentry events
- Make use of <PlatformLink to="/features/">Angular-specific features</PlatformLink>
- Learn how to <PlatformLink to="/usage/">manually capture errors</PlatformLink>

<Expandable permalink={false} title="Are you having problems setting up the SDK?">

Expand Down
152 changes: 38 additions & 114 deletions docs/platforms/javascript/guides/angular/manual-setup.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,23 +65,22 @@ Since version 8, `@sentry/angular-ivy` was <PlatformLink to="/migration/v7-to-v8

## Configure

Choose the features you want to configure, and this guide will show you how:

<OnboardingOptionButtons
options={[
"error-monitoring",
"performance",
"session-replay",
"user-feedback",
]}
/>
**Error Monitoring** starts working as soon as you call `Sentry.init()`. **Logs** and **Application Metrics** need no extra configuration, and you'll learn how to send them in steps [#3](#send-logs) and [#4](#send-application-metrics-).
This guide also enables **Tracing**, **Session Replay**, and **User Feedback**.

<Include name="quick-start-features-expandable" />

### Initialize the SDK

The main configuration should happen as early as possible in your app's lifecycle. Typically that means in your `main.ts` file.

The snippet also turns on:
- Tracing: via `browserTracingIntegration()` and <PlatformLink to="/configuration/options/#tracesSampleRate">`tracesSampleRate`</PlatformLink>
- Session Replay: via `replayIntegration()`, sampled with <PlatformLink to="/configuration/options/#replaysSessionSampleRate">`replaysSessionSampleRate`</PlatformLink> and <PlatformLink to="/configuration/options/#replaysOnErrorSampleRate">`replaysOnErrorSampleRate`</PlatformLink>
- User Feedback: via <PlatformLink to="/user-feedback/configuration/">`feedbackIntegration()`</PlatformLink>

Don't need a feature? Remove its integration and options from the snippet.

```typescript {tabTitle: App Config} {mdExpandTabs} {filename: main.ts} {5-41}
import { bootstrapApplication } from "@angular/platform-browser";
import { appConfig } from "./app/app.config";
Expand All @@ -93,45 +92,32 @@ Sentry.init({
dsn: "___PUBLIC_DSN___",

integrations: [
// ___PRODUCT_OPTION_START___ performance
// Registers and configures the Tracing integration,
// which automatically instruments your application to monitor its
// performance, including custom Angular routing instrumentation
Sentry.browserTracingIntegration(),
// ___PRODUCT_OPTION_END___ performance
// ___PRODUCT_OPTION_START___ session-replay
// Registers the Replay integration,
// which automatically captures Session Replays
// Registers the Replay integration
Sentry.replayIntegration(),
// ___PRODUCT_OPTION_END___ session-replay
// ___PRODUCT_OPTION_START___ user-feedback
// Enables User Feedback
Sentry.feedbackIntegration({
// Additional SDK configuration goes in here, for example:
colorScheme: "system",
}),
// ___PRODUCT_OPTION_END___ user-feedback
],
// ___PRODUCT_OPTION_START___ performance

// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
// Learn more at
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
// Enables Tracing.
// Set to 1.0 to capture 100% of spans for tracing.
// We recommend reducing this value in production.
tracesSampleRate: 1.0,

// Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// ___PRODUCT_OPTION_END___ performance
// ___PRODUCT_OPTION_START___ session-replay

// Capture Replay for 10% of all sessions,
// Capture replays for 10% of all sessions,
// plus for 100% of sessions with an error
// Learn more at
// https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
// Requires Sentry.replayIntegration()
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
// ___PRODUCT_OPTION_END___ session-replay
});

bootstrapApplication(AppComponent, appConfig).catch((err) =>
Expand All @@ -149,45 +135,32 @@ Sentry.init({
dsn: "___PUBLIC_DSN___",

integrations: [
// ___PRODUCT_OPTION_START___ performance
// Registers and configures the Tracing integration,
// which automatically instruments your application to monitor its
// performance, including custom Angular routing instrumentation
Sentry.browserTracingIntegration(),
// ___PRODUCT_OPTION_END___ performance
// ___PRODUCT_OPTION_START___ session-replay
// Registers the Replay integration,
// which automatically captures Session Replays
// Registers the Replay integration
Sentry.replayIntegration(),
// ___PRODUCT_OPTION_END___ session-replay
// ___PRODUCT_OPTION_START___ user-feedback
// Enables User Feedback
Sentry.feedbackIntegration({
// Additional SDK configuration goes in here, for example:
colorScheme: "system",
}),
// ___PRODUCT_OPTION_END___ user-feedback
],
// ___PRODUCT_OPTION_START___ performance

// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for tracing.
// We recommend adjusting this value in production
// Learn more at
// https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
// Enables Tracing.
// Set to 1.0 to capture 100% of spans for tracing.
// We recommend reducing this value in production.
tracesSampleRate: 1.0,

// Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// ___PRODUCT_OPTION_END___ performance
// ___PRODUCT_OPTION_START___ session-replay

// Capture Replay for 10% of all sessions,
// Capture replays for 10% of all sessions,
// plus for 100% of sessions with an error
// Learn more at
// https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
// Requires Sentry.replayIntegration()
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
// ___PRODUCT_OPTION_END___ session-replay
});

platformBrowserDynamic()
Expand Down Expand Up @@ -223,15 +196,13 @@ export const appConfig: ApplicationConfig = {
provide: ErrorHandler,
useValue: Sentry.createErrorHandler(),
},
// ___PRODUCT_OPTION_START___ performance
{
provide: Sentry.TraceService,
deps: [Router],
},
provideAppInitializer(() => {
inject(Sentry.TraceService);
}),
// ___PRODUCT_OPTION_END___ performance
],
};
```
Expand All @@ -253,7 +224,6 @@ export const appConfig: ApplicationConfig = {
provide: ErrorHandler,
useValue: Sentry.createErrorHandler(),
},
// ___PRODUCT_OPTION_START___ performance
{
provide: Sentry.TraceService,
deps: [Router],
Expand All @@ -264,7 +234,6 @@ export const appConfig: ApplicationConfig = {
deps: [Sentry.TraceService],
multi: true,
},
// ___PRODUCT_OPTION_END___ performance
],
};
```
Expand All @@ -282,7 +251,6 @@ import * as Sentry from "@sentry/angular";
provide: ErrorHandler,
useValue: Sentry.createErrorHandler(),
},
// ___PRODUCT_OPTION_START___ performance
{
provide: Sentry.TraceService,
deps: [Router],
Expand All @@ -293,15 +261,12 @@ import * as Sentry from "@sentry/angular";
deps: [Sentry.TraceService],
multi: true,
},
// ___PRODUCT_OPTION_END___ performance
],
// ...
})
export class AppModule {}
```

<OnboardingOption optionId="performance">

<Expandable title="Alternative TraceService setup" permalink="true">

If you're using an NGModule-based application (`app.module.ts`), you can also dependency-inject the `TraceService` from inside your `AppModule` constructor, instead of providing `APP_INITIALIZER`:
Expand All @@ -317,57 +282,34 @@ export class AppModule {

</Expandable>

</OnboardingOption>

### Add Readable Stack Traces With Source Maps (Optional)
### Add Readable Stack Traces With Source Maps

<PlatformContent includePath="getting-started-sourcemaps-short-version" />

### Avoid Ad Blockers With Tunneling (Optional)

<PlatformContent includePath="getting-started-tunneling" />

### Control the Data You Send to Sentry (Optional)
### Control the Data You Send to Sentry

<PlatformContent includePath="getting-started-data-collection" />

## Verify

Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
## Send Logs

### Issues
<PlatformContent includePath="getting-started-logs" />

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.
If you're already logging with `console` or Consola, you can capture those logs with <PlatformLink to="/logs/#console-integration">our console integrations</PlatformLink>.

<OnboardingOption optionId="performance" hideForThisOption>
Open the page in a browser and click the button to trigger a frontend error.
</OnboardingOption>
## Send Application Metrics <FeatureBadge type="new" />

<PlatformContent includePath="getting-started-browser-sandbox-warning" />
<PlatformContent includePath="getting-started-metrics" />

```javascript {filename: app.component.ts} {5, 9-11}
@Component({
selector: "app-root",
template: `
<!-- rest of your page -->
<button (click)="throwTestError()">Test Sentry Error</button>`
})
class AppComponent {
// ...
throwTestError(): void {
throw new Error("Sentry Test Error");
}
}
```
## Verify

<OnboardingOption optionId="performance">
### Tracing
Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.

To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes to execute your code.
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.

Open the page in a browser and click the button to trigger a frontend error and performance trace.
<PlatformContent includePath="getting-started-browser-sandbox-warning" />

```javascript {filename: app.component.ts} {10-11, 13-14}
```javascript {filename: app.component.ts} {5, 9-11}
@Component({
selector: "app-root",
template: `
Expand All @@ -377,25 +319,11 @@ Open the page in a browser and click the button to trigger a frontend error and
class AppComponent {
// ...
throwTestError(): void {
Sentry.startSpan({ op: "test", name: "Example Span" }, () => {
setTimeout(() => {
throw new Error("Sentry Test Error");
}, 99);
});
throw new Error("Sentry Test Error");
}
}
```

</OnboardingOption>

<OnboardingOption optionId="logs">

<Include name="logs/javascript-quick-start-verify-logs-splitlayout" />

</OnboardingOption>

<Include name="metrics/javascript-quick-start-verify-metrics-splitlayout" />

### View Captured Data in Sentry

Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear).
Expand All @@ -404,15 +332,11 @@ Now, head over to your project on [Sentry.io](https://sentry.io/) to view the co

## Next Steps

At this point, you should have integrated Sentry into your Angular application and should already be sending data to your Sentry project.

Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are:
At this point, you should have integrated Sentry into your Angular application. Here's what to explore next:

- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup
- Extend Sentry to your backend using one of our [SDKs](/)
- Continue to <PlatformLink to="/configuration/">customize your configuration</PlatformLink>
- <PlatformLink to="/troubleshooting/#dealing-with-ad-blockers">Set up tunneling</PlatformLink> to avoid ad blockers from blocking Sentry events
- Make use of <PlatformLink to="/features/">Angular-specific features</PlatformLink>
- Learn how to <PlatformLink to="/usage/">manually capture errors</PlatformLink>

<Expandable permalink={false} title="Are you having problems setting up the SDK?">

Expand Down
2 changes: 0 additions & 2 deletions docs/platforms/javascript/guides/astro/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ This SDK currently only works on Node runtimes, such as Node adapter or Vercel w

## Install

### Install the Sentry SDK

Install the Sentry integration using the `astro` CLI, then install the Profiling package using your preferred package manager:

```bash {tabTitle:npm}
Expand Down
Loading
Loading