diff --git a/docs/platforms/javascript/guides/angular/index.mdx b/docs/platforms/javascript/guides/angular/index.mdx
index a16215e9b8f881..798b514cb51208 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 events."
sdk: sentry.javascript.angular
categories:
- browser
@@ -25,7 +25,7 @@ at least Angular 17.
## 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
@@ -47,13 +47,19 @@ Prefer to set things up yourself? Check out the [Manual Setup](/platforms/javasc
-## Avoid Ad Blockers With Tunneling (Optional)
+## Control the Data You Send to Sentry
-
+
-## Control the Data You Send to Sentry (Optional)
+## Send Logs
-
+
+
+If you're already logging with `console` or Consola, you can capture those logs with our console integrations.
+
+## Send Application Metrics
+
+
## Verify
@@ -70,8 +76,6 @@ Don't forget to explore the example component's code in your project to understa
-
-
### 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).
@@ -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 customize your configuration
+- Set up tunneling to avoid ad blockers from blocking Sentry events
- Make use of Angular-specific features
-- Learn how to manually capture errors
diff --git a/docs/platforms/javascript/guides/angular/manual-setup.mdx b/docs/platforms/javascript/guides/angular/manual-setup.mdx
index e191d042612c73..a26fda845b5f23 100644
--- a/docs/platforms/javascript/guides/angular/manual-setup.mdx
+++ b/docs/platforms/javascript/guides/angular/manual-setup.mdx
@@ -65,16 +65,8 @@ Since version 8, `@sentry/angular-ivy` was
+**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**.
@@ -82,6 +74,13 @@ Choose the features you want to configure, and this guide will show you how:
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 `tracesSampleRate`
+- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate`
+- User Feedback: via `feedbackIntegration()`
+
+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";
@@ -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) =>
@@ -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()
@@ -223,7 +196,6 @@ export const appConfig: ApplicationConfig = {
provide: ErrorHandler,
useValue: Sentry.createErrorHandler(),
},
- // ___PRODUCT_OPTION_START___ performance
{
provide: Sentry.TraceService,
deps: [Router],
@@ -231,7 +203,6 @@ export const appConfig: ApplicationConfig = {
provideAppInitializer(() => {
inject(Sentry.TraceService);
}),
- // ___PRODUCT_OPTION_END___ performance
],
};
```
@@ -253,7 +224,6 @@ export const appConfig: ApplicationConfig = {
provide: ErrorHandler,
useValue: Sentry.createErrorHandler(),
},
- // ___PRODUCT_OPTION_START___ performance
{
provide: Sentry.TraceService,
deps: [Router],
@@ -264,7 +234,6 @@ export const appConfig: ApplicationConfig = {
deps: [Sentry.TraceService],
multi: true,
},
- // ___PRODUCT_OPTION_END___ performance
],
};
```
@@ -282,7 +251,6 @@ import * as Sentry from "@sentry/angular";
provide: ErrorHandler,
useValue: Sentry.createErrorHandler(),
},
- // ___PRODUCT_OPTION_START___ performance
{
provide: Sentry.TraceService,
deps: [Router],
@@ -293,15 +261,12 @@ import * as Sentry from "@sentry/angular";
deps: [Sentry.TraceService],
multi: true,
},
- // ___PRODUCT_OPTION_END___ performance
],
// ...
})
export class AppModule {}
```
-
-
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`:
@@ -317,57 +282,34 @@ export class AppModule {
-
-
-### Add Readable Stack Traces With Source Maps (Optional)
+### Add Readable Stack Traces With Source Maps
-### Avoid Ad Blockers With Tunneling (Optional)
-
-
-### Control the Data You Send to Sentry (Optional)
+### Control the Data You Send to Sentry
-## Verify
-
-Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
+## Send Logs
-### 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.
+If you're already logging with `console` or Consola, you can capture those logs with our console integrations.
-
- Open the page in a browser and click the button to trigger a frontend error.
-
+## Send Application Metrics
-
+
-```javascript {filename: app.component.ts} {5, 9-11}
-@Component({
- selector: "app-root",
- template: `
-
- `
-})
-class AppComponent {
- // ...
- throwTestError(): void {
- throw new Error("Sentry Test Error");
- }
-}
-```
+## Verify
-
-### 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.
+
-```javascript {filename: app.component.ts} {10-11, 13-14}
+```javascript {filename: app.component.ts} {5, 9-11}
@Component({
selector: "app-root",
template: `
@@ -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");
}
}
```
-
-
-
-
-
-
-
-
-
-
### 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).
@@ -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 customize your configuration
+- Set up tunneling to avoid ad blockers from blocking Sentry events
- Make use of Angular-specific features
-- Learn how to manually capture errors
diff --git a/docs/platforms/javascript/guides/astro/index.mdx b/docs/platforms/javascript/guides/astro/index.mdx
index 85729298541b1b..dfd485bf8566a2 100644
--- a/docs/platforms/javascript/guides/astro/index.mdx
+++ b/docs/platforms/javascript/guides/astro/index.mdx
@@ -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}
diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx
index bd7fec2cc79440..f42b91ea2646d4 100644
--- a/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx
+++ b/docs/platforms/javascript/guides/cloudflare/frameworks/astro.mdx
@@ -1,6 +1,6 @@
---
title: Astro on Cloudflare
-description: "Learn how to instrument your Astro app on Cloudflare Workers and capture your first errors."
+description: "Learn how to instrument your Astro app on Cloudflare Workers and capture your first events."
---
## Prerequisites
@@ -88,17 +88,6 @@ export const onRequest = [
## Install
-
-
-
-
@@ -20,21 +20,6 @@ You need:
## Install
-Choose the features you want to configure, and this guide will show you how:
-
-
-
-
-
-### Install the Sentry SDK
-
Run the command for your preferred package manager to add the React Router and Cloudflare SDK:
```bash {tabTitle:npm}
@@ -51,12 +36,22 @@ pnpm add @sentry/react-router @sentry/cloudflare
## Configure
+**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**.
+
+
### Configure Client-side Sentry
Initialize Sentry in your `entry.client.tsx` file.
The `sentryOnError` handler integrates with React Router's [`onError` hook](https://reactrouter.com/how-to/error-reporting) to automatically capture and report client-side errors to Sentry.
+The snippet also turns on:
+- Tracing: via [`tracesSampleRate`](/platforms/javascript/guides/react-router/configuration/options/#tracesSampleRate) and `reactRouterTracingIntegration()`
+- Session Replay: via `replayIntegration()`, sampled with [`replaysSessionSampleRate`](/platforms/javascript/guides/react-router/configuration/options/#replaysSessionSampleRate) and [`replaysOnErrorSampleRate`](/platforms/javascript/guides/react-router/configuration/options/#replaysOnErrorSampleRate)
+- User Feedback: via `feedbackIntegration()`
+
+Don't need a feature? Remove its integration and options from the snippet.
+
```tsx {filename: app/entry.client.tsx}
import { HydratedRouter } from "react-router/dom";
import * as Sentry from "@sentry/react-router/cloudflare";
@@ -67,42 +62,30 @@ 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 React Router routing instrumentation
Sentry.reactRouterTracingIntegration(),
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ session-replay
// Registers the Replay integration,
// which automatically captures Session Replays
Sentry.replayIntegration(),
- // ___PRODUCT_OPTION_END___ session-replay
- // ___PRODUCT_OPTION_START___ user-feedback
+ // Registers the User Feedback integration
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/guides/react-router/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,
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ session-replay
- // Capture Replay for 10% of all sessions,
- // plus 100% of sessions with an error
- // Learn more at
- // https://docs.sentry.io/platforms/javascript/guides/react-router/session-replay/configuration/#general-integration-configuration
+ // Capture replays for 10% of all sessions,
+ // plus for 100% of sessions with an error
+ // Requires Sentry.replayIntegration()
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ session-replay
});
startTransition(() => {
@@ -117,7 +100,10 @@ startTransition(() => {
### Configure Server-side Sentry
-First, create an `instrument.server.mjs` file to initialize Sentry on the server:
+First, create an `instrument.server.mjs` file to initialize Sentry on the server.
+
+The snippet also turns on:
+- Tracing: via `tracesSampleRate`
```js {filename:instrument.server.mjs}
import * as Sentry from "@sentry/react-router";
@@ -125,15 +111,10 @@ import * as Sentry from "@sentry/react-router";
Sentry.init({
dsn: "___PUBLIC_DSN___",
- // ___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/guides/react-router/configuration/options/#tracesSampleRate
+ // Enables Tracing.
+ // Set to 1.0 to capture 100% of spans for tracing.
+ // We recommend reducing this value in production.
tracesSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ performance
});
```
@@ -168,9 +149,10 @@ export default {
{
options: {
dsn: "___PUBLIC_DSN___",
- // ___PRODUCT_OPTION_START___ performance
+ // Enables Tracing.
+ // Set to 1.0 to capture 100% of spans for tracing.
+ // We recommend reducing this value in production.
tracesSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ performance
},
request: request as any,
context: executionContext,
@@ -242,7 +224,7 @@ export default Sentry.wrapSentryHandleRequest(handleRequest);
-### Add Readable Stack Traces With Source Maps (Optional)
+### Add Readable Stack Traces With Source Maps
The stack traces in your Sentry errors probably won't look like your actual code without unminifying them. To fix this, upload your source maps to Sentry.
@@ -285,7 +267,7 @@ sentry-cli sourcemaps inject /path/to/build/dir
sentry-cli sourcemaps upload /path/to/build/dir
```
-### Control the Data You Send to Sentry (Optional)
+### Control the Data You Send to Sentry
-## Verify Your Setup
-
-Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
+## Send Logs
-### Issues
+
-
+If you're already logging with `console` or Consola, you can capture those logs with our console integrations.
-To verify that Sentry captures errors and creates issues in your Sentry project, throw an error in a loader.
+## Send Application Metrics
-Next, open the `/sentry-test` route in your browser, and you should trigger an error.
+
-```tsx {filename: app/routes/sentry-test.tsx}
-import type { Route } from "./+types/sentry-test";
-
-export async function loader() {
- throw new Error("My first Sentry error!");
-}
-
-export default function SentryTestPage() {
- return
Loading this page will throw an error
;
-}
-```
-
-
-### Tracing
+## Verify Your Setup
-To test your tracing configuration, update the previous code snippet by starting a trace to measure the time it takes for the execution of your code.
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
-Open the `/sentry-test` route in your browser. You should start a trace and trigger an error.
+Add an intentional error in a loader. Then, open the route in your browser to trigger an error.
```tsx {filename: app/routes/sentry-test.tsx}
-import * as Sentry from "@sentry/react-router/cloudflare";
import type { Route } from "./+types/sentry-test";
export async function loader() {
- return Sentry.startSpan(
- {
- op: "test",
- name: "My First Test Trace",
- },
- () => {
- throw new Error("My first Sentry error!");
- }
- );
+ throw new Error("My first Sentry error!");
}
export default function SentryTestPage() {
return
Loading this page will throw an error
;
}
```
-
-
-
-
-
-
-
-
-
-
+
### View Captured Data in Sentry
@@ -363,14 +312,9 @@ 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 your React Router Framework 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 application. Here's what to explore next:
- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup
-- Learn how to manually capture errors
-- Continue to customize your configuration
- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx
index 3b3444b1cf8a7e..aa00e39e77b76a 100644
--- a/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx
+++ b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx
@@ -1,6 +1,6 @@
---
title: Nuxt on Cloudflare
-description: "Learn how to instrument your Nuxt app on Cloudflare Workers and Pages and capture your first errors with Sentry."
+description: "Learn how to instrument your Nuxt app on Cloudflare Workers and Pages and capture your first events with Sentry."
---
This guide will show you how to set up the SDK with Nitro's `cloudflare_module` (or their deprecated `cloudflare-pages`) deployment preset.
diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx
index dc987930018ab7..3bb7c8a7811bbe 100644
--- a/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx
+++ b/docs/platforms/javascript/guides/cloudflare/frameworks/remix.mdx
@@ -1,6 +1,6 @@
---
title: Remix on Cloudflare
-description: "Learn how to instrument your Remix app on Cloudflare Workers and Pages and capture your first errors with Sentry."
+description: "Learn how to instrument your Remix app on Cloudflare Workers and Pages and capture your first events with Sentry."
---
-
-
-
-### Install the Sentry SDK
-
Run the command for your preferred package manager to add the Sentry Remix and Cloudflare SDKs to your application.
With npm, add `--legacy-peer-deps`: `@remix-run/cloudflare` requires `@cloudflare/workers-types` version 4, while Wrangler 4 requires version 5.
diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx
index 11fb6d6d40330e..3e08cf6bd24d16 100644
--- a/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx
+++ b/docs/platforms/javascript/guides/cloudflare/frameworks/tanstack-start.mdx
@@ -1,6 +1,6 @@
---
title: TanStack Start on Cloudflare
-description: "Learn how to instrument your TanStack Start app on Cloudflare Workers and capture your first errors with Sentry."
+description: "Learn how to instrument your TanStack Start app on Cloudflare Workers and capture your first events with Sentry."
---
@@ -15,34 +15,23 @@ This guide is for TanStack Start deployed to **Cloudflare Workers** using the `@
## Install
-Choose the features you want to configure, and this guide will show you how:
-
-
-
-
-
-### Install the Sentry SDK
-
Run the command for your preferred package manager to add the Sentry SDK to your application:
## Configure
+**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**.
+
+
+
When deploying TanStack Start to Cloudflare Workers, you need to wrap the server entry point with `Sentry.withSentry` from `@sentry/cloudflare`. TanStack Start allows you to create a custom server entry file for this purpose.
### Wrangler Configuration
### Create a Custom Server Entry
@@ -57,6 +46,9 @@ Due to type differences between TanStack Start and Cloudflare Workers, you'll ne
+The snippet also turns on:
+- Tracing: via `tracesSampleRate`
+
```typescript {filename:src/server.ts}
import * as Sentry from "@sentry/cloudflare";
import { wrapFetchWithSentry } from "@sentry/tanstackstart-react";
@@ -65,12 +57,10 @@ import handler from "@tanstack/react-start/server-entry";
export default Sentry.withSentry(
() => ({
dsn: "___PUBLIC_DSN___",
-
- // ___PRODUCT_OPTION_START___ performance
-
- // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing.
+ // Enables Tracing.
+ // Set to 1.0 to capture 100% of spans for tracing.
+ // We recommend reducing this value in production.
tracesSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ performance
}),
// @ts-expect-error - handler is not typed as a Cloudflare handler
wrapFetchWithSentry(handler)
@@ -91,7 +81,14 @@ Update your `wrangler.jsonc` (or `wrangler.toml`) to use your custom server entr
### Configure Client-Side Sentry
-Initialize Sentry in your `src/router.tsx` file for client-side error tracking:
+Initialize Sentry in your `src/router.tsx` file for client-side error tracking.
+
+The snippet also turns on:
+- Tracing: via `tracesSampleRate` and [`tanstackRouterBrowserTracingIntegration()`](/platforms/javascript/guides/tanstackstart-react/features/tanstack-router/#usage)
+- Session Replay: via `replayIntegration()`, sampled with [`replaysSessionSampleRate`](/platforms/javascript/guides/tanstackstart-react/configuration/options/#replaysSessionSampleRate) and [`replaysOnErrorSampleRate`](/platforms/javascript/guides/tanstackstart-react/configuration/options/#replaysOnErrorSampleRate)
+- User Feedback: via [`feedbackIntegration()`](/platforms/javascript/guides/tanstackstart-react/user-feedback/#usage)
+
+Don't need a feature? Remove its integration and options from the snippet.
```tsx {diff} {filename:src/router.tsx}
+import * as Sentry from "@sentry/tanstackstart-react";
@@ -105,31 +102,27 @@ export const getRouter = () => {
+ dsn: "___PUBLIC_DSN___",
+
+ integrations: [
-+ // ___PRODUCT_OPTION_START___ performance
++ // Registers the TanStack Start router integration for tracing
+ Sentry.tanstackRouterBrowserTracingIntegration(router),
-+ // ___PRODUCT_OPTION_END___ performance
-+ // ___PRODUCT_OPTION_START___ session-replay
++ // 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 spans for tracing.
++ // Enables Tracing.
++ // Set to 1.0 to capture 100% of spans for tracing.
++ // We recommend reducing this value in production.
+ tracesSampleRate: 1.0,
-+ // ___PRODUCT_OPTION_END___ performance
-+ // ___PRODUCT_OPTION_START___ session-replay
+
-+ // Capture Replay for 10% of all sessions,
-+ // plus for 100% of sessions with an error.
++ // Capture replays for 10% of all sessions,
++ // plus for 100% of sessions with an error
++ // Requires Sentry.replayIntegration()
+ replaysSessionSampleRate: 0.1,
+ replaysOnErrorSampleRate: 1.0,
-+ // ___PRODUCT_OPTION_END___ session-replay
+ });
+ }
@@ -163,14 +156,14 @@ export const startInstance = createStart(() => {
});
```
-### Add Readable Stack Traces With Source Maps (Optional)
+### Add Readable Stack Traces With Source Maps
-### Control the Data You Send to Sentry (Optional)
+### Control the Data You Send to Sentry
{
noGuides
/>
+## Send Logs
+
+
+
+If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`.
+We also provide integrations for:
+- Consola
+## Send Application Metrics
+
+
+
## Verify Your Setup
-To verify Sentry is capturing errors, add a test button to one of your pages:
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
+
+Add a test button to one of your pages, which will trigger an error that Sentry will capture when you click it:
```tsx
@@ -122,14 +95,3 @@ Learn more about Application Metrics
- [Get support](https://www.sentry.help/en/)
-
-## Next Steps
-
-You've successfully integrated Sentry into your TanStack Start React application! Here's what to explore next:
-
-- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup
-- Learn how to [manually capture errors](/platforms/javascript/guides/tanstackstart-react/usage/)
-- Continue to [customize your configuration](/platforms/javascript/guides/tanstackstart-react/configuration/)
-- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
-
-
diff --git a/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx b/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx
index a9c893db8c2492..bddbb536c8e2f3 100644
--- a/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx
+++ b/docs/platforms/javascript/guides/tanstackstart-react/manual-setup/index.mdx
@@ -1,7 +1,7 @@
---
title: "Manual Setup"
sidebar_order: 1
-description: Learn how to manually set up and configure Sentry in your TanStack Start React application, capturing your first errors, and viewing them in Sentry.
+description: Learn how to manually set up and configure Sentry in your TanStack Start React application and capturing your first events in Sentry.
sdk: sentry.javascript.tanstackstart-react
categories:
- server
@@ -26,21 +26,6 @@ For [TanStack Router (React)](https://tanstack.com/router/latest/docs/framework/
## Install
-Choose the features you want to configure, and this guide will show you how:
-
-
-
-
-
-### Install the Sentry SDK
-
Run the command for your preferred package manager to add the SDK package to your application:
```bash {tabTitle:npm}
@@ -57,10 +42,21 @@ pnpm add @sentry/tanstackstart-react
## Configure
+**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**.
+
+
+
### Configure Client-Side Sentry
Create an `instrument.client.ts` file in your `src/` directory and initialize Sentry in it.
+The snippet also turns on:
+- Tracing: via `tracesSampleRate`
+- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate`
+- User Feedback: via `feedbackIntegration()`
+
+Don't need a feature? Remove its integration and options from the snippet.
+
```tsx {filename:src/instrument.client.ts}
import * as Sentry from "@sentry/tanstackstart-react";
@@ -68,32 +64,25 @@ Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [
- // ___PRODUCT_OPTION_START___ session-replay
+ // Registers the Sentry Browser Tracing 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,
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ session-replay
- // Capture Replay 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
+ // Capture replays for 10% of all sessions,
+ // plus for 100% of sessions with an error
+ // Requires Sentry.replayIntegration()
replaysSessionSampleRate: 0.1,
replaysOnErrorSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ session-replay
});
```
@@ -117,8 +106,6 @@ startTransition(() => {
});
```
-
-
Then add the TanStack Router browser tracing integration in your `src/router.tsx` file:
```tsx {diff} {filename:src/router.tsx}
@@ -139,11 +126,12 @@ export const getRouter = () => {
}
```
-
-
### Configure Server-Side Sentry
-Create an instrument file `instrument.server.mjs` in the root of your project. In this file, initialize the Sentry SDK for your server:
+Create an instrument file `instrument.server.mjs` in the root of your project. In this file, initialize the Sentry SDK for your server.
+
+This snippet also turns on:
+- Tracing: via `tracesSampleRate`
```tsx {filename:instrument.server.mjs}
import * as Sentry from "@sentry/tanstackstart-react";
@@ -151,14 +139,10 @@ import * as Sentry from "@sentry/tanstackstart-react";
Sentry.init({
dsn: "___PUBLIC_DSN___",
- // ___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,
- // ___PRODUCT_OPTION_END___ performance
});
```
@@ -358,13 +342,13 @@ const route = createRoute({
})
```
-### Add Readable Stack Traces With Source Maps (Optional)
+### Add Readable Stack Traces With Source Maps
If you configured the `sentryTanstackStart` Vite plugin [in an earlier step](#add-the-sentrytanstackstart-vite-plugin), source maps are automatically uploaded during production builds.
If you need more control over the upload process, see our [source maps guide](/platforms/javascript/guides/tanstackstart-react/sourcemaps/) for manual configuration options.
-### Avoid Ad Blockers With Tunneling (Optional)
+### Avoid Ad Blockers With Tunneling
Ad blockers and corporate firewalls often block requests to `*.sentry.io`, which can cause events to be dropped before they reach Sentry. To work around this, you can tunnel events through a same-origin route in your TanStack Start app.
@@ -389,104 +373,51 @@ export default defineConfig({
});
```
-### Control the Data You Send to Sentry (Optional)
+### Control the Data You Send to Sentry
-## Verify
+## Send Logs
-Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
+
-### Issues
+
+If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`.
+We also provide integrations for:
+- Consola
+- Pino
+
-To verify that Sentry captures errors and creates issues in your Sentry project, add a test button to one of your pages, 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 our console integrations.
+
-
- Then, open the page in a browser and click the button to trigger a frontend
- error.
-
+## Send Application Metrics
-
+
-```tsx
-
-```
+
+On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically.
+
-
-### Tracing
-
-To test tracing, create a new file like `src/routes/api/sentry-example.ts` to create a test route `/api/sentry-example`:
-
-```typescript {filename:src/routes/api/sentry-example.ts}
-import { createFileRoute } from "@tanstack/react-router";
-import { json } from "@tanstack/react-start";
-
-export const Route = createFileRoute("/api/sentry-example")({
- server: {
- handlers: {
- GET: () => {
- throw new Error("Sentry Example Route Error");
- return new Response(
- JSON.stringify({ message: "Testing Sentry Error..." }),
- {
- headers: {
- "Content-Type": "application/json",
- },
- }
- );
- },
- },
- },
-});
-```
-Next, update your test button to call this route and throw an error if the response isn't `ok`.
-
-Open the page in a browser and click the button to trigger two errors:
+## Verify
-- a frontend error
-- an error within the API route
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
-Additionally, this starts a performance trace to measure the time it takes for the API request to complete.
+Add a test button to one of your pages, which will trigger an error that Sentry will capture when you click it:
```tsx
```
-
-
-
-
-
-
-
-
-
-
+
### View Captured Data in Sentry
@@ -496,15 +427,10 @@ 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 your TanStack Start React 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 TanStack Start React application. Here's what to explore next:
- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup
-- Learn how to [manually capture errors](/platforms/javascript/guides/tanstackstart-react/usage/)
-- Continue to [customize your configuration](/platforms/javascript/guides/tanstackstart-react/configuration/)
-- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
+- Set up Agent Tracing to monitor your AI systems
diff --git a/platform-includes/getting-started-complete/javascript.astro.mdx b/platform-includes/getting-started-complete/javascript.astro.mdx
index 064dff9974b459..7e46e158699ee3 100644
--- a/platform-includes/getting-started-complete/javascript.astro.mdx
+++ b/platform-includes/getting-started-complete/javascript.astro.mdx
@@ -1,7 +1,5 @@
-### Install the Sentry SDK
-
Install and add the Sentry integration using the `astro` CLI:
```bash {tabTitle:npm}
@@ -16,8 +14,6 @@ yarn astro add @sentry/astro
pnpm astro add @sentry/astro
```
-
-
Next, install the Profiling package using your preferred package manager:
```bash {tabTitle:npm}
@@ -32,14 +28,10 @@ yarn add @sentry/profiling-node
pnpm add @sentry/profiling-node
```
-
-
-### Install the Sentry SDKs
-
Install both `@sentry/astro` and `@sentry/cloudflare`:
```bash {tabTitle:npm}
@@ -60,6 +52,11 @@ pnpm add @sentry/astro @sentry/cloudflare
+**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**.
+
+
+
### Wrangler Configuration
`tracesSampleRate`
+
+Don't need a feature? Remove its integration and options from the snippet.
```typescript {filename:sentry.server.config.ts}
import * as Sentry from "@sentry/cloudflare";
@@ -87,11 +89,10 @@ import handler from "@astrojs/cloudflare/entrypoints/server";
export default Sentry.withSentry(
(env) => ({
dsn: env.SENTRY_DSN,
- // ___PRODUCT_OPTION_START___ performance
- // Define how likely traces are sampled. Adjust this value in production,
- // or use tracesSampler for greater control.
+ // Enables Tracing.
+ // Set to 1.0 to capture 100% of spans for tracing.
+ // We recommend reducing this value in production.
tracesSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ performance
}),
handler
);
@@ -133,7 +134,14 @@ export default defineConfig({
### Configure Client-side Sentry
-Create a `sentry.client.config.(ts|js)` file in the root of your project. In this file, import and initialize Sentry for the client:
+Create a `sentry.client.config.(ts|js)` file in the root of your project. In this file, import and initialize Sentry for the client.
+
+The snippet also turns on:
+- Tracing: via [`tracesSampleRate`](/platforms/javascript/guides/astro/configuration/options/#tracesSampleRate) and `browserTracingIntegration()`
+- Session Replay: via `replayIntegration()`, sampled with [`replaysSessionSampleRate`](/platforms/javascript/guides/astro/configuration/options/#replaysSessionSampleRate) and [`replaysOnErrorSampleRate`](/platforms/javascript/guides/astro/configuration/options/#replaysOnErrorSampleRate)
+- User Feedback: via [`feedbackIntegration()`](/platforms/javascript/guides/astro/user-feedback/configuration/)
+
+Don't need a feature? Remove its integration and options from the snippet.
```javascript {filename:sentry.client.config.(ts|js)}
import * as Sentry from "@sentry/astro";
@@ -142,35 +150,28 @@ Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [
- // ___PRODUCT_OPTION_START___ performance
+ // Registers the Sentry Browser Tracing integration,
+ // which automatically instruments your app for performance monitoring
Sentry.browserTracingIntegration(),
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ session-replay
+ // Registers the Sentry Session 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
- // Define how likely traces are sampled. Adjust this value in production,
- // or use tracesSampler for greater control.
+ // Enables Tracing.
+ // Set to 1.0 to capture 100% of spans for tracing.
+ // We recommend reducing this value in production.
tracesSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ session-replay
- // This sets the sample rate to be 10%. You may want this to be 100% while
- // in development and sample at a lower rate in production
+ // Capture replays for 10% of all sessions,
+ // plus for 100% of sessions with an error
+ // Requires Sentry.replayIntegration()
replaysSessionSampleRate: 0.1,
-
- // If the entire session is not sampled, use the below sample rate to sample
- // sessions when an error occurs.
replaysOnErrorSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ session-replay
});
```
@@ -297,99 +298,38 @@ SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
-
-
-### Avoid Ad Blockers With Tunneling (Optional)
-
-
-
-
-
-### Control the Data You Send to Sentry (Optional)
+### Control the Data You Send to Sentry
-## Verify Your Setup
-
-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,
-create a test page, for example, at `src/pages/test.astro` with two buttons.
-
-```html {filename: test.astro}
-
-
-
-
-```
+If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`.
+We also provide integrations for:
+- Consola
-Then also create the route we're calling in our test page, like `src/pages/api/test-error.(js|ts)`:
+## Send Application Metrics
-Next, open your test page in a browser and click the buttons to trigger a frontend error and an error in the API route.
+
-```javascript {filename: test-error.(js|ts)}
-export async function GET() {
- throw new Error("Sentry Example API Route Error");
-}
-```
+## Verify Your Setup
-
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
-### Tracing
+Add this button to a page in your Astro app and click it to send a test error:
-To test tracing, create a custom span to measure the time it takes for the API request to complete:
+```astro
+
-```html {filename: test.astro}
-
-
```
-
-
-
-
-
-
-
-
-
-
### 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).
@@ -408,10 +348,7 @@ 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 your Astro 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 Astro application. Here's what to explore next:
@@ -426,9 +363,7 @@ Our next recommended steps for you are:
- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup
-- Continue to customize your configuration
-- Learn how to manually capture errors
-- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
+- Set up Agent Tracing to monitor your AI systems
diff --git a/platform-includes/getting-started-complete/javascript.nuxt.mdx b/platform-includes/getting-started-complete/javascript.nuxt.mdx
index 8847328ac123f5..97916ce1b0b613 100644
--- a/platform-includes/getting-started-complete/javascript.nuxt.mdx
+++ b/platform-includes/getting-started-complete/javascript.nuxt.mdx
@@ -7,31 +7,6 @@
## Install
-Choose the features you want to configure, and this guide will show you how:
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-### Install the Sentry SDK
-
Run the command for your preferred package manager to add the Sentry SDK to your application:
```bash {tabTitle:npm}
@@ -48,6 +23,10 @@ pnpm add @sentry/nuxt
## Configure
+**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**.
+
+
+
### Apply Instrumentation to Your App
Add the Sentry Nuxt module to your `nuxt.config.ts` file:
@@ -60,7 +39,15 @@ export default defineNuxtConfig({
### Configure Client-Side Sentry
-Add a `sentry.client.config.ts` file to the root of your project (this is probably the same level as the `package.json`). In this file, import and initialize Sentry, specifying any SDK options for the client:
+Add a `sentry.client.config.ts` file to the root of your project (this is probably the same level as the `package.json`). In this file, import and initialize Sentry, specifying any SDK options for the client.
+
+The snippet also turns on:
+- Tracing: via `tracesSampleRate`
+- Session Replay: via `replayIntegration()`, sampled with [`replaysSessionSampleRate`](/platforms/javascript/guides/nuxt/configuration/options/#replaysSessionSampleRate) and [`replaysOnErrorSampleRate`](/platforms/javascript/guides/nuxt/configuration/options/#replaysOnErrorSampleRate)
+- User Feedback: via `feedbackIntegration()`
+
+Don't need a feature? Remove its integration and options from the snippet.
+
```javascript {filename:sentry.client.config.ts}
import * as Sentry from "@sentry/nuxt";
@@ -71,37 +58,25 @@ Sentry.init({
// modify depending on your custom runtime config
dsn: "___PUBLIC_DSN___",
- // ___PRODUCT_OPTION_START___ session-replay
-
- // Replay may only be enabled for the client-side
integrations: [
+ // Enables Session Replay
Sentry.replayIntegration(),
- // ___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_END___ session-replay
- // ___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,
- // ___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
- replaysSessionSampleRate: 0.1,
+ // Requires Sentry.replayIntegration()
replaysOnErrorSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ session-replay
});
```
@@ -129,20 +104,19 @@ Add a `sentry.server.config.ts` file to the root of your project and initialize
We recommend you store your Sentry [Data Source Name](/concepts/key-terms/dsn-explainer/) (DSN) in an environment variable.
+The snippet also turns on:
+- Tracing: via `tracesSampleRate`
+
```javascript {filename:sentry.server.config.ts}
import * as Sentry from "@sentry/nuxt";
Sentry.init({
dsn: "___PUBLIC_DSN___",
- // ___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,
- // ___PRODUCT_OPTION_END___ performance
});
```
@@ -222,7 +196,7 @@ export default defineNitroPlugin(sentryCloudflareNitroPlugin((nitroApp: NitroApp
-### Add Readable Stack Traces With Source Maps (Optional)
+### Add Readable Stack Traces With Source Maps
To upload source maps for clear error stack traces, add your Sentry auth token, organization, and project slugs in the `sentry` options inside your configuration file:
@@ -260,55 +234,38 @@ export default defineNuxtConfig({
});
```
-
-### Avoid Ad Blockers With Tunneling (Optional)
-
-
-
-
-### Control the Data You Send to Sentry (Optional)
+### Control the Data You Send to Sentry
-## Verify Your Setup
-
-Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
+## Send Logs
-### Issues
+
-To verify that Sentry captures errors and creates issues in your Sentry project, create a test page with a button.
-
-
+
+If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`.
+We also provide integrations for:
+- Consola
+- Pino
+
-```html {tabTitle:Vue} {filename:pages/example-error.vue}
-
+## Send Application Metrics
-
-
-
-```
+
-
-### Tracing
+
+On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically.
+
-To test tracing, create a test API route `server/api/sentry-example.get.ts`:
+## Verify Your Setup
-```js {tabTitle:Nitro} {filename:server/api/sentry-example.get.ts}
-export default defineEventHandler((event) => {
- throw new Error("Sentry Example API Route Error");
-});
-```
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
-Then update the test page by including a new button that executes a function to fetch your API route:
+Add a test button to one of your pages that throws an error when clicked:
```html {tabTitle:Vue} {filename:pages/example-error.vue}
-
```
-
-
-
-
-
-
-
-
-
-
-
- Once you have your test code in place, open the page in a browser and click
- the button to trigger an error.
-
-
-
+
@@ -368,35 +297,20 @@ Once you have your test code in place, run your project in production mode (`nux
After running your project, open your test page in a browser and click the buttons.
-
-
### 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).
-
-
-
-
-
-
-
-
-
-
## Next Steps
-At this point, you should have integrated Sentry into your Nuxt 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 application. Here's what to explore next:
- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup
-- Learn how to [manually capture errors](/platforms/javascript/guides/nuxt/usage/)
-- Continue to [customize your configuration](/platforms/javascript/guides/nuxt/configuration/)
-- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
+- Set up tunneling to avoid ad blockers blocking Sentry events
+- Set up Agent Tracing to monitor your AI systems
- Learn how to [track your Vue components or your Pinia store](/platforms/javascript/guides/nuxt/features/)
- Learn how to [add support for different Nitro deployment presets](/platforms/javascript/guides/nuxt/features/nitro-deployment-presets/) (like Cloudflare)
@@ -413,9 +327,6 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup
-- Learn how to [manually capture errors](/platforms/javascript/guides/nuxt/usage/)
-- Continue to [customize your configuration](/platforms/javascript/guides/nuxt/configuration/)
-- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts
- Learn how to [track your Vue components or your Pinia store](/platforms/javascript/guides/nuxt/features/)
diff --git a/platform-includes/getting-started-complete/javascript.remix.mdx b/platform-includes/getting-started-complete/javascript.remix.mdx
index d3507e2ad8fa62..b8d45c5d43033e 100644
--- a/platform-includes/getting-started-complete/javascript.remix.mdx
+++ b/platform-includes/getting-started-complete/javascript.remix.mdx
@@ -1,8 +1,26 @@
## Configure
+**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**, **Profiling**, **Session Replay**, and **User Feedback**.
+
+
+
+
+This guide also enables **Tracing**, **Session Replay**, and **User Feedback**.
+
+
+
### Configure Client-Side Sentry
-Create a client file `entry.client.tsx` in the `app` folder of your project if you don't have one already. In this file, import and initialize the Sentry SDK:
+Create a client file `entry.client.tsx` in the `app` folder of your project if you don't have one already. In this file, import and initialize the Sentry SDK.
+
+The snippet also turns on:
+- Tracing: via `tracesSampleRate` and `browserTracingIntegration()`
+- Session Replay: via `replayIntegration()`, sampled with [`replaysSessionSampleRate`](/platforms/javascript/guides/remix/configuration/options/#replaysSessionSampleRate) and [`replaysOnErrorSampleRate`](/platforms/javascript/guides/remix/configuration/options/#replaysOnErrorSampleRate)
+- User Feedback: via `feedbackIntegration()`
+
+Don't need a feature? Remove its integration and options from the snippet.
```typescript {tabTitle:Client} {filename: entry.client.tsx}
import { useLocation, useMatches } from "@remix-run/react";
@@ -13,45 +31,34 @@ Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [
- // ___PRODUCT_OPTION_START___ performance
+ // Registers the Browser Tracing integration
Sentry.browserTracingIntegration({
useEffect,
useLocation,
useMatches,
}),
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ session-replay
- // Replay is only available in the client
+ // 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 distributed tracing 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
});
```
@@ -113,38 +120,31 @@ export default withSentry(App);
-Create an instrumentation file `instrument.server.mjs` in your project's root folder and initialize the Sentry SDK within it:
+Create an instrumentation file `instrument.server.mjs` in your project's root folder and initialize the Sentry SDK within it.
+
+The snippet also turns on:
+- Tracing: via `tracesSampleRate`
+- Profiling: via `profileSessionSampleRate` and `nodeProfilingIntegration()`
+
+Don't need a feature? Remove its integration and options from the snippet.
```typescript {tabTitle:Server} {filename: instrument.server.mjs}
import * as Sentry from "@sentry/remix";
-// ___PRODUCT_OPTION_START___ profiling
import { nodeProfilingIntegration } from "@sentry/profiling-node";
-// ___PRODUCT_OPTION_END___ profiling
Sentry.init({
dsn: "___PUBLIC_DSN___",
- // ___PRODUCT_OPTION_START___ profiling
-
// Add our Profiling integration
integrations: [nodeProfilingIntegration()],
- // ___PRODUCT_OPTION_END___ profiling
- // ___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,
- // ___PRODUCT_OPTION_END___ performance
- // ___PRODUCT_OPTION_START___ profiling
- // Enable profiling for a percentage of sessions
- // Learn more at
- // https://docs.sentry.io/platforms/javascript/configuration/options/#profileSessionSampleRate
+ // Enables Profiling for every session.
profileSessionSampleRate: 1.0,
- // ___PRODUCT_OPTION_END___ profiling
// Optionally limit which action formData fields are captured.
// Without this option, all fields are captured.
@@ -192,6 +192,9 @@ Don't also wrap `createRequestHandler` with `makeWrappedCreateRequestHandler`. C
+The snippet also turns on:
+- Tracing: via `tracesSampleRate`
+
```typescript {filename:server.ts}
import { createRequestHandler } from "@remix-run/cloudflare";
import * as Sentry from "@sentry/cloudflare";
@@ -204,15 +207,11 @@ const handleRequest = createRequestHandler(instrumentBuild(remixBuild));
export default Sentry.withSentry(
(env) => ({
dsn: "___PUBLIC_DSN___",
- // ___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,
- // ___PRODUCT_OPTION_END___ performance
}),
{
async fetch(request, env, ctx) {
@@ -234,15 +233,10 @@ export const onRequest = [
Sentry.sentryPagesPlugin((context) => ({
dsn: "___PUBLIC_DSN___",
- // ___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,
- // ___PRODUCT_OPTION_END___ performance
// Optionally limit which action formData fields are captured.
// Without this option, all fields are captured.
@@ -391,7 +385,7 @@ npx remix vite:build
-### Add Readable Stack Traces With Source Maps (Optional)
+### Add Readable Stack Traces With Source Maps
To upload source maps for clear error stack traces, pass your Sentry organization, project, and auth token to `sentryRemixVitePlugin` from the previous step. It injects debug IDs, uploads the source maps during your production build, and deletes them from your build output afterwards.
@@ -437,32 +431,38 @@ SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___
-
-### Avoid Ad Blockers With Tunneling (Optional)
+### Control the Data You Send to Sentry
-
+
-
+## Send Logs
-### Control the Data You Send to Sentry (Optional)
+
-
+
+If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`.
+We also provide integrations for:
+- Consola
+- Pino
+
-## Verify Your Setup
+
+If you're already logging with `console` or Consola, you can capture those logs with our console integrations.
+
-Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
+## Send Application Metrics
-### Issues
+
-
-
-To verify that Sentry captures errors and creates issues in your Sentry project, add a test button to one of your pages.
+
+On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically.
+
-
+## Verify Your Setup
-Open the page in a browser and click the button to trigger a frontend error.
+Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project.
-
+Add a test button to one of your pages that throws an error when clicked:
```javascript