diff --git a/docs/platforms/javascript/guides/astro/index.mdx b/docs/platforms/javascript/guides/astro/index.mdx index 79f9f86d22fd2..85729298541b1 100644 --- a/docs/platforms/javascript/guides/astro/index.mdx +++ b/docs/platforms/javascript/guides/astro/index.mdx @@ -1,6 +1,6 @@ --- title: Astro -description: Learn how to manually set up Sentry in your Astro app and capture your first errors. +description: Learn how to manually set up Sentry in your Astro app and capture your first events. sdk: sentry.javascript.astro categories: - browser @@ -18,11 +18,7 @@ You need: -This SDK currently only works on Node runtimes, such as Node adapter or Vercel -with Lambda functions. If you use Cloudflare Workers or Cloudflare Pages, refer to our [Astro on -Cloudflare guide](/platforms/javascript/guides/cloudflare/frameworks/astro/). -Other non-Node runtimes, like Vercel's Edge runtime, are currently **not -supported**. +This SDK currently only works on Node runtimes, such as Node adapter or Vercel with Lambda functions. If you use Cloudflare Workers or Cloudflare Pages, refer to our [Astro on Cloudflare guide](/platforms/javascript/guides/cloudflare/frameworks/astro/). Other non-Node runtimes, like Vercel's Edge runtime, are currently **not supported**. @@ -30,20 +26,191 @@ supported**. ## Install -Choose the features you want to configure, and this guide will show you how: +### 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} +npx astro add @sentry/astro +npm install @sentry/profiling-node +``` + +```bash {tabTitle:yarn} +yarn astro add @sentry/astro +yarn add @sentry/profiling-node +``` + +```bash {tabTitle:pnpm} +pnpm astro add @sentry/astro +pnpm add @sentry/profiling-node +``` + +## 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**. - +### Initialize the SDK + +To configure Sentry on your app's client-side and server-side, create a `sentry.client.config.(ts|js)` and `sentry.server.config.(ts|js)` file in the root of your project. +Use the tabs in the code box below to view the client and server configuration snippets. + +The snippets also turn on: + +- Tracing: via `tracesSampleRate` +- Profiling: via `nodeProfilingIntegration()` and `profileSessionSampleRate` +- 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 snippets. + +```typescript {tabTitle:Client config}{filename:sentry.client.config.ts} +import * as Sentry from "@sentry/astro"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + // enables automatic instrumentation + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + // enables User Feedback + Sentry.feedbackIntegration({ colorScheme: "system" }), + ], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); +``` + +```typescript {tabTitle:Server config}{filename:sentry.server.config.ts} +import * as Sentry from "@sentry/astro"; +import { nodeProfilingIntegration } from "@sentry/profiling-node"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + // enables Node Profiling + integrations: [nodeProfilingIntegration()], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Enables Profiling. + // Set to 1.0 to profile every session. + // We recommend reducing this value in production. + profileSessionSampleRate: 1.0, +}); +``` + +### Register the Sentry Integration + +Add the Sentry integration to your `astro.config.mjs`: + +```javascript {filename:astro.config.mjs} +import { defineConfig } from "astro/config"; +import sentry from "@sentry/astro"; + +export default defineConfig({ + integrations: [sentry()], +}); +``` + +### 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 `astro.config.mjs`: + +```javascript {filename:astro.config.mjs} +import { defineConfig } from "astro/config"; +import sentry from "@sentry/astro"; + +export default defineConfig({ + integrations: [ + sentry({ + org: "___ORG_SLUG___", + project: "___PROJECT_SLUG___", + // store your auth token in an environment variable + authToken: process.env.SENTRY_AUTH_TOKEN, + }), + ], +}); +``` + +To keep your auth token secure, set the `SENTRY_AUTH_TOKEN` environment variable in your build environment: + + + +```bash {filename:.env.sentry-build-plugin} +SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___ +``` + + + +### Control the Data You Send to Sentry + + + +## Send Logs + + + +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. +We also provide integrations for: +- Consola +- Pino + +## Send Application Metrics + + + +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. + +## Verify Your Setup + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + +Add this button to a page in your Astro app and click it to send a test error: + +```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). + + + +## Next Steps + +At this point, you should have integrated Sentry into your Astro application. Here's what to explore next: + +- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup +- Set up Agent Tracing to monitor your AI systems +- Set up tunneling to avoid ad blockers blocking Sentry events + + + +- Find various topics in Troubleshooting +- [Get support](https://www.sentry.help/en/) + + diff --git a/docs/platforms/javascript/guides/azure-functions/index.mdx b/docs/platforms/javascript/guides/azure-functions/index.mdx index 731574513496e..a03dbef012ccd 100644 --- a/docs/platforms/javascript/guides/azure-functions/index.mdx +++ b/docs/platforms/javascript/guides/azure-functions/index.mdx @@ -1,6 +1,6 @@ --- title: Azure Functions -description: Learn how to manually set up Sentry in your Azure Functions and capture your first errors. +description: Learn how to manually set up Sentry in your Azure Functions and capture your first events. sdk: sentry.javascript.node fallbackGuide: javascript.node categories: @@ -15,14 +15,6 @@ categories: ## 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 `@sentry/node` as a runtime dependency to your application: @@ -31,37 +23,36 @@ Run the command for your preferred package manager to add `@sentry/node` as a ru ## 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** and **Profiling**. + + + +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. + Make sure to initialize Sentry at the top of your function file before importing any other modules: ```javascript {tabTitle:async} const Sentry = require("@sentry/node"); -// ___PRODUCT_OPTION_START___ profiling const { nodeProfilingIntegration } = require("@sentry/profiling-node"); - -// ___PRODUCT_OPTION_END___ profiling Sentry.init({ dsn: "___PUBLIC_DSN___", - // ___PRODUCT_OPTION_START___ profiling - integrations: [nodeProfilingIntegration()], - // ___PRODUCT_OPTION_END___ profiling - // ___PRODUCT_OPTION_START___ performance - - // Add Performance Monitoring by setting tracesSampleRate - // Set tracesSampleRate to 1.0 to capture 100% of transactions - // 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. + // Set to 1.0 to profile every session. + // We recommend reducing this value in production. profileSessionSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ profiling }); // your function code @@ -92,80 +83,48 @@ module.exports = async function (context, req) { }; ``` -### 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 -## Step 4: Verify Your Setup +## Send Logs -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + -### Issues +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino -Let's verify that Sentry captures errors and creates issues in your Sentry project. Add an intentional error in your function: +## Send Application Metrics -```javascript {tabTitle:async} -const Sentry = require("@sentry/node"); - -module.exports = async function (context, req) { - try { - // This function does not exist, triggering an error - await notExistFunction(); - } catch (e) { - Sentry.withScope((scope) => { - scope.setSDKProcessingMetadata({ request: req }); - Sentry.captureException(e); - }); - } + - // Wait for the event to be sent before the function execution ends - await Sentry.flush(2000); +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. - context.res = { - status: 500, - body: "Test error sent to Sentry.", - }; -}; -``` +## Verify Your Setup - -### Tracing +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -To test tracing, update your function to include a custom span: +Add an intentional error in your function and flush the event before the function execution ends: ```javascript {tabTitle:async} const Sentry = require("@sentry/node"); module.exports = async function (context, req) { - await Sentry.startSpan({ name: "My Custom Span", op: "task" }, async () => { - // Simulate some work - await new Promise((resolve) => setTimeout(resolve, 100)); - }); - - // Wait for the event to be sent before the function execution ends - await Sentry.flush(2000); - - context.res = { - status: 200, - body: "Hello world!", - }; + try { + throw new Error("Sentry Test Error"); + } catch (error) { + Sentry.captureException(error); + await Sentry.flush(2000); + } }; ``` - - - - - - - - - - ### 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). @@ -174,14 +133,10 @@ 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 Azure Function 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 Azure Functions application. Here's what to explore next: - 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](/) like tracing, insights, and alerts +- Set up Agent Tracing to monitor your AI systems - Find various topics in Troubleshooting diff --git a/docs/platforms/javascript/guides/bun/index.mdx b/docs/platforms/javascript/guides/bun/index.mdx index ba7b0ba8e49a6..953542c895b9e 100644 --- a/docs/platforms/javascript/guides/bun/index.mdx +++ b/docs/platforms/javascript/guides/bun/index.mdx @@ -1,6 +1,6 @@ --- title: Bun -description: Learn how to manually set up Sentry in your Bun app and capture your first errors. +description: Learn how to manually set up Sentry in your Bun app and capture your first events. sdk: sentry.javascript.bun categories: - server @@ -13,14 +13,6 @@ categories: ## Install -Choose the features you want to configure, and this guide will show you how: - - - - - ### Install the SDK Use the Bun package manager to add the Sentry SDK to your application: @@ -31,10 +23,21 @@ bun add @sentry/bun ## 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**. + + + ### Initialize the Sentry SDK Sentry should be initialized as early in your app as possible. -Create a file named `instrument.js` in the root directory of your project and add the following code: +Create a file named `instrument.js` in the root directory of your project and add the code snippet shown below. + +The snippet also turns on: + +- Tracing: via `tracesSampleRate` + +Don't need a feature? Remove its integration and options from the snippet. ```javascript {filename: instrument.js} import * as Sentry from "@sentry/bun"; @@ -42,16 +45,10 @@ import * as Sentry from "@sentry/bun"; // Ensure to call this before importing any other modules! Sentry.init({ dsn: "___PUBLIC_DSN___", - - // ___PRODUCT_OPTION_START___ performance - - // Add Performance Monitoring by setting tracesSampleRate - // Set tracesSampleRate to 1.0 to capture 100% of transactions - // 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 }); ``` @@ -84,64 +81,40 @@ bun --preload ./instrument.js app.js bun --preload ./instrument.js dist/app.js ``` -### 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 -## 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 + -First, let's verify that Sentry captures errors and creates issues in your Sentry project. Add the following code snippet to your main application file, which will call an undefined function, triggering an error that Sentry will capture: +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino -```javascript -setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } -}, 99); -``` +## Send Application Metrics - -### Tracing - -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: - -```javascript -Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - () => { - setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } - }, 99); - } -); -``` + - +For Bun, `bunRuntimeMetricsIntegration` also collects runtime health metrics automatically. - +## Verify Your Setup - +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - +Add an intentional error to your main application file: - +```javascript +setTimeout(() => { + throw new Error("Sentry Test Error"); +}, 0); +``` ### View Captured Data in Sentry @@ -151,16 +124,10 @@ Finally, head over to your project on [Sentry.io](https://sentry.io/) to view th ## Next Steps -At this point, you should have integrated Sentry into your Bun application, which 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 Bun 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 frontend using one of our [frontend SDKs](/) -- Learn how to manually capture errors -- Continue to customize your 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/docs/platforms/javascript/guides/capacitor/index.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx index 7b8dab639d01e..247d52ff163d8 100644 --- a/docs/platforms/javascript/guides/capacitor/index.mdx +++ b/docs/platforms/javascript/guides/capacitor/index.mdx @@ -1,6 +1,6 @@ --- title: Capacitor -description: Learn how to set up Sentry in your Capacitor application, capture your first errors and traces, and view them in Sentry. +description: Learn how to set up Sentry in your Capacitor application, capture your first events and traces, and view them in Sentry. sdk: sentry.javascript.capacitor categories: - browser @@ -48,16 +48,8 @@ Both frameworks are fully compatible with the current and beta versions of Sentr ## Configure -Choose the features you want to configure, and this guide will show you how: - - +**Error Monitoring** starts working as soon as you call `Sentry.init()`. **Logs** need no extra configuration, and you'll learn how to send them in step [#3](#send-logs). +This guide also enables **Tracing**, **Session Replay**, and **User Feedback**. @@ -65,201 +57,359 @@ Choose the features you want to configure, and this guide will show you how: Initialize Sentry as early as possible in your application's lifecycle. -If you're using Angular, React, Vue, or Nuxt, make sure to forward the `init` method from the framework's Sentry SDK, as you can see in these code snippets. If you're following the vanilla setup, you don't need to do this. - - - -### Add Readable Stack Traces With Source Maps (Optional) - - - -### Provide Native Debug Information for iOS (Optional) - -You need to provide debug information to Sentry to make the stack-trace information for native crashes on iOS easier to understand. You can provide debug information by [uploading dSYM files](/platforms/javascript/guides/capacitor/dsym/). - -### Control the Data You Send to Sentry (Optional) - - - -## Verify - -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. +The snippets also turn on: -### Issues +- Tracing: via `tracesSampleRate` +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` -To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button and logic. +Don't need a feature? Remove its integration and options from the snippet. - - Open the page in a browser and click the button to trigger a frontend error. - - - +If you're using Angular, React, Vue, or Nuxt, make sure to forward the `init` method from the framework's Sentry SDK, as you can see in these code snippets. If you're following the vanilla setup, you don't need to do this. -```javascript {tabTitle: Angular 12, 13, 14+} {mdExpandTabs} -@Component({ - selector: "app-root", - template: ` - - ` +```typescript {tabTitle: Angular 14+} {mdExpandTabs} {filename: app.module.ts} +import * as Sentry from "@sentry/capacitor"; +import * as SentryAngular from "@sentry/angular"; + +Sentry.init( + { + dsn: "___PUBLIC_DSN___", + + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Enables automatic instrumentation + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + // enables User Feedback + Sentry.feedbackIntegration({ + // Additional integration configuration goes in here + colorScheme: "system", + }), + ], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Limit which URLs receive trace propagation + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }, + // Forward the init method from @sentry/angular + SentryAngular.init +); + +@NgModule({ + providers: [ + { + provide: ErrorHandler, + // Attach the Sentry ErrorHandler + useValue: SentryAngular.createErrorHandler(), + }, + { + provide: SentryAngular.TraceService, + deps: [Router], + }, + { + provide: APP_INITIALIZER, + useFactory: () => () => {}, + deps: [SentryAngular.TraceService], + multi: true, + }, + ], }) -class AppComponent { - // ... - throwError(): void { - throw new Error("Sentry Test Error"); - } -} ``` -```javascript {tabTitle: React} - +```typescript {tabTitle: Angular 12, 13} {filename: app.module.ts} +// Requires @sentry/capacitor V0. +import * as Sentry from "@sentry/capacitor"; +import * as SentryAngular from "@sentry/angular-ivy"; + +Sentry.init( + { + dsn: "___PUBLIC_DSN___", + + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Enables automatic instrumentation + new Sentry.BrowserTracing(), + // enables Session Replay + new Sentry.Replay(), + // enables User Feedback + Sentry.feedbackIntegration({ + // Additional integration configuration goes in here + colorScheme: "system", + }), + ], + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Limit which URLs receive trace propagation + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }, + // Forward the init method from @sentry/angular + SentryAngular.init +); + +@NgModule({ + providers: [ + { + provide: ErrorHandler, + // Attach the Sentry ErrorHandler + useValue: SentryAngular.createErrorHandler(), + }, + { + provide: SentryAngular.TraceService, + deps: [Router], + }, + { + provide: APP_INITIALIZER, + useFactory: () => () => {}, + deps: [SentryAngular.TraceService], + multi: true, + }, + ], +}) ``` -```javascript {tabTitle: Vue} - - -export default { - // ... - methods: { - throwError() { - throw new Error('Sentry Error'); - } - } -}; +```typescript {tabTitle: React} {filename: index.tsx} +import * as Sentry from "@sentry/capacitor"; +import * as SentryReact from "@sentry/react"; + +Sentry.init( + { + dsn: "___PUBLIC_DSN___", + + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Enables automatic instrumentation + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + // enables User Feedback + Sentry.feedbackIntegration({ + // Additional integration configuration goes in here + colorScheme: "system", + }), + ], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Limit which URLs receive trace propagation + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }, + // Forward the init method from @sentry/react + SentryReact.init +); ``` -```html {tabTitle: Nuxt} - - - +```typescript {tabTitle: Vue} {filename: main.ts} +import * as Sentry from "@sentry/capacitor"; +import * as SentryVue from "@sentry/vue"; +import { createApp } from "vue"; + +const app = createApp(App); + +Sentry.init( + { + dsn: "___PUBLIC_DSN___", + + // Vue specific settings. + siblingOptions: { + vueOptions: { + app: app, + attachErrorHandler: false, + attachProps: true, + }, + }, + + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Enables automatic instrumentation + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + // enables User Feedback + Sentry.feedbackIntegration({ + // Additional integration configuration goes in here + colorScheme: "system", + }), + ], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Limit which URLs receive trace propagation + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }, + + // Forward the init method from @sentry/vue + SentryVue.init +); ``` -```html {tabTitle: Other} - - - +```typescript {tabTitle: Nuxt} {filename: sentry.client.config.ts} +import * as Sentry from "@sentry/capacitor"; +import * as SentryNuxt from "@sentry/nuxt"; + +Sentry.init( + { + dsn: "___PUBLIC_DSN___", + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Enables automatic instrumentation + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + // enables User Feedback + Sentry.feedbackIntegration({ + // Additional integration configuration goes in here + colorScheme: "system", + }), + ], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Limit which URLs receive trace propagation + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, + }, + + // Forward the init method from @sentry/nuxt + SentryNuxt.init +); ``` - +```javascript {tabTitle: Other} {filename: main.(ts|js)} +import * as Sentry from "@sentry/capacitor"; +import { feedbackIntegration } from "@sentry/browser"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // Set your release version, such as "getsentry@1.0.0" + release: "my-project-name@", + // Set your dist version, such as "1" + dist: "", + integrations: [ + // Enables automatic instrumentation + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + // enables User Feedback + feedbackIntegration({ + // Additional integration configuration goes in here + colorScheme: "system", + }), + ], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Limit which URLs receive trace propagation + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); +``` -### Tracing +### Add Readable Stack Traces With Source Maps -To test your tracing configuration, update the previous code snippet and wrap the error in a custom span. -Then, open the page in a browser and click the button to trigger a frontend error and trace. + -```javascript {tabTitle: Angular 12, 13, 14+} {mdExpandTabs} -import * as Sentry from "@sentry/capacitor"; +### Provide Native Debug Information for iOS -@Component({ - selector: "app-root", - template: ` - - ` -}) -class AppComponent { - // ... - throwError(): void { - Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => { - throw new Error("Sentry Test Error"); - }); - } -} -``` +You need to provide debug information to Sentry to make the stack-trace information for native crashes on iOS easier to understand. You can provide debug information by [uploading dSYM files](/platforms/javascript/guides/capacitor/dsym/). -```javascript {tabTitle: React} -import * as Sentry from "@sentry/capacitor"; +### Control the Data You Send to Sentry -; -``` + -```javascript {tabTitle: Vue} -import * as Sentry from "@sentry/capacitor"; +## Send Logs - - -export default { - // ... - methods: { - throwError() { - Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, async () => { - throw new Error("Sentry Error"); - }); - } - } -}; -``` + -```html {tabTitle: Nuxt} - +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. - -``` +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -```html {tabTitle: Other} - +Add a test button to an existing page. Clicking it throws an error that Sentry captures: - ``` - - - - - - - - ### 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). @@ -268,15 +418,10 @@ 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 Capacitor 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 Capacitor 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 use Sentry with Ionic -- Continue to customize your configuration -- Learn how to manually capture errors -- Make use of framework-specific features, such as [Angular](/platforms/javascript/guides/angular/features/), [Vue](/platforms/javascript/guides/vue/features/), [React](/platforms/javascript/guides/react/features/), or [Nuxt](/platforms/javascript/guides/nuxt/features/) - Find various topics in Troubleshooting diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx index b82a9bc7d03ae..76049c2c54552 100644 --- a/docs/platforms/javascript/guides/cloudflare/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -1,6 +1,6 @@ --- title: Cloudflare -description: "Learn how to manually set up Sentry for Cloudflare Workers and capture your first errors." +description: "Learn how to manually set up Sentry for Cloudflare Workers and capture your first events." sdk: sentry.javascript.cloudflare categories: - server @@ -34,14 +34,6 @@ If you're using any of the listed frameworks, follow their specific setup instru ## 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: @@ -50,6 +42,11 @@ Run the command for your preferred package manager to add the Sentry SDK to your ## Configure +**Error Monitoring** starts working as soon as you configure Sentry. **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**. + + + This guide sets Sentry up through Vite, which is what we recommend for Cloudflare Workers. The plugin does the wiring at build time, so your Worker code stays untouched. @@ -94,18 +91,22 @@ Create an `instrument.server.ts` file next to your Worker entry, the file that ` The name is fixed. The plugin looks for `instrument.server` with a `.ts`, `.mts`, `.js`, `.mjs` or `.cjs` extension, and passes its default export to `withSentry`. Use `defineCloudflareOptions` to get the options type-checked. +The snippet also turns on: + +- Tracing: via `tracesSampleRate` + +Don't need a feature? Remove its integration and options from the snippet. + ```typescript {filename:src/instrument.server.ts} import { defineCloudflareOptions } from "@sentry/cloudflare"; export default defineCloudflareOptions((env) => ({ dsn: "___PUBLIC_DSN___", - // ___PRODUCT_OPTION_START___ performance - // Set tracesSampleRate to 1.0 to capture 100% of spans for tracing. - // Learn more at - // https://docs.sentry.io/platforms/javascript/guides/cloudflare/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 })); ``` @@ -115,104 +116,65 @@ If you don't add an `instrument.server.*` file, the SDK reads its configuration -### 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 -## Verify Your Setup +### Known Limitations -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. +#### Span Durations -### Issues +Server-side spans will display `0ms` for their durations. In the Cloudflare Workers runtime, `performance.now()` and `Date.now()` only advance after I/O occurs. CPU-bound operations will show zero duration. This is a security measure Cloudflare implements to [mitigate against timing attacks](https://developers.cloudflare.com/workers/runtime-apis/performance/). -First, let's make sure Sentry is correctly capturing errors and creating issues in your project. +This is expected behavior in the Cloudflare Workers environment and affects all frameworks deployed to Cloudflare Workers, including Next.js, Astro, Remix, and others. -Add the following code snippet to your main worker file to create a `/debug-sentry` route that triggers an error when called: -```javascript {filename:index.js} -export default { - async fetch(request) { - const url = new URL(request.url); +## Send Logs - if (url.pathname === "/debug-sentry") { - throw new Error("My first Sentry error!"); - } + - // Your existing routes and logic here... - return new Response("..."); - }, -}; -``` +If you're already logging with `console` or Consola, you can capture those logs with our console integrations. + +## Send Application Metrics + + - -### Tracing -To test your tracing configuration, update the previous code snippet by starting a trace to measure the time it takes to run your code. +## Verify Your Setup + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -```javascript {filename:index.js} -import * as Sentry from "@sentry/cloudflare"; +Add a route to your Worker that throws an error: +```javascript export default { async fetch(request) { const url = new URL(request.url); if (url.pathname === "/debug-sentry") { - await Sentry.startSpan( - { - op: "test", - name: "My First Test Span", - }, - async () => { - await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for 100ms - throw new Error("My first Sentry error!"); - } - ); + throw new Error("Sentry Test Error"); } - // Your existing routes and logic here... return new Response("..."); }, }; ``` - - - - - - - - - - ### 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). -## Known Limitations - -### Span Durations - -Server-side spans will display `0ms` for their durations. In the Cloudflare Workers runtime, `performance.now()` and `Date.now()` only advance after I/O occurs. CPU-bound operations will show zero duration. This is a security measure Cloudflare implements to [mitigate against timing attacks](https://developers.cloudflare.com/workers/runtime-apis/performance/). - -This is expected behavior in the Cloudflare Workers environment and affects all frameworks deployed to Cloudflare Workers, including Next.js, Astro, Remix, and others. - ## Next Steps -At this point, you should have integrated Sentry 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 Cloudflare Worker. 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/cloudflare/usage/) -- Continue to [customize your configuration](/platforms/javascript/guides/cloudflare/configuration/) -- Make use of [Cloudflare-specific features](/platforms/javascript/guides/cloudflare/features/) -- 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/docs/platforms/javascript/guides/deno/index.mdx b/docs/platforms/javascript/guides/deno/index.mdx index 098dfe3040692..538ab2b21410b 100644 --- a/docs/platforms/javascript/guides/deno/index.mdx +++ b/docs/platforms/javascript/guides/deno/index.mdx @@ -1,6 +1,6 @@ --- title: Deno -description: Learn how to manually set up Sentry in your Deno app and capture your first errors. +description: Learn how to manually set up Sentry in your Deno app and capture your first events. sdk: sentry.javascript.deno categories: - server @@ -19,14 +19,6 @@ This SDK is currently in **beta**. Beta features are still in progress and may h ## Install -Choose the features you want to configure, and this guide will show you how: - - - - - ### Import the Sentry SDK Import the Sentry Deno SDK directly from the npm registry, before importing any other modules. The first line registers the hook that instruments your database drivers, message queues, AI libraries and web frameworks. It only works as the first import of your entry file: @@ -50,9 +42,20 @@ The hook reads your dependencies from a local `node_modules` directory, not from ## 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**. + + + ### Initialize the Sentry SDK -Initialize Sentry as early as possible in your app: +Initialize Sentry as early as possible in your app. + +The snippet also turns on: + +- Tracing: via `tracesSampleRate` + +Don't need a feature? Remove its integration and options from the snippet. ```javascript {filename: main.ts} import "___SDK_PACKAGE___/import"; @@ -61,16 +64,10 @@ import * as Sentry from "___SDK_PACKAGE___"; Sentry.init({ dsn: "___PUBLIC_DSN___", - - // ___PRODUCT_OPTION_START___ performance - - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // 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 }); ``` @@ -100,64 +97,37 @@ If you omit `--allow-read` or `--allow-sys`, the SDK sends events without that d -### 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 -## Verify Your Setup +## Send Logs -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + -### Issues +If you're already logging with `console` or Consola, you can capture those logs with our console integrations. -First, let's verify that Sentry captures errors and creates issues in your Sentry project. Add the following code snippet to your main application file, which will call an undefined function, triggering an error that Sentry will capture: +## Send Application Metrics -```javascript -setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } -}, 99); -``` - - -### Tracing - -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: - -```javascript -Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - () => { - setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } - }, 99); - } -); -``` + - +For Deno, `denoRuntimeMetricsIntegration` also collects runtime health metrics automatically. - +## Verify Your Setup - +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - +Add an intentional error to your application: - +```javascript +setTimeout(() => { + throw new Error("Sentry Test Error"); +}, 0); +``` ### View Captured Data in Sentry @@ -167,15 +137,10 @@ Finally, head over to your project on [Sentry.io](https://sentry.io/) to view th ## Next Steps -At this point, you should have integrated Sentry into your Deno 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 Deno 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 frontend using one of our [frontend SDKs](/) -- Learn how to manually capture errors -- Continue to customize your 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/docs/platforms/javascript/guides/effect/index.mdx b/docs/platforms/javascript/guides/effect/index.mdx index 9c91a891e8b69..382fb41e82640 100644 --- a/docs/platforms/javascript/guides/effect/index.mdx +++ b/docs/platforms/javascript/guides/effect/index.mdx @@ -1,7 +1,7 @@ --- title: Effect sdk: sentry.javascript.effect -description: Learn how to set up and configure Sentry in your Effect application, capture your first errors, and view them in Sentry. +description: Learn how to set up and configure Sentry in your Effect application, capture your first events and view them in Sentry. categories: - browser - server @@ -24,14 +24,6 @@ This guide will show you how to integrate Sentry into your [Effect](https://effe ## 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. @@ -50,6 +42,11 @@ pnpm add @sentry/effect ## Configure +**Error Monitoring** starts working as soon as you provide `Sentry.effectLayer()`. **Logs** and **Application Metrics** need no extra SDK configuration. To forward Effect-native logs and metrics, use the Sentry Effect logger and metrics layers shown in this guide. You'll learn how to send them in steps [#3](#send-logs) and [#4](#send-application-metrics-). +This guide also enables **Tracing**. + + + The SDK provides an `effectLayer` that initializes Sentry. You can compose it with additional Effect layers to enable tracing, logging, and metrics. The `effectLayer`, `SentryEffectTracer`, `SentryEffectLogger`, and `SentryEffectMetricsLayer` exports are the same for Effect v3 and v4. The only difference between versions is how you compose layers for tracing and logging, which is covered in the snippets below. ### Effect v3 @@ -61,43 +58,38 @@ The SDK provides an `effectLayer` that initializes Sentry. You can compose it wi In both cases, use `Layer.setTracer` to configure tracing and `Logger.replace` to configure logging. +The snippets also turn on: + +- Tracing: via `tracesSampleRate` and the Effect tracer layer +- Logs: via `SentryEffectLogger` +- Application Metrics: via `SentryEffectMetricsLayer` + +Don't need a feature? Remove its layer and options from the snippet. + ```typescript {tabTitle: Server} {filename: main.ts} import * as Sentry from "@sentry/effect"; import { NodeRuntime } from "@effect/platform-node"; -// ___PRODUCT_OPTION_START___ logs import * as Logger from "effect/Logger"; -// ___PRODUCT_OPTION_END___ logs import * as Layer from "effect/Layer"; import { HttpLive } from "./Http.js"; const SentryLive = Layer.mergeAll( Sentry.effectLayer({ 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 }), - // ___PRODUCT_OPTION_START___ performance // Enable Effect tracing Layer.setTracer(Sentry.SentryEffectTracer), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ logs // Forward Effect logs to Sentry Logger.replace(Logger.defaultLogger, Sentry.SentryEffectLogger), - // ___PRODUCT_OPTION_END___ logs - // ___PRODUCT_OPTION_START___ metrics // Forward Effect metrics to Sentry Sentry.SentryEffectMetricsLayer - // ___PRODUCT_OPTION_END___ metrics ); const MainLive = HttpLive.pipe(Layer.provide(SentryLive)); @@ -107,35 +99,24 @@ MainLive.pipe(Layer.launch, NodeRuntime.runMain); ```typescript {tabTitle: Client} {filename: main.ts} import * as Sentry from "@sentry/effect"; -// ___PRODUCT_OPTION_START___ logs import { Logger } from "effect"; -// ___PRODUCT_OPTION_END___ logs import { Layer } from "effect"; const SentryLive = Layer.mergeAll( Sentry.effectLayer({ 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, integrations: [Sentry.browserTracingIntegration()], - // ___PRODUCT_OPTION_END___ performance }), - // ___PRODUCT_OPTION_START___ performance // Enable Effect tracing for the browser Layer.setTracer(Sentry.SentryEffectTracer), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ logs // Forward Effect logs to Sentry Logger.replace(Logger.defaultLogger, Sentry.SentryEffectLogger) - // ___PRODUCT_OPTION_END___ logs ); const MainLive = YourAppLayer.pipe(Layer.provide(SentryLive)); @@ -152,41 +133,28 @@ With SDK version 10.75.0 or higher, `effectLayer` also registers a Sentry `Error ```typescript {tabTitle: Server} {filename: main.ts} import * as Sentry from "@sentry/effect"; import { NodeRuntime } from "@effect/platform-node"; -// ___PRODUCT_OPTION_START___ logs import * as Logger from "effect/Logger"; -// ___PRODUCT_OPTION_END___ logs import * as Layer from "effect/Layer"; -// ___PRODUCT_OPTION_START___ performance import * as Tracer from "effect/Tracer"; -// ___PRODUCT_OPTION_END___ performance import { HttpLive } from "./Http.js"; const SentryLive = Layer.mergeAll( Sentry.effectLayer({ 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. + // 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___ performance // Enable Effect tracing Layer.succeed(Tracer.Tracer, Sentry.SentryEffectTracer), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ logs // Forward Effect logs to Sentry Logger.layer([Sentry.SentryEffectLogger]), - // ___PRODUCT_OPTION_END___ logs - // ___PRODUCT_OPTION_START___ metrics // Forward Effect metrics to Sentry Sentry.SentryEffectMetricsLayer - // ___PRODUCT_OPTION_END___ metrics ); const MainLive = HttpLive.pipe(Layer.provide(SentryLive)); @@ -196,129 +164,73 @@ MainLive.pipe(Layer.launch, NodeRuntime.runMain); ```typescript {tabTitle: Client} {filename: main.ts} import * as Sentry from "@sentry/effect"; -// ___PRODUCT_OPTION_START___ logs import * as Logger from "effect/Logger"; -// ___PRODUCT_OPTION_END___ logs import * as Layer from "effect/Layer"; -// ___PRODUCT_OPTION_START___ performance import * as Tracer from "effect/Tracer"; -// ___PRODUCT_OPTION_END___ performance const SentryLive = Layer.mergeAll( Sentry.effectLayer({ 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. + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. tracesSampleRate: 1.0, integrations: [Sentry.browserTracingIntegration()], - // ___PRODUCT_OPTION_END___ performance }), - // ___PRODUCT_OPTION_START___ performance // Enable Effect tracing Layer.succeed(Tracer.Tracer, Sentry.SentryEffectTracer), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ logs // Forward Effect logs to Sentry Logger.layer([Sentry.SentryEffectLogger]) - // ___PRODUCT_OPTION_END___ logs ); const MainLive = YourAppLayer.pipe(Layer.provide(SentryLive)); ``` -### 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 -## Verify - -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. +## Send Logs -### Issues +The Effect logger layer forwards `Effect.log` messages to Sentry. The v3 and v4 layer setup is included in the configuration snippets above. -To verify that Sentry captures errors and creates issues in your Sentry project, add a test error: +See Set Up Logs for logging methods and message formatting. ```typescript import { Effect } from "effect"; -import * as Sentry from "@sentry/effect"; const program = Effect.gen(function* () { - yield* Effect.fail(new Error("Sentry Test Error")); -}); - -// Run with your layer that includes Sentry.effectLayer -``` - - -### Tracing - -To test your tracing configuration, update the previous code snippet to create a custom span: - -```typescript -import { Effect } from "effect"; -import * as Sentry from "@sentry/effect"; - -const program = Effect.gen(function* () { - yield* Effect.gen(function* () { - // Simulate some work - yield* Effect.sleep("100 millis"); - yield* Effect.fail(new Error("Sentry Test Error")); - }).pipe( - Effect.withSpan("My First Test Transaction", { - attributes: { op: "test" }, - }) + yield* Effect.log("User example action completed"); + yield* Effect.logWarning("Slow operation detected").pipe( + Effect.annotateLogs({ operation: "data_fetch", duration: "3500ms" }) ); }); ``` - +## Send Application Metrics + + - +## Verify Your Setup -### Logs +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -To verify that Sentry catches your logs, add some log statements to your application: +Run an Effect that fails using the layer that includes `Sentry.effectLayer()`: ```typescript import { Effect } from "effect"; -import * as Sentry from "@sentry/effect"; - -const program = Effect.gen(function* () { - yield* Effect.log("User example action completed"); - yield* Effect.logWarning("Slow operation detected").pipe( - Effect.annotateLogs({ - operation: "data_fetch", - duration: "3500ms", - }) - ); +const program = Effect.fail(new Error("Sentry Test Error")); - yield* Effect.logError("Validation failed").pipe( - Effect.annotateLogs({ - field: "email", - reason: "Invalid email", - }) - ); -}); +// Run with your layer that includes Sentry.effectLayer(). ``` - - - - - - - - ### 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). @@ -327,10 +239,10 @@ 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 Effect 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/effect/usage/) -- Continue to [customize your configuration](/platforms/javascript/guides/effect/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/docs/platforms/javascript/guides/electron/index.mdx b/docs/platforms/javascript/guides/electron/index.mdx index acd7adcda290e..9d867f486fc7e 100644 --- a/docs/platforms/javascript/guides/electron/index.mdx +++ b/docs/platforms/javascript/guides/electron/index.mdx @@ -1,6 +1,6 @@ --- title: Electron -description: "Learn how to manually set up Sentry in your Electron app and capture your first errors." +description: "Learn how to manually set up Sentry in your Electron app and capture your first events." sdk: sentry.javascript.electron categories: - desktop @@ -30,40 +30,36 @@ pnpm add @sentry/electron ## Configure -Choose the features you want to configure, and this guide will show you how: - - +**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**. You should initialize the SDK in both the `main` process and every `renderer` process you spawn. +Don't need a feature? Remove its integration and options from the respective snippet. ### Configure the Main Process -Initialize the SDK in your Electron `main` process as early as possible: +Initialize the SDK in your Electron `main` process as early as possible. + +The main process snippets also turns on: + +- Tracing: via `tracesSampleRate` and `startupTracingIntegration()` ```javascript import * as Sentry from "@sentry/electron/main"; Sentry.init({ dsn: "___PUBLIC_DSN___", - // ___PRODUCT_OPTION_START___ performance - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // 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, - integrations: [Sentry.startupTracingIntegration()], - // ___PRODUCT_OPTION_END___ performance + integrations: [ + // Enables startup tracing in the main process + Sentry.startupTracingIntegration(), + ], }); ``` @@ -71,42 +67,38 @@ Sentry.init({ Initialize the SDK in your Electron renderer processes as early as possible. All renderer events are sent through the main process so passing `dsn`, `release` or `environment` to renderer `init` will have no effect. +The renderer process snippet also turns on: + +- Tracing: via `tracesSampleRate` and `browserTracingIntegration()` +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` + ```javascript import * as Sentry from "@sentry/electron/renderer"; Sentry.init({ integrations: [ - // ___PRODUCT_OPTION_START___ performance + // enables automatic instrumentation Sentry.browserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay 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: + // Additional integration configuration goes in here colorScheme: "system", }), - // ___PRODUCT_OPTION_END___ user-feedback ], - // ___PRODUCT_OPTION_START___ performance - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for performance monitoring. - // 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 + // Requires Sentry.replayIntegration() replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ session-replay }); ``` @@ -166,81 +158,39 @@ init( ); ``` -### 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 -## Verify Your Setup - -Let's test your setup and confirm that Sentry is working correctly. - -### Issues - -**Main process error** - -Add an event listener that throws an error in your main process: - -```javascript -import { app } from "electron"; -import * as Sentry from "@sentry/electron/main"; - -app.on("ready", () => { - throw new Error("Sentry test error in main process"); -}); -``` - -**Renderer process error** +## Send Logs -Add a test button in one of your HTML pages: + -```html {filename: index.html} - - - -``` +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino -Then, in your renderer, add the following: +## Send Application Metrics - - Finally, start your app and trigger two errors that Sentry will capture: one from the - main process and one from the renderer. - + -```javascript -document.getElementById("testError").addEventListener("click", () => { - throw new Error("Sentry test error in renderer process"); -}); -``` - - -### Tracing +## Verify Your Setup -To test tracing in your renderer, start a trace to measure the time it takes to execute your code. +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -Then, start your app and trigger two errors that Sentry will capture: one from the main process and one from the renderer. It will also start a trace with the defined name. +Add a test button to one of your renderer pages. Clicking it throws an error that Sentry captures: ```javascript document.getElementById("testError").addEventListener("click", () => { - Sentry.startSpan({ op: "test", name: "Renderer test span" }, () => { - throw new Error("Sentry test error in renderer process"); - }); + 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). @@ -249,15 +199,10 @@ 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 Electron 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 Electron application. Here's what to explore next: - 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 -- Make use of Electron-specific features -- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts +- Explore Electron-specific features diff --git a/docs/platforms/javascript/guides/elysia/index.mdx b/docs/platforms/javascript/guides/elysia/index.mdx index 7e1cf220de0a0..562cf1f120bea 100644 --- a/docs/platforms/javascript/guides/elysia/index.mdx +++ b/docs/platforms/javascript/guides/elysia/index.mdx @@ -1,6 +1,6 @@ --- title: Elysia -description: Learn how to set up Sentry in your Elysia app to capture errors and monitor performance. +description: Learn how to set up Sentry in your Elysia app and capture your first events. sdk: sentry.javascript.elysia fallbackGuide: javascript.bun categories: @@ -27,23 +27,10 @@ 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 runtime and preferred package manager to add the Sentry SDK to your application: - - You do **not** need `@elysiajs/opentelemetry`. The `@sentry/elysia` SDK - handles all instrumentation natively. - - ```bash {tabTitle:Bun} {mdExpandTabs} bun add @sentry/elysia ``` @@ -56,25 +43,36 @@ yarn add @sentry/elysia @elysiajs/node pnpm add @sentry/elysia @elysiajs/node ``` + + You do **not** need `@elysiajs/opentelemetry`. The `@sentry/elysia` SDK + handles all instrumentation natively. + + ## 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**. + + + Call `Sentry.init()` before creating your Elysia app, then wrap the app with `Sentry.withElysia()` before defining routes. +The snippet also turns on: + +- Tracing: via `tracesSampleRate` + +Don't need a feature? Remove its integration and options from the snippet. + ```javascript {tabTitle:Bun} {mdExpandTabs} {filename: index.ts} import * as Sentry from "@sentry/elysia"; import { Elysia } from "elysia"; 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/elysia/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 }); // withElysia returns the app instance, so you can chain routes directly @@ -90,15 +88,10 @@ import { node } from "@elysiajs/node"; 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/elysia/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 }); // withElysia returns the app instance, so you can chain routes directly @@ -107,7 +100,7 @@ const app = Sentry.withElysia(new Elysia({ adapter: node() })) .listen(3000); ``` -### Customize Automatic Error Capturing (Optional) +### Customize Automatic Error Capturing The SDK captures 5xx errors automatically via a global `onError` hook. Client errors (3xx/4xx) are not captured by default. You can customize which errors are captured using the `shouldHandleError` option. @@ -121,59 +114,36 @@ const app = Sentry.withElysia(new Elysia(), { }); ``` -### 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 -## Verify Your Setup +## Send Logs -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + -### Issues +If you're already logging with `console` or Consola, you can capture those logs with our console integrations. -First, let's verify that Sentry captures errors and creates issues in your Sentry project. Add the following route to your app, which triggers an error that Sentry will capture: +## Send Application Metrics -```javascript -app.get("/debug-sentry", () => { - throw new Error("My first Sentry error!"); -}); -``` + - +## Verify Your Setup -### 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 by starting a trace to measure the time it takes for the execution of your code: +Add a route to your app that throws an error: ```javascript -app.get("/debug-sentry", async () => { - await Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - async () => { - await new Promise((resolve) => setTimeout(resolve, 100)); - throw new Error("My first Sentry error!"); - } - ); +app.get("/debug-sentry", () => { + throw new Error("Sentry Test Error"); }); ``` - - - - - - - - - - ### View Captured Data in Sentry Finally, 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). @@ -182,10 +152,10 @@ Finally, head over to your project on [Sentry.io](https://sentry.io/) to view th ## Next Steps +At this point, you should have integrated Sentry into your Elysia 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 +- Set up Agent Tracing to monitor your AI systems diff --git a/docs/platforms/javascript/guides/ember/index.mdx b/docs/platforms/javascript/guides/ember/index.mdx index ba92dfd4ed7fa..4a12916733b9e 100644 --- a/docs/platforms/javascript/guides/ember/index.mdx +++ b/docs/platforms/javascript/guides/ember/index.mdx @@ -106,44 +106,13 @@ export default { initialize }; ## Send Logs -Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. -You can pass any attributes you want and search or filter by them later. + -If you're already logging with `console` or [Consola](https://github.com/unjs/consola), you can capture those logs with our console integrations. - -See Set Up Logs for all available logging methods and the syntax for formatting messages. - -```javascript -Sentry.logger.info("User example action completed"); - -Sentry.logger.warn("Slow operation detected", { - operation: "data_fetch", - duration: 3500, -}); - -Sentry.logger.error("Validation failed", { - form_field: "email", - reason: "Invalid email", -}); -``` +If you're already logging with `console` or Consola, you can capture those logs with our console integrations. ## Send Application Metrics -Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. -You can pass any attributes you want and search or filter by them later. - -See Set Up Metrics for all available metric types and configuration options. - -```javascript -Sentry.metrics.count("checkout.failed", 1); - -Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); - -Sentry.metrics.distribution("api_latency", 187, { - unit: "millisecond", - attributes: { endpoint: "/api/orders" }, -}); -``` + ## Verify Your Setup @@ -185,7 +154,6 @@ Now, head over to your project on [Sentry.io](https://sentry.io) to view the col At this point, you should have integrated Sentry into your Ember application. Here's what to explore next: - Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup -- Set up Agent Tracing to monitor your AI systems - Set up tunneling to avoid ad blockers from blocking Sentry events diff --git a/docs/platforms/javascript/guides/express/index.mdx b/docs/platforms/javascript/guides/express/index.mdx index c495ee6e41d74..059dcbfb2b745 100644 --- a/docs/platforms/javascript/guides/express/index.mdx +++ b/docs/platforms/javascript/guides/express/index.mdx @@ -1,6 +1,6 @@ --- title: Express -description: "Learn how to manually set up Sentry in your Express app and capture your first errors." +description: "Learn how to manually set up Sentry in your Express app and capture your first events." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: diff --git a/docs/platforms/javascript/guides/fastify/index.mdx b/docs/platforms/javascript/guides/fastify/index.mdx index d7aecbc64fde8..8635ad6a08605 100644 --- a/docs/platforms/javascript/guides/fastify/index.mdx +++ b/docs/platforms/javascript/guides/fastify/index.mdx @@ -1,6 +1,6 @@ --- title: Fastify -description: "Learn how to manually set up Sentry in your Fastify app and capture your first errors." +description: "Learn how to manually set up Sentry in your Fastify app and capture your first events." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: diff --git a/docs/platforms/javascript/guides/firebase/index.mdx b/docs/platforms/javascript/guides/firebase/index.mdx index 62a9a51256449..0f9e4c37744ae 100644 --- a/docs/platforms/javascript/guides/firebase/index.mdx +++ b/docs/platforms/javascript/guides/firebase/index.mdx @@ -1,6 +1,6 @@ --- title: Cloud Functions for Firebase -description: Learn how to set up Sentry in your Cloud Functions for Firebase project and capture your first errors. +description: Learn how to set up Sentry in your Cloud Functions for Firebase project and capture your first events. sdk: sentry.javascript.node fallbackGuide: javascript.node categories: @@ -28,36 +28,10 @@ This integration is enabled by default, so you get automatic performance monitor ## 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 Firebase Functions project: - - -```bash {tabTitle:npm} -npm install @sentry/node --save -``` - -```bash {tabTitle:yarn} -yarn add @sentry/node -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/node -``` - - - - - ```bash {tabTitle:npm} npm install @sentry/node @sentry/profiling-node --save ``` @@ -70,46 +44,41 @@ yarn add @sentry/node @sentry/profiling-node pnpm add @sentry/node @sentry/profiling-node ``` - - ## 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** and **Profiling**. + + + Create an initialization file (for example, `instrument.js`) that imports and initializes Sentry. +The snippet also turns on: + +- Tracing: via `tracesSampleRate` +- Profiling: via `profileSessionSampleRate`, `profileLifecycle`, and the profiling integration + +Don't need a feature? Remove its integration and options from the snippet. + ```javascript {filename:instrument.js} const Sentry = require("@sentry/node"); -// ___PRODUCT_OPTION_START___ profiling const { nodeProfilingIntegration } = require("@sentry/profiling-node"); -// ___PRODUCT_OPTION_END___ profiling Sentry.init({ dsn: "___PUBLIC_DSN___", - - // ___PRODUCT_OPTION_START___ profiling - integrations: [ - // Add our Profiling integration + // enables Profiling nodeProfilingIntegration(), ], - // ___PRODUCT_OPTION_END___ profiling - // ___PRODUCT_OPTION_START___ performance - - // Add Tracing by setting tracesSampleRate - // Set tracesSampleRate to 1.0 to capture 100% of transactions - // 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, - // Profile automatically while there's an active sampled span profileLifecycle: "trace", - // ___PRODUCT_OPTION_END___ profiling }); ``` @@ -142,68 +111,48 @@ exports.onUserCreated = onDocumentCreated("users/{userId}", async (event) => { }); ``` -### 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 -## Verify Your Setup +## Send Logs -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + -### Issues +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino -Add a test function that throws an error to verify Sentry is capturing errors: +## Send Application Metrics -```javascript {filename:index.js} -require("./instrument"); // Import Sentry initialization first -const { onRequest } = require("firebase-functions/https"); - -exports.testSentry = onRequest(async (request, response) => { - throw new Error("Sentry Test Error - This is intentional!"); -}); -``` + -Deploy your functions and trigger the test endpoint: +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. -```bash -firebase deploy --only functions -curl https://-.cloudfunctions.net/testSentry -``` - - +## Verify Your Setup -### Tracing +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -Firebase Functions are automatically instrumented for tracing. You can also create custom spans: +Add a test function that throws an error, deploy your functions, and trigger the test endpoint: ```javascript {filename:index.js} require("./instrument"); -const Sentry = require("@sentry/node"); const { onRequest } = require("firebase-functions/https"); -exports.tracedFunction = onRequest(async (request, response) => { - await Sentry.startSpan({ op: "task", name: "My Custom Task" }, async () => { - // Simulate some work - await new Promise((resolve) => setTimeout(resolve, 100)); - }); - - response.send("Done!"); +exports.testSentry = onRequest(async () => { + throw new Error("Sentry Test Error"); }); ``` - - - - - - - - - +```bash +firebase deploy --only functions +curl https://-.cloudfunctions.net/testSentry +``` ### View Captured Data in Sentry @@ -213,14 +162,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 Cloud Functions for Firebase project. - -Now's a good time to customize your setup and look into more advanced topics: +At this point, you should have integrated Sentry into your Cloud Functions for Firebase application. Here's what to explore next: - 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 +- Explore Tracing to learn how to inspect application performance diff --git a/docs/platforms/javascript/guides/gatsby/index.mdx b/docs/platforms/javascript/guides/gatsby/index.mdx index 1e077dfe392fd..ec585fdbbe0d2 100644 --- a/docs/platforms/javascript/guides/gatsby/index.mdx +++ b/docs/platforms/javascript/guides/gatsby/index.mdx @@ -1,7 +1,7 @@ --- title: Gatsby sdk: "sentry.javascript.gatsby" -description: "Learn how to set up Sentry in your Gatsby application, capture your first errors and traces, and view them in Sentry." +description: "Learn how to set up Sentry in your Gatsby application and capture your first events." categories: - browser - browser-only @@ -19,7 +19,7 @@ Run the command for your preferred package manager to add the Sentry SDK to your -`@sentry/gatsby` is a wrapper around the `@sentry/react` package, with additional Gatsby-specific functionality. This means that you can import all methods available in the `@sentry/react` package from `@sentry/gatsby`. +`@sentry/gatsby` is a wrapper around the `@sentry/react` package, with additional Gatsby-specific functionality. You can import all methods available in `@sentry/react` from `@sentry/gatsby`. @@ -56,7 +56,7 @@ const config: GatsbyConfig = { plugins: [ // ... { - resolve: "@sentry/gatsby" + resolve: "@sentry/gatsby", }, ], }; @@ -66,131 +66,92 @@ export default config; ## Configure -Choose the features you want to configure, and this guide will show you how: - - +**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**. -### Initialize the Sentry SDK +### Initialize the SDK + +Initialize Sentry as early as possible in your application. Create a `sentry.config.(js|ts)` file in your project root and add the following code. + +The snippet also turns on: + +- Tracing: via `browserTracingIntegration()` and `tracesSampleRate` +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` -Initialize Sentry as early as possible in your application. For this, create a new file `sentry.config.(js|ts)` in your project root and add the following: +Don't need a feature? Remove its integration and options from the snippet. ```javascript {filename:sentry.config.(js|ts)} import * as Sentry from "@sentry/gatsby"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - // ___PRODUCT_OPTION_START___ performance + // enables automatic instrumentation Sentry.browserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay 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: + // Additional integration configuration goes in here 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, + // Set trace propagation targets for your API requests + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // 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 }); ``` -### 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 Your Setup - -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - -### Issues +## Send Logs -To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages. + - - Then, open the page in a browser and click the button to trigger a frontend - error. - +If you're already logging with `console` or Consola, you can capture those logs with our console integrations. - +## Send Application Metrics -```javascript {filename:index.(jsx|tsx)} - -``` + - -### Tracing +## Verify Your Setup -To test your tracing configuration, update the previous code snippet and wrap the error in a custom span. +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -Then, open the page in a browser and click the button to trigger a frontend error and trace. +Add a test button to one of your pages. Clicking it will trigger an error for Sentry to capture. ```javascript {filename:index.(jsx|tsx)} ``` - - - - - - - - - + ### View Captured Data in Sentry @@ -200,16 +161,14 @@ 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 Gatsby 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 Gatsby 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 -- Learn how to manually capture errors +- Set up Agent Tracing to monitor your AI systems +- Set up tunneling to avoid ad blockers from blocking Sentry events + - Find various topics in Troubleshooting - [Get support](https://www.sentry.help/en/) diff --git a/docs/platforms/javascript/guides/gcp-functions/index.mdx b/docs/platforms/javascript/guides/gcp-functions/index.mdx index 614ddfa02ed63..e75d73a0e3621 100644 --- a/docs/platforms/javascript/guides/gcp-functions/index.mdx +++ b/docs/platforms/javascript/guides/gcp-functions/index.mdx @@ -1,6 +1,6 @@ --- title: Google Cloud Functions -description: "Learn how to manually set up Sentry in your Google Cloud Functions and capture your first errors." +description: "Learn how to manually set up Sentry in your Google Cloud Functions and capture your first events." sdk: sentry.javascript.google-cloud-serverless fallbackGuide: javascript.node categories: @@ -26,14 +26,6 @@ categories: ## 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: @@ -42,98 +34,128 @@ Run the command for your preferred package manager to add the Sentry SDK to your ## Configure -Make sure to initialize Sentry at the top of your function code and wrap each function with the appropriate helper. Select the tab that matches the kind of function you're using (HTTP, Background, or CloudEvent): - - +**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** and **Profiling**. -### Add Readable Stack Traces With Source Maps (Optional) - - - -### Control the Data You Send to Sentry (Optional) + - +Make sure to initialize Sentry at the top of your function code and wrap each function with the appropriate helper. -## Verify Your Setup +The snippet also turns on: -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. +- Tracing: via `tracesSampleRate` +- Profiling: via `profileSessionSampleRate`, `profileLifecycle`, and the profiling integration -### Issues +Don't need a feature? Remove its integration and options from the snippet. -Let's verify that Sentry captures errors and creates issues in your Sentry project. Add an intentional error in your function: +Select the tab that matches the kind of function you're using (HTTP, Background, or CloudEvent): ```javascript {tabTitle:Http functions} {mdExpandTabs} +const Sentry = require("@sentry/google-cloud-serverless"); +const { nodeProfilingIntegration } = require("@sentry/profiling-node"); + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + // enables Profiling + nodeProfilingIntegration(), + ], + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + // Enables Profiling for every session. + profileSessionSampleRate: 1.0, + profileLifecycle: "trace", +}); + exports.helloHttp = Sentry.wrapHttpFunction((req, res) => { - throw new Error("Sentry Test Error - This is intentional!"); + throw new Error("oh, hello there!"); }); ``` ```javascript {tabTitle:Background functions} -exports.helloBackground = Sentry.wrapEventFunction( - (data, context, callback) => { - throw new Error("Sentry Test Error - This is intentional!"); - } -); +const Sentry = require("@sentry/google-cloud-serverless"); +const { nodeProfilingIntegration } = require("@sentry/profiling-node"); + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + // enables Profiling + nodeProfilingIntegration(), + ], + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + // Enables Profiling for every session. + profileSessionSampleRate: 1.0, + profileLifecycle: "trace", +}); + +exports.helloEvents = Sentry.wrapEventFunction((data, context, callback) => { + throw new Error("oh, hello there!"); +}); ``` ```javascript {tabTitle:CloudEvent functions} +const Sentry = require("@sentry/google-cloud-serverless"); +const { nodeProfilingIntegration } = require("@sentry/profiling-node"); + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + // enables Profiling + nodeProfilingIntegration(), + ], + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + // Enables Profiling for every session. + profileSessionSampleRate: 1.0, + profileLifecycle: "trace", +}); + exports.helloEvents = Sentry.wrapCloudEventFunction((context, callback) => { - throw new Error("Sentry Test Error - This is intentional!"); + throw new Error("oh, hello there!"); }); ``` - -### Tracing +### Add Readable Stack Traces With Source Maps + + -To test tracing, wrap your code in a span: +### Control the Data You Send to Sentry -```javascript {tabTitle:Http functions} {mdExpandTabs} -exports.helloHttp = Sentry.wrapHttpFunction(async (req, res) => { - await Sentry.startSpan( - { op: "test", name: "My First Test Transaction" }, - async () => { - // Simulate some work - await new Promise((resolve) => setTimeout(resolve, 100)); - } - ); - - res.status(200).send("Success!"); -}); -``` + -```javascript {tabTitle:Background functions} -exports.helloBackground = Sentry.wrapEventFunction(async (data, context) => { - await Sentry.startSpan( - { op: "test", name: "My First Test Transaction" }, - async () => { - // Simulate some work - await new Promise((resolve) => setTimeout(resolve, 100)); - } - ); -}); -``` +## Send Logs -```javascript {tabTitle:CloudEvent functions} -exports.helloEvent = Sentry.wrapCloudEventFunction(async (context) => { - await Sentry.startSpan( - { op: "test", name: "My First Test Transaction" }, - async () => { - // Simulate some work - await new Promise((resolve) => setTimeout(resolve, 100)); - } - ); -}); -``` + + +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino + +## Send Application Metrics - + - +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. + +## Verify Your Setup - +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - +Add an intentional error to a wrapped function, then invoke it to verify that Sentry captures the error: - +```javascript +exports.helloHttp = Sentry.wrapHttpFunction((req, res) => { + throw new Error("Sentry Test Error"); +}); +``` ### View Captured Data in Sentry @@ -143,14 +165,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 Google Cloud Platform functions, which 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 Google Cloud Functions application. Here's what to explore next: - 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 +- Explore Tracing to learn how to inspect application performance diff --git a/docs/platforms/javascript/guides/hapi/index.mdx b/docs/platforms/javascript/guides/hapi/index.mdx index d7196e2d78d27..9c3a092676880 100644 --- a/docs/platforms/javascript/guides/hapi/index.mdx +++ b/docs/platforms/javascript/guides/hapi/index.mdx @@ -1,6 +1,6 @@ --- title: Hapi -description: "Learn how to manually set up Sentry in your Hapi app and capture your first errors." +description: "Learn how to manually set up Sentry in your Hapi app and capture your first events." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: diff --git a/docs/platforms/javascript/guides/hono/index.mdx b/docs/platforms/javascript/guides/hono/index.mdx index e6dc2483d43e7..6dde32ed42f7b 100644 --- a/docs/platforms/javascript/guides/hono/index.mdx +++ b/docs/platforms/javascript/guides/hono/index.mdx @@ -1,6 +1,6 @@ --- title: Hono -description: "Learn how to set up Sentry in your Hono app and capture your first errors." +description: "Learn how to set up Sentry in your Hono app and capture your first events." sdk: sentry.javascript.hono fallbackGuide: javascript.node categories: @@ -26,14 +26,6 @@ The community middleware `@hono/sentry` has been deprecated in favor of `@sentry ## Install -Choose the features you want to configure, and this guide will show you how: - - - - - ### Install the Sentry SDK Install the `@sentry/hono` package: @@ -70,8 +62,6 @@ npm install @sentry/bun deno add npm:@sentry/deno ``` - - ### Install the Profiling Package (Node.js Only) Profiling is only available for the Node.js runtime. Install the `@sentry/profiling-node` package: @@ -88,10 +78,13 @@ yarn add @sentry/profiling-node pnpm add @sentry/profiling-node ``` - - ## Configure +**Error Monitoring** starts working as soon as you configure the `sentry()` middleware or call `Sentry.init()` for Node.js. **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** and **Profiling**. Profiling is available only when you use the Node.js runtime. + + + If you're deploying to Cloudflare Workers, set the `nodejs_compat` compatibility flag. The SDK needs `AsyncLocalStorage`, which requires this flag. @@ -112,38 +105,34 @@ compatibility_flags = ["nodejs_compat"] Node.js requires Sentry to initialize before your application loads so it can instrument third-party libraries (like database clients). Create a separate initialization file: +The snippet also turns on: + +- Tracing: via `tracesSampleRate` +- Profiling: via `profileSessionSampleRate`, `profileLifecycle`, and `nodeProfilingIntegration()` + +Don't need a feature? Remove its integration and options from the snippet. + ```typescript {filename:instrument.mjs} // IMPORTANT: import from `@sentry/hono/node`, not `@sentry/node` import * as Sentry from "@sentry/hono/node"; -// ___PRODUCT_OPTION_START___ profiling import { nodeProfilingIntegration } from "@sentry/profiling-node"; -// ___PRODUCT_OPTION_END___ profiling Sentry.init({ dsn: "___PUBLIC_DSN___", - // ___PRODUCT_OPTION_START___ profiling + integrations: [ + // enables Profiling + nodeProfilingIntegration(), + ], - integrations: [nodeProfilingIntegration()], - // ___PRODUCT_OPTION_END___ profiling - // ___PRODUCT_OPTION_START___ performance - - // Set tracesSampleRate to 1.0 to capture 100% - // of spans for tracing. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/guides/hono/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 - // ___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, - // Profile automatically while there's an active sampled span profileLifecycle: "trace", - // ___PRODUCT_OPTION_END___ profiling }); ``` @@ -165,6 +154,10 @@ Add the `sentry()` middleware as early as possible in your Hono app. Before continuing, make sure you've completed the runtime-specific steps above: **Cloudflare Workers** users need to enable Node.js compatibility, and **Node.js** users need to create the instrument file. Since Node.js initializes Sentry in that file, the middleware doesn't take any options. +For Cloudflare Workers, Bun, and Deno, the snippet also turns on: + +- Tracing: via `tracesSampleRate` + ```typescript {tabTitle:Cloudflare Workers} {filename:index.ts} {mdExpandTabs} import { Hono } from "hono"; import { sentry } from "@sentry/hono/cloudflare"; @@ -175,12 +168,10 @@ app.use( sentry(app, { 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 }) ); @@ -213,12 +204,10 @@ app.use( sentry(app, { 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 }) ); @@ -237,12 +226,10 @@ app.use( sentry(app, { 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 }) ); @@ -276,17 +263,42 @@ By default, Sentry captures exceptions from Hono's `onError` handler, excluding To control which errors are captured, use the `shouldHandleError` option. -### 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 +## Send Logs + + + +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- Node.js and Bun: `consoleLoggingIntegration` for `console` calls, Consola, and Pino +- Deno and Cloudflare Workers: `consoleLoggingIntegration` for `console` calls + +## Send Application Metrics + + + +You can also collect runtime health metrics automatically with the following integrations: +- Node.js: `nodeRuntimeMetricsIntegration` +- Bun: [`bunRuntimeMetricsIntegration`](/platforms/javascript/guides/bun/configuration/integrations/bunruntimemetrics/) +- Deno: [`denoRuntimeMetricsIntegration`](/platforms/javascript/guides/deno/configuration/integrations/denoruntimemetrics/) + ## Verify Your Setup - +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + +Add a test route to your Hono app that throws an error, then request `/debug-sentry` to trigger it: + +```typescript +app.get("/debug-sentry", () => { + throw new Error("Sentry Test Error"); +}); +``` ### View Captured Data in Sentry @@ -296,15 +308,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 Sentry integrated into your Hono application and already be sending data to your Sentry project. - -Now's a good time to customize your setup and look into more advanced topics: +At this point, you should have integrated Sentry into your Hono 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 +- Set up Agent Tracing to monitor your AI systems - Explore Hono-specific features like custom error filtering -- 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/koa/index.mdx b/docs/platforms/javascript/guides/koa/index.mdx index f8c201fc2708a..61f9b6d2450cb 100644 --- a/docs/platforms/javascript/guides/koa/index.mdx +++ b/docs/platforms/javascript/guides/koa/index.mdx @@ -1,6 +1,6 @@ --- title: Koa -description: "Learn how to manually set up Sentry in your Koa app and capture your first errors." +description: "Learn how to manually set up Sentry in your Koa app and capture your first events." sdk: sentry.javascript.node fallbackGuide: javascript.node categories: diff --git a/docs/platforms/javascript/guides/nestjs/index.mdx b/docs/platforms/javascript/guides/nestjs/index.mdx index eb37fbc9c5b5b..c855c39d5c2b7 100644 --- a/docs/platforms/javascript/guides/nestjs/index.mdx +++ b/docs/platforms/javascript/guides/nestjs/index.mdx @@ -1,6 +1,6 @@ --- title: Nest.js -description: "Learn how to set up Sentry in your Nest.js app and capture your first errors." +description: "Learn how to set up Sentry in your Nest.js app and capture your first events." sdk: sentry.javascript.nestjs fallbackGuide: javascript.node categories: @@ -16,14 +16,6 @@ categories: ## 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: @@ -32,11 +24,42 @@ Run the command for your preferred package manager to add the Sentry SDK to your ## 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 [#5](#send-logs) and [#6](#send-application-metrics-). +This guide also enables **Tracing** and **Profiling**. + + + ### Initialize the Sentry SDK -To import and initialize Sentry, create a file named `instrument.ts` in the root directory of your project and add the following code: +To import and initialize Sentry, create a file named `instrument.ts` in the root directory of your project and add the code snippet shown below. + +The snippet also turns on: + +- Tracing: via `tracesSampleRate` +- Profiling: via `profileSessionSampleRate`, `profileLifecycle`, and the profiling integration - +Don't need a feature? Remove its integration and options from the snippet. + +```typescript {filename: instrument.ts} +import * as Sentry from "@sentry/nestjs"; +import { nodeProfilingIntegration } from "@sentry/profiling-node"; + +// Ensure to call this before requiring any other modules! +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + // enables Profiling + nodeProfilingIntegration(), + ], + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + // Enables Profiling for every session. + profileSessionSampleRate: 1.0, + profileLifecycle: "trace", +}); +``` ### Apply Instrumentation to Your App @@ -76,8 +99,11 @@ import { AppService } from "./app.service"; }) export class AppModule {} ``` +### Control the Data You Send to Sentry + + -### Add Readable Stack Traces With Source Maps (Optional) +### Add Readable Stack Traces With Source Maps @@ -85,19 +111,34 @@ export class AppModule {} -## Isolate Async Context for Background Jobs (Optional) +## Isolate Async Context for Background Jobs If your NestJS app uses background jobs (such as `@Cron()`, `@Interval()`, `@OnEvent()`, or BullMQ), breadcrumbs from those jobs can leak into unrelated HTTP request error events. Wrap your background job handlers with `Sentry.withIsolationScope()` to isolate them. See Isolate Background Job Scopes for details and code examples. -## Control the Data You Send to Sentry (Optional) +## Send Logs - + + +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino + +## Send Application Metrics + + + +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. ## Verify Your Setup Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - +Add an intentional error to a NestJS route handler and make a request to it: + +```typescript +throw new Error("Sentry Test Error"); +``` ### View Captured Data in Sentry @@ -107,20 +148,14 @@ 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 Nest.js 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 Nest.js application. Here's what to explore next: - Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup +- Set up Agent Tracing to monitor your AI systems - Extend Sentry to your frontend using one of our [frontend SDKs](/) -- Learn how to [manually capture errors](/platforms/javascript/guides/nestjs/usage/) -- Continue to [customize your configuration](/platforms/javascript/guides/nestjs/configuration/) -- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts -- Check out alternative installation methods - Find various topics in Troubleshooting - [Get support](https://www.sentry.help/en/) diff --git a/docs/platforms/javascript/guides/nextjs/index.mdx b/docs/platforms/javascript/guides/nextjs/index.mdx index af4d15d83054b..d5a6b14c9e06d 100644 --- a/docs/platforms/javascript/guides/nextjs/index.mdx +++ b/docs/platforms/javascript/guides/nextjs/index.mdx @@ -1,6 +1,6 @@ --- title: "Next.js" -description: Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, logs and traces and view them in Sentry. +description: Learn how to set up Sentry in your Next.js application using the installation wizard and capture your first events. sdk: sentry.javascript.nextjs categories: - browser @@ -11,60 +11,75 @@ categories: - + ## Install -Run the Sentry wizard to automatically configure Sentry in your Next.js application: +### Run the Installation Wizard + +Run the Sentry wizard to automatically install the SDK and configure Sentry in your Next.js application: ```bash npx @sentry/wizard@latest -i nextjs ``` -The wizard will prompt you to select features. Choose the ones you want to enable: - - +The wizard asks whether you want to enable **Tracing** and **Session Replay**, route browser requests through your server to avoid ad blockers, and create an example page. To match the configuration in this guide, answer **Yes** to each. Prefer to set things up yourself? Check out the [Manual Setup](/platforms/javascript/guides/nextjs/manual-setup/) guide. -## What the Wizard Created +## 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**. + + + +### Initialize the SDK -The wizard configured Sentry for all Next.js runtime environments and created files to test your setup. +Next.js runs code in different environments, so the wizard creates a separate initialization file for each in your project's root directory (or `src` folder): -### SDK Initialization +- `instrumentation-client.ts`: runs in the browser +- `sentry.server.config.ts`: runs in the Node.js runtime +- `sentry.edge.config.ts`: runs in the Edge runtime -Next.js runs code in different environments. The wizard creates separate initialization files for each: +Use the tabs in the code box below to view each file. -- **Client** (`instrumentation-client.ts`) — Runs in the browser -- **Server** (`sentry.server.config.ts`) — Runs in Node.js -- **Edge** (`sentry.edge.config.ts`) — Runs in edge runtimes +The snippets also turn on: + +- Tracing: via `tracesSampleRate` in all three files +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()`. The wizard doesn't add this integration, so add it to `instrumentation-client.ts` yourself. + +Don't need a feature? Remove its integration and options from the snippets. ```typescript {tabTitle:Client} {mdExpandTabs} {filename:instrumentation-client.ts} import * as Sentry from "@sentry/nextjs"; Sentry.init({ dsn: "___PUBLIC_DSN___", - - // ___PRODUCT_OPTION_START___ performance - tracesSampleRate: process.env.NODE_ENV === "development" ? 1.0 : 0.1, - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ session-replay integrations: [ - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay Sentry.replayIntegration(), - // ___PRODUCT_OPTION_END___ session-replay + // enables User Feedback + Sentry.feedbackIntegration({ + // Additional integration configuration goes in here + colorScheme: "system", + }), ], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, }); +// Instruments client-side navigations export const onRouterTransitionStart = Sentry.captureRouterTransitionStart; ``` @@ -74,9 +89,10 @@ import * as Sentry from "@sentry/nextjs"; Sentry.init({ dsn: "___PUBLIC_DSN___", - // ___PRODUCT_OPTION_START___ performance - tracesSampleRate: process.env.NODE_ENV === "development" ? 1.0 : 0.1, - // ___PRODUCT_OPTION_END___ performance + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, }); ``` @@ -86,21 +102,16 @@ import * as Sentry from "@sentry/nextjs"; Sentry.init({ dsn: "___PUBLIC_DSN___", - // ___PRODUCT_OPTION_START___ performance - tracesSampleRate: process.env.NODE_ENV === "development" ? 1.0 : 0.1, - // ___PRODUCT_OPTION_END___ performance + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, }); ``` - - -The example above samples 100% of traces in development and 10% in production. Monitor your [usage stats](https://sentry.io/orgredirect/organizations/:orgslug/settings/stats/?dataCategory=spans) and adjust `tracesSampleRate` based on your traffic volume. Learn more about [sampling configuration](/platforms/javascript/guides/nextjs/configuration/sampling/). - - - -### Server-Side Registration +### Register the Server-Side Configuration -The `instrumentation.ts` file registers your server and edge configurations with Next.js. +The wizard creates a [Next.js instrumentation file](https://nextjs.org/docs/app/guides/instrumentation) named `instrumentation.ts`. It loads your server and edge configurations, and exports `onRequestError` to capture errors from Server Components, route handlers, and middleware. ```typescript {filename:instrumentation.ts} import * as Sentry from "@sentry/nextjs"; @@ -109,6 +120,7 @@ export async function register() { if (process.env.NEXT_RUNTIME === "nodejs") { await import("./sentry.server.config"); } + if (process.env.NEXT_RUNTIME === "edge") { await import("./sentry.edge.config"); } @@ -117,173 +129,129 @@ export async function register() { export const onRequestError = Sentry.captureRequestError; ``` -### Next.js Configuration +### Capture React Render Errors + +If you use the App Router, the wizard adds Sentry to `app/global-error.tsx` to capture React rendering errors. If you use the Pages Router, it adds Sentry to `pages/_error.tsx` instead. + + -Your `next.config.ts` is wrapped with `withSentryConfig` to enable source map uploads, tunneling (to avoid ad-blockers), and other build-time features. +### Apply Instrumentation to Your App + +The wizard wraps your Next.js configuration with `withSentryConfig`. This instruments your app at build time, uploads source maps, and, if you said yes in the wizard, routes browser requests to Sentry through your server to avoid ad blockers. ```typescript {filename:next.config.ts} +import type { NextConfig } from "next"; import { withSentryConfig } from "@sentry/nextjs/config"; +const nextConfig: NextConfig = { + // Your existing Next.js configuration +}; + export default withSentryConfig(nextConfig, { org: "___ORG_SLUG___", project: "___PROJECT_SLUG___", - // Upload source maps for readable stack traces - authToken: process.env.SENTRY_AUTH_TOKEN, - - // Route Sentry requests through your server (avoids ad-blockers) - tunnelRoute: "/sentry-tunnel", - + // Only print logs for uploading source maps in CI silent: !process.env.CI, -}); -``` -### Error Handling + // Upload a larger set of source maps for prettier stack traces (increases build time) + widenClientFileUpload: true, -The wizard creates `app/global-error.tsx` to capture React rendering errors in your App Router application. - -```tsx {filename:app/global-error.tsx} -"use client"; - -import * as Sentry from "@sentry/nextjs"; -import { useEffect } from "react"; - -export default function GlobalError({ - error, -}: { - error: Error & { digest?: string }; -}) { - useEffect(() => { - Sentry.captureException(error); - }, [error]); - - return ( - - -

Something went wrong!

- - - ); -} + // Route browser requests to Sentry through a Next.js rewrite to avoid ad blockers. + // This can increase your server load as well as your hosting bill. + tunnelRoute: "/monitoring", +}); ``` -### Source Maps +### Add Readable Stack Traces With Source Maps -The wizard creates `.env.sentry-build-plugin` with your auth token for source map uploads. This file is automatically added to `.gitignore`. +The wizard stores your auth token in `.env.sentry-build-plugin` and adds the file to `.gitignore`. The Sentry build plugin uses this token to upload source maps when you build your app locally. -For CI/CD, set the `SENTRY_AUTH_TOKEN` environment variable in your build system. +For CI/CD builds, set the `SENTRY_AUTH_TOKEN` environment variable in your build system instead. -```bash {tabTitle:Local Development} {filename:.env.sentry-build-plugin} -SENTRY_AUTH_TOKEN=sntrys_eyJ... -``` + -```bash {tabTitle:CI/CD} -# Set as environment variable in your CI/CD system -SENTRY_AUTH_TOKEN=sntrys_eyJ... +```bash {filename:.env.sentry-build-plugin} +SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___ ``` -### Example Page - -The wizard creates `/sentry-example-page` with a button that triggers a test error. Use this to verify your setup. - -``` -app/ -├── sentry-example-page/ -│ └── page.tsx # Test page with error button -└── api/ - └── sentry-example-api/ - └── route.ts # Test API route -``` - -## Control the Data You Send to Sentry (Optional) +### Control the Data You Send to Sentry -## Verify Your Setup - - - -The example page tests all your enabled features with a single action: - -1. Start your dev server: - -```bash -npm run dev -``` - -2. Visit [localhost:3000/sentry-example-page](http://localhost:3000/sentry-example-page) +## Send Logs -3. Click **"Throw Sample Error"** + -### Check Your Data in Sentry +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: -**Errors** — [Open Issues](https://sentry.io/orgredirect/organizations/:orgslug/issues/) +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino +- Winston -You should see "This is a test error" with a full stack trace pointing to your source code. +## Send Application Metrics - + -**Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/) +In the Node.js runtime, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. -You should see the page load trace and the button click span. Learn more about custom spans. - - +## Verify Your Setup - +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -**Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/) +The wizard created an example page that sends a test error from both your frontend and your backend: -Watch a video-like recording of your session, including the moment the error occurred. Learn more about Session Replay configuration. +1. Start your development server: - + ```bash + npm run dev + ``` - +2. Open [localhost:3000/sentry-example-page](http://localhost:3000/sentry-example-page) in your browser. +3. Click **Throw Sample Error**. -**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) +If you skipped the example page, add a test button to one of your pages instead. Clicking it will trigger an error for Sentry to capture. -See structured log entries from your application. You can send logs from anywhere: +```tsx {filename:app/page.tsx} +"use client"; -```typescript -Sentry.logger.info("User action", { userId: "123" }); -Sentry.logger.warn("Slow response", { duration: 5000 }); -Sentry.logger.error("Operation failed", { reason: "timeout" }); +export default function Page() { + return ( + + ); +} ``` -Learn more about Logs configuration. + - +### View Captured Data in Sentry -**Application Metrics** — [Open Metrics](https://sentry.io/orgredirect/organizations/:orgslug/explore/metrics/) +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). -Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time: + -```typescript -Sentry.metrics.count("checkout.failed", 1); -Sentry.metrics.gauge("queue.depth", 42); -Sentry.metrics.distribution("api_latency", 187, { - unit: "millisecond", -}); -``` +## Next Steps + +At this point, you should have integrated Sentry into your Next.js application. Here's what to explore next: -Learn more about Application Metrics. +- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup +- Set up Agent Tracing to monitor agents built with the Vercel AI SDK, LangChain, and more +- Set up tunneling to avoid ad blockers blocking Sentry events, if you didn't enable it in the wizard - + - If you encountered issues with our installation wizard, try [setting up Sentry manually](/platforms/javascript/guides/nextjs/manual-setup/) -- Check [Troubleshooting](/platforms/javascript/guides/nextjs/troubleshooting/) for common issues -- [Get support](https://sentry.io/support/) +- Find various topics in Troubleshooting +- [Get support](https://www.sentry.help/en/) -## Next Steps - -You've successfully integrated Sentry into your Next.js application! Here's what to explore next: - -- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup -- [Logs Integrations](/platforms/javascript/guides/nextjs/logs/#integrations) - Connect popular logging libraries like Pino, Winston, and Bunyan -- [Distributed Tracing](/platforms/javascript/guides/nextjs/tracing/distributed-tracing/) - Trace requests across services and microservices -- [Agent Tracing](/platforms/javascript/guides/nextjs/agent-tracing/) - Monitor agents built with Vercel AI SDK, LangChain, and more -- [Connect GitHub + Seer](/integrations/source-code-mgmt/github/#installing-github) - Enable AI-powered [root cause analysis](/product/ai-in-sentry/seer/) by connecting your GitHub repository -- [Configuration Options](/platforms/javascript/guides/nextjs/configuration/) - Explore extended SDK configuration options - - + diff --git a/docs/platforms/javascript/guides/nitro/index.mdx b/docs/platforms/javascript/guides/nitro/index.mdx index 9c6e727ddcfd7..35f5abe881f79 100644 --- a/docs/platforms/javascript/guides/nitro/index.mdx +++ b/docs/platforms/javascript/guides/nitro/index.mdx @@ -1,6 +1,6 @@ --- title: Nitro -description: Learn how to set up Sentry in your Nitro app to capture errors and monitor performance. +description: Learn how to set up Sentry in your Nitro app, capture your first events, and monitor performance. sdk: sentry.javascript.nitro fallbackGuide: javascript.node categories: @@ -20,20 +20,12 @@ You need: - A Sentry [account](https://sentry.io/signup/) and [project](/product/projects/) - A Nitro application (`3.0.260415-beta` or newer) -- Node.js 20.19.0+ +- Node.js `20.19.0+` ## 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: @@ -50,8 +42,17 @@ yarn add @sentry/nitro pnpm add @sentry/nitro ``` + +The SDK is a wrapper around `@sentry/node` and re-exports its full API. All Node.js instrumentation from `@sentry/node` (HTTP clients, databases, etc.) works out of the box, and the Nitro-specific tracing channels add parameterized routes and middleware spans on top. + + ## 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 [#4](#send-logs) and [#5](#send-application-metrics-). +This guide also enables **Tracing**. + + + The Nitro SDK is configured in two places: a build-time wrapper that registers a Nitro module, and a runtime file that initializes the SDK before your server starts. ### Configure the Nitro Build @@ -112,20 +113,21 @@ SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___ Create an `instrument.mjs` file in your project root: +The snippet also turns on: + +- Tracing: via `tracesSampleRate` + +Don't need a feature? Remove its options from the snippet. + ```javascript {filename: instrument.mjs} import * as Sentry from "@sentry/nitro"; 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/nitro/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 }); ``` @@ -147,67 +149,11 @@ Load the instrumentation file with Node's `--import` flag before any Nitro comma } ``` -### 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 - -Add a test route that throws an error, then open `/debug-sentry` in your browser (or `curl` it) to trigger the error: - -```javascript {filename: server/routes/debug-sentry.ts} -import { defineHandler } from "nitro/h3"; - -export default defineHandler(() => { - throw new Error("My first Sentry error!"); -}); -``` - - - -### Tracing - -To verify tracing, add a handler that starts a manual span: - -```javascript {filename: server/routes/debug-sentry.ts} -import { defineHandler } from "nitro/h3"; -import * as Sentry from "@sentry/nitro"; - -export default defineHandler(async () => { - await Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - async () => { - await new Promise((resolve) => setTimeout(resolve, 100)); - throw new Error("My first Sentry error!"); - } - ); -}); -``` - - - - - - - - - - - -### View Captured Data in Sentry - -Finally, 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). - - - -## Features +## Automatic Instrumentation ### Automatic Error Capturing @@ -250,16 +196,49 @@ export default defineHandler(() => { }); ``` -## Runtime Behavior -The SDK is a wrapper around `@sentry/node` and re-exports its full API. All Node.js instrumentation from `@sentry/node` (HTTP clients, databases, etc.) works out of the box, and the Nitro-specific tracing channels add parameterized routes and middleware spans on top. +## Send Logs + + + +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino + +## Send Application Metrics + + + +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. + +## Verify Your Setup + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + +Add a test route that throws an error, then open `/debug-sentry` in your browser to trigger the error: + +```javascript {filename: server/routes/debug-sentry.ts} +import { defineHandler } from "nitro/h3"; + +export default defineHandler(() => { + throw new Error("Sentry Test Error"); +}); +``` + +### View Captured Data in Sentry + +Finally, 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 Nitro 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 +- Set up Agent Tracing to monitor your AI systems +- Explore Tracing to learn how to inspect application performance diff --git a/docs/platforms/javascript/guides/node/index.mdx b/docs/platforms/javascript/guides/node/index.mdx index 69db24d7d47bf..989e9c7935797 100644 --- a/docs/platforms/javascript/guides/node/index.mdx +++ b/docs/platforms/javascript/guides/node/index.mdx @@ -1,6 +1,6 @@ --- title: Node.js -description: "Learn how to manually set up Sentry in your Node.js app and capture your first errors." +description: "Learn how to manually set up Sentry in your Node.js app and capture your first events." sdk: sentry.javascript.node categories: - server diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 23739a6ab86c5..27fcb45648a80 100644 --- a/docs/platforms/javascript/guides/react-router/index.mdx +++ b/docs/platforms/javascript/guides/react-router/index.mdx @@ -1,6 +1,6 @@ --- title: React Router Framework -description: Learn how to set up and configure Sentry in your React Router application (v7.15+) using the installation wizard, capture your first errors, and view them in Sentry. +description: Learn how to set up and configure Sentry in your React Router application (v7.15+) using the installation wizard, capture your first events, and view them in Sentry. sdk: sentry.javascript.react-router categories: - browser @@ -28,162 +28,49 @@ If you're using React Router in data or declarative mode, follow the instruction + + -## Configure - -If you prefer to configure Sentry manually, here are the configuration files the wizard would create: -In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/session-replay/web/). +## Control the Data You Send to Sentry -Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + - +## Send Logs - + -### Client-Side Configuration - -The wizard creates a client configuration file that initializes the Sentry SDK in your browser. - -The configuration includes your DSN (Data Source Name), which connects your app to your Sentry project, and enables the features you selected during installation. - -```tsx {tabTitle:Client} {filename:entry.client.tsx} -import * as Sentry from "@sentry/react-router"; -import { startTransition, StrictMode } from "react"; -import { hydrateRoot } from "react-dom/client"; -import { HydratedRouter } from "react-router/dom"; - -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 - 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 - tracesSampleRate: 1.0, - - // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled - tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], - // ___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 - replaysSessionSampleRate: 0.1, - replaysOnErrorSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ session-replay -}); - -startTransition(() => { - hydrateRoot( - document, - - - - ); -}); -``` +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. +We also provide integrations for: +- Consola +- Pino -### Server-Side Configuration - -The wizard also creates a server configuration file for Node.js runtime. - -For more advanced configuration options or to set up Sentry manually, check out our [manual setup guide](/platforms/javascript/guides/react-router/manual-setup/). - -```js {tabTitle:Server} {filename:instrument.server.mjs} -import * as Sentry from "@sentry/react-router"; -// ___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/guides/react-router/configuration/options/#tracesSampleRate - 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 - profileSessionSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ profiling -}); -``` +## Send Application Metrics -### Control the Data You Send to Sentry (Optional) + - +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. ## Verify Your Setup -The `sentry init` command checks the integration files it creates or modifies before it finishes. To confirm runtime events are reaching Sentry, start your React Router app, exercise the parts of your app that should send events, and then check your Sentry project. - -If you used the React Router Framework Mode installation wizard instead, you can also verify your setup with the example page it creates: - -1. Open the example page `/sentry-example-page` in your browser. For most React Router applications, this will be at localhost. -2. Observe the example page with a button that triggers test errors. +The `sentry init` command checks the integration files it creates or modifies before it finishes. To confirm runtime events are reaching Sentry, add a test button to your app and click it: + +```tsx + +``` -Clicking the button triggers an error that Sentry captures for you. The example also demonstrates how to test performance tracing. - - - -If you used the React Router Framework Mode installation wizard, explore the example files' code in your project to understand what's happening after your button click. - - - - - ### 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). @@ -192,15 +79,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 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 React Router Framework 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 +- Set up tunneling to avoid ad blockers blocking Sentry events +- Read the manual setup guide for advanced configuration diff --git a/docs/platforms/javascript/guides/react-router/manual-setup.mdx b/docs/platforms/javascript/guides/react-router/manual-setup.mdx index 37848cd2a98a0..aec0eda1e8064 100644 --- a/docs/platforms/javascript/guides/react-router/manual-setup.mdx +++ b/docs/platforms/javascript/guides/react-router/manual-setup.mdx @@ -1,7 +1,7 @@ --- title: "Manual Setup" sidebar_order: 1 -description: "Learn how to manually set up Sentry in your React Router app (v7.15+) and capture your first errors." +description: "Learn how to manually set up Sentry in your React Router app (v7.15+) and capture your first events." --- @@ -12,29 +12,8 @@ description: "Learn how to manually set up Sentry in your React Router app (v7.1 ## 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} npm install @sentry/react-router @sentry/profiling-node ``` @@ -47,24 +26,13 @@ yarn add @sentry/react-router @sentry/profiling-node pnpm add @sentry/react-router @sentry/profiling-node ``` - - - - ```bash {tabTitle:npm} - npm install @sentry/react-router - ``` - -```bash {tabTitle:yarn} -yarn add @sentry/react-router -``` +## Configure -```bash {tabTitle:pnpm} -pnpm add @sentry/react-router -``` - +**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**. -## Configure + ### Expose Entry Point Files @@ -78,58 +46,54 @@ npx react-router reveal Initialize Sentry in your `entry.client.tsx` file. +The snippet also turns on: + +- Tracing: via `tracesSampleRate` and `reactRouterTracingIntegration()` +- 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. + 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. -```tsx {diff} {filename: entry.client.tsx} -+import * as Sentry from "@sentry/react-router"; - import { startTransition, StrictMode } from "react"; - import { hydrateRoot } from "react-dom/client"; - import { HydratedRouter } from "react-router/dom"; - -+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 -+ 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 -+ tracesSampleRate: 1.0, -+ -+ // Set `tracePropagationTargets` to declare which URL(s) should have trace propagation enabled -+ tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], -+ // ___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 -+ replaysSessionSampleRate: 0.1, -+ replaysOnErrorSampleRate: 1.0, -+ // ___PRODUCT_OPTION_END___ session-replay -+}); +```tsx {filename: entry.client.tsx} +import * as Sentry from "@sentry/react-router"; +import { startTransition, StrictMode } from "react"; +import { hydrateRoot } from "react-dom/client"; +import { HydratedRouter } from "react-router/dom"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + integrations: [ + // Registers and configures the Tracing integration, + // which automatically instruments your application to monitor its + // performance, including custom React Router routing instrumentation + Sentry.reactRouterTracingIntegration(), + // Registers the Replay integration, + // which automatically captures Session Replays + Sentry.replayIntegration(), + // Registers the User Feedback integration + Sentry.feedbackIntegration({ + // Additional SDK configuration goes in here, for example: + colorScheme: "system", + }), + ], + + // 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 declare which URL(s) should have trace propagation enabled + tracePropagationTargets: [/^\//, /^https:\/\/yourserver\.io\/api/], + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); startTransition(() => { hydrateRoot( @@ -156,36 +120,30 @@ On unsupported Node versions, you'll only lose auto-instrumentation for lower-le -First, create a file called `instrument.server.mjs` in the root of your project to initialize Sentry: +First, create a file called `instrument.server.mjs` in the root of your project to initialize Sentry. + +The snippet also turns on: + +- Tracing: via `tracesSampleRate` +- Profiling: via `nodeProfilingIntegration()` and `profileSessionSampleRate` + +Don't need a feature? Remove its integration and options from the snippet. ```js {filename: instrument.server.mjs} import * as Sentry from "@sentry/react-router"; -// ___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 + // Enables Profiling 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/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 - // ___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 all sessions. + // We recommend reducing this value in production. profileSessionSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ profiling }); ``` @@ -399,7 +357,7 @@ When you import the instrumentation file directly instead of using the `--import -### 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. @@ -453,77 +411,41 @@ export default { } satisfies Config; ``` -### 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, throw an error in a loader. - - - Then, open the route in your browser and you should trigger an error. - - - - -```tsx {filename: error.tsx} -import type { Route } from "./+types/example-page"; +## Send Logs -export async function loader() { - throw new Error("My first Sentry error!"); -} + -export default function ExamplePage() { - return
Loading this page will throw an error
; -} -``` +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. +We also provide integrations for: +- Consola +- Pino - -### Tracing +## Send Application Metrics -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. + -Then, open the route in your browser. You should start a trace and trigger an error. +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. -```tsx {filename: error.tsx} -import * as Sentry from "@sentry/react-router"; -import type { Route } from "./+types/example-page"; - -export async function loader() { - return Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - () => { - throw new Error("My first Sentry error!"); - } - ); -} +## Verify Your Setup -export default function ExamplePage() { - return
Loading this page will throw an error
; -} +The `sentry init` command checks the integration files it creates or modifies before it finishes. To confirm runtime events are reaching Sentry, add a test button to your app and click it: + +```tsx + ``` - - - - - - - - - + ### View Captured Data in Sentry @@ -533,15 +455,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 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 React Router Framework 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 +- Set up tunneling to avoid ad blockers blocking Sentry events +- Set up Agent Tracing to monitor your AI systems diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx index 37adc2d852321..f44073a9ba55a 100644 --- a/docs/platforms/javascript/guides/react/index.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -1,6 +1,6 @@ --- title: React -description: "Learn how to set up Sentry in your React application, capture your first errors and traces, and view them in Sentry." +description: "Learn how to set up Sentry in your React application and capture your first events." sdk: sentry.javascript.react categories: - browser @@ -23,11 +23,11 @@ This guide is for client-side React applications (SPAs) built with tools like Vi - + ## Install -Install the Sentry SDK using your preferred package manager: +Run the command for your preferred package manager to add the Sentry SDK to your application: ```bash {tabTitle:npm} npm install @sentry/react --save @@ -43,68 +43,53 @@ pnpm add @sentry/react ## Configure -Choose the features you want to 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**. -### Initialize the Sentry SDK +### Initialize the SDK + +Create a file in your project's root directory (for example, `instrument.js`) and add your Sentry configuration. Import this file **before** any other imports in your application entry point. + +The snippet also turns on: -Create a file in your project's root directory (e.g., `instrument.js`) and add your Sentry configuration. +- Tracing: via `browserTracingIntegration()` and `tracesSampleRate`; `tracePropagationTargets` controls which API requests receive trace headers +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` -This file must be imported **before** any other imports in your application entry point. +Don't need a feature? Remove its integration and options from the snippet. ```javascript {filename:instrument.js} import * as Sentry from "@sentry/react"; Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - // ___PRODUCT_OPTION_START___ performance - // If you're using react router, use the integration for your react router version instead. - // Learn more at - // https://docs.sentry.io/platforms/javascript/guides/react/configuration/integrations/react-router/ + // enables automatic instrumentation Sentry.browserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay 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: + // Additional integration configuration goes in here colorScheme: "system", }), - // ___PRODUCT_OPTION_END___ user-feedback ], - // ___PRODUCT_OPTION_START___ performance - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for tracing. - // 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 + // Set trace propagation targets for your API requests tracePropagationTargets: [/^\//, /^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,7 +98,6 @@ Sentry.init({ Import your Sentry configuration as the **first import** in your application entry point, then render your app. ```javascript {filename:main.jsx} -// Sentry initialization should be imported first! import "./instrument"; import App from "./App"; import { createRoot } from "react-dom/client"; @@ -135,13 +119,13 @@ import * as Sentry from "@sentry/react"; const container = document.getElementById("app"); const root = createRoot(container, { - // Callback called when an error is thrown and not caught by an ErrorBoundary. + // Called when an error is thrown and not caught by an ErrorBoundary. onUncaughtError: Sentry.reactErrorHandler((error, errorInfo) => { console.warn("Uncaught error", error, errorInfo.componentStack); }), - // Callback called when React catches an error in an ErrorBoundary. + // Called when React catches an error in an ErrorBoundary. onCaughtError: Sentry.reactErrorHandler(), - // Callback called when React automatically recovers from errors. + // Called when React automatically recovers from errors. onRecoverableError: Sentry.reactErrorHandler(), }); root.render(); @@ -182,19 +166,17 @@ Run the Sentry wizard to configure source map uploads for your bundler: npx @sentry/wizard@latest -i sourcemaps ``` - - -### Set Up Routing (Optional) +### Set Up Routing If you're using client-side routing, configure Sentry to capture navigation events for better performance insights. -Select your router: - - [React Router v7](/platforms/javascript/guides/react/features/react-router/v7/) - [React Router v6](/platforms/javascript/guides/react/features/react-router/v6/) - [Older versions](/platforms/javascript/guides/react/features/react-router/) - [TanStack Router](/platforms/javascript/guides/react/features/tanstack-router/) +When using React Router, replace `browserTracingIntegration()` with the integration for your router version. For example: + ```javascript {filename:instrument.js} import React from "react"; import * as Sentry from "@sentry/react"; @@ -208,6 +190,7 @@ import { Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ + // enables automatic instrumentation for React Router v7 Sentry.reactRouterV7BrowserTracingIntegration({ useEffect: React.useEffect, useLocation, @@ -215,81 +198,59 @@ Sentry.init({ createRoutesFromChildren, matchRoutes, }), + // enables Session Replay + Sentry.replayIntegration(), + // enables User Feedback + Sentry.feedbackIntegration({ + colorScheme: "system", + }), ], -}); -``` - + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + tracePropagationTargets: [/^\\//, /^https:\\/\\/yourserver\\.io\\/api/], -### Capture Redux State Data (Optional) + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); +``` -Capture Redux state and actions with your errors using `Sentry.createReduxEnhancer`. +### Capture Redux State Data -Learn more about [Redux integration options](/platforms/javascript/guides/react/features/redux/). +Capture Redux state and actions with your errors using `Sentry.createReduxEnhancer`. Learn more about [Redux integration options](/platforms/javascript/guides/react/features/redux/). ```javascript {filename:store.js} import { createStore, compose } from "redux"; import * as Sentry from "@sentry/react"; const sentryEnhancer = Sentry.createReduxEnhancer(); - const store = createStore(rootReducer, compose(sentryEnhancer)); ``` -### Avoid Ad Blockers With Tunneling (Optional) - -Some ad blockers prevent Sentry events from being sent. Use the `tunnel` option to route events through your server. - -Learn more about [setting up tunneling](/platforms/javascript/guides/react/troubleshooting/#using-the-tunnel-option). - -```javascript {filename:instrument.js} -Sentry.init({ - dsn: "___PUBLIC_DSN___", - tunnel: "/tunnel", -}); -``` - -### Control the Data You Send to Sentry (Optional) +### Control the Data You Send to Sentry -## Verify Your Setup - - - -Add a test button to trigger an error, then check Sentry to confirm it's working. - -**Errors** — [Open Issues](https://sentry.io/orgredirect/organizations/:orgslug/issues/) - -You should see "Sentry Test Error" with a stack trace pointing to your source code (if source maps are configured). - - - -**Tracing** — [Open Traces](https://sentry.io/orgredirect/organizations/:orgslug/explore/traces/) +## Send Logs -You should see page load traces and the test span. Learn more about custom instrumentation. + - +If you're already logging with `console` or Consola, you can capture those logs with our console integrations. - +## Send Application Metrics -**Session Replay** — [Open Replays](https://sentry.io/orgredirect/organizations/:orgslug/replays/) + -Watch a video-like recording of your session, including the moment the error occurred. Learn more about Session Replay configuration. - - - - - -**Logs** — [Open Logs](https://sentry.io/orgredirect/organizations/:orgslug/explore/logs/) - -See structured log entries from your application. Learn more about Logs configuration. - - +## Verify Your Setup -**Application Metrics** — [Open Metrics](https://sentry.io/orgredirect/organizations/:orgslug/explore/metrics/) +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -Track and analyze custom application metrics to understand trends and patterns in your app's performance and behavior over time. Learn more about Application Metrics. +Add a test button to one of your components. Clicking it will trigger an error for Sentry to capture. ```javascript {filename:App.jsx} ``` - - -To test tracing, wrap the error in a span: - -```javascript - -``` - - - - - -Send logs from anywhere in your app: - -```javascript -Sentry.logger.info("User action", { userId: "123" }); -Sentry.logger.warn("Slow response", { duration: 5000 }); -Sentry.logger.error("Operation failed", { reason: "timeout" }); -``` - - + -Track metrics from anywhere in your app: +### View Captured Data in Sentry -```javascript -Sentry.metrics.count("checkout.failed", 1); -Sentry.metrics.gauge("queue.depth", 42); -Sentry.metrics.distribution("api_latency", 187, { - unit: "millisecond", -}); -``` +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). - + -**1. Enable debug mode** to see SDK activity in the console: - -```javascript {filename:instrument.js} -Sentry.init({ - dsn: "___PUBLIC_DSN___", - debug: true, -}); -``` +## Next Steps -**2. Check your DSN** — Ensure it's correctly copied from your [Sentry project settings](https://sentry.io/orgredirect/organizations/:orgslug/settings/projects/:projectId/keys/). +At this point, you should have integrated Sentry into your React application. Here's what to explore next: -**3. Disable ad blockers** — Some ad blockers prevent Sentry from sending events. See [tunneling](#avoid-ad-blockers-with-tunneling-optional) for a workaround. +- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup +- Set up tunneling to avoid ad blockers from blocking Sentry events +- Explore React-specific features -**4. Check your quota** — View your [usage stats](https://sentry.io/orgredirect/organizations/:orgslug/stats/) to ensure you haven't exceeded your plan limits. + -For more help, see the Troubleshooting page. +- Find various topics in Troubleshooting +- [Get support](https://www.sentry.help/en/) -## Next Steps - -You've successfully integrated Sentry into your React application! Here's what to explore next: - -- Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup -- [Session Replay](/platforms/javascript/guides/react/session-replay/) — Watch video-like reproductions of user sessions to debug errors in context -- [Distributed Tracing](/platforms/javascript/guides/react/tracing/distributed-tracing/) — Trace requests from your React frontend to backend services -- [Connect GitHub + Seer](/integrations/source-code-mgmt/github/#installing-github) — Enable AI-powered [root cause analysis](/product/ai-in-sentry/seer/) by connecting your repository -- [Logs](/platforms/javascript/guides/react/logs/) — Send structured logs correlated with errors and traces -- [Metrics](/platforms/javascript/guides/react/metrics/) — Track custom counters, gauges, and distributions to monitor application health - - + diff --git a/docs/platforms/javascript/guides/solid/index.mdx b/docs/platforms/javascript/guides/solid/index.mdx index edc1ad31136b1..4cfd9c1810a37 100644 --- a/docs/platforms/javascript/guides/solid/index.mdx +++ b/docs/platforms/javascript/guides/solid/index.mdx @@ -1,7 +1,7 @@ --- title: Solid sdk: sentry.javascript.solid -description: Learn how to manually set up Sentry in your Solid app and capture your first errors. +description: "Learn how to manually set up Sentry in your Solid app and capture your first events." categories: - browser - browser-only @@ -35,72 +35,59 @@ pnpm add @sentry/solid ## Configure -Choose the features you want to configure, and this guide will show you how: - - +**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**. -### Initialize the Sentry SDK +### Initialize the SDK + +Initialize Sentry as early as possible in your application, for example, in your `index.(jsx|tsx)` file. + +The snippet also turns on: + +- Tracing: via `solidRouterBrowserTracingIntegration()` and `tracesSampleRate` +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` -Initialize Sentry as early as possible in your application, for example, in your `index.(jsx|tsx)` file: +Don't need a feature? Remove its integration and options from the snippet. -```javascript {filename: index.jsx} +```javascript {filename:index.jsx} import * as Sentry from "@sentry/solid"; -// ___PRODUCT_OPTION_START___ performance import { solidRouterBrowserTracingIntegration } from "@sentry/solid/solidrouter"; -// ___PRODUCT_OPTION_END___ performance import { render } from "solid-js/web"; import { DEV } from "solid-js"; import App from "./app"; -// this will only initialize your Sentry client in production builds. +// Initialize Sentry only in production builds. if (!DEV) { Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - // ___PRODUCT_OPTION_START___ performance + // enables automatic instrumentation for Solid Router solidRouterBrowserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay 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: + // Additional integration configuration goes in here 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 + // Set trace propagation targets for your API requests tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], - // ___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/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,75 +104,42 @@ To automatically report exceptions from inside a component tree to Sentry, wrap -### 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 Your Setup - -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - -### Issues +## Send Logs -To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages. + - - Then, open the page in a browser and click the button to trigger a frontend - error. - +If you're already logging with `console` or Consola, you can capture those logs with our console integrations. - +## Send Application Metrics -```javascript - -``` + - -### Tracing +## Verify Your Setup -To test your tracing configuration, update the previous code snippet to start 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. -Then, open the page in a browser and click the button to trigger a frontend error and trace. +Add a test button to one of your components. Clicking it will trigger an error for Sentry to capture. ```javascript ``` - - - - - - - - - + ### View Captured Data in Sentry @@ -195,17 +149,14 @@ 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 Solid 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 Solid 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 -- Make use of Solid-specific features -- Learn how to manually capture errors +- Set up tunneling to avoid ad blockers from blocking Sentry events +- Explore Solid-specific features + - Find various topics in Troubleshooting - [Get support](https://www.sentry.help/en/) diff --git a/docs/platforms/javascript/guides/solidstart/index.mdx b/docs/platforms/javascript/guides/solidstart/index.mdx index df59fca4df5dc..f7c7a9f1baade 100644 --- a/docs/platforms/javascript/guides/solidstart/index.mdx +++ b/docs/platforms/javascript/guides/solidstart/index.mdx @@ -1,6 +1,6 @@ --- title: SolidStart -description: Learn how to set up Sentry in your SolidStart application and capture your first errors. +description: Learn how to set up Sentry in your SolidStart application and capture your first events. sdk: sentry.javascript.solidstart categories: - browser @@ -24,19 +24,6 @@ This SDK is currently in **beta**. Beta features are still in progress and may h ## 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: @@ -55,6 +42,11 @@ pnpm add @sentry/solidstart ## 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**. + + + You need to initialize and configure the Sentry SDK in two places: the client side and the server side. @@ -65,57 +57,47 @@ The examples in this guide will use TypeScript with a `src` folder structure. Ma ### Configure Client-Side Sentry -Import and initialize the Sentry SDK in your `/src/entry-client.tsx` file. +Import and initialize the Sentry SDK in your `/src/entry-client.tsx` file. If you use Solid Router, add its tracing integration as shown below and wrap your router in the next step. + +The snippet also turns on: - - If you're using Solid Router, make sure to import and add the - `solidRouterBrowserTracingIntegration` to enable tracing in your app. - +- Tracing: via `tracesSampleRate` and `solidRouterBrowserTracingIntegration()` if you're using Solid Router +- 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. ```jsx {filename:src/entry-client.tsx} import * as Sentry from "@sentry/solidstart"; -// ___PRODUCT_OPTION_START___ performance // import solidRouterBrowserTracingIntegration if you're using Solid Router import { solidRouterBrowserTracingIntegration } from "@sentry/solidstart/solidrouter"; -// ___PRODUCT_OPTION_END___ performance import { mount, StartClient } from "@solidjs/start/client"; Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - // ___PRODUCT_OPTION_START___ performance // add solidRouterBrowserTracingIntegration if you're using Solid Router + // enables automatic instrumentation solidRouterBrowserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay - // Replay may only be enabled for the client-side + // enables Session Replay 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: + // Additional integration configuration goes in here 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, + // 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 }); mount(() => , document.getElementById("app")); @@ -125,6 +107,10 @@ mount(() => , document.getElementById("app")); Initialize Sentry on the server. On SolidStart 2, do this in a Nitro startup plugin, which runs once when the server starts. On SolidStart 1, create an `instrument.server.ts` file in your `src` folder. +The snippet also turns on: + +- Tracing: via `tracesSampleRate` + ```typescript {tabTitle:SolidStart 2} {filename:server/plugins/sentry.ts} {mdExpandTabs} import * as Sentry from "@sentry/solidstart"; import { definePlugin } from "nitro"; @@ -132,15 +118,11 @@ import { definePlugin } from "nitro"; export default definePlugin(() => { 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 }); }); ``` @@ -150,15 +132,11 @@ import * as Sentry from "@sentry/solidstart"; 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 }); ``` @@ -218,8 +196,6 @@ export default defineConfig( ); ``` - - ### Configure Solid Router If you're using Solid Router and the Sentry `solidRouterBrowserTracingIntegration` integration, wrap your Solid Router with `withSentryRouterRouting` to enable Sentry to collect navigation spans: @@ -240,8 +216,6 @@ export default function App() { } ``` - - ### Run Your Application On SolidStart 2, the Vite plugin instruments your dependencies at build time, so the server needs no preload flag. Build with `vite build` and start the output directly. @@ -284,7 +258,7 @@ To automatically report exceptions from inside a component tree to Sentry, wrap -### 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 slug to the Sentry plugin in your build config: @@ -345,87 +319,44 @@ 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. +## Send Logs -### Issues + -To verify that Sentry captures errors and creates issues in your Sentry project, add a test button to an existing page or create a new one. +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. +We also provide integrations for: +- Consola +- Pino - - Then, open the page in a browser and click the button to trigger a frontend - error. - - - +## Send Application Metrics -```javascript - -``` + - -### Tracing +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. -To test tracing, create a test API route like `src/routes/sentry-test.tsx`: +## Verify Your Setup -```javascript {filename:sentry-test.tsx} -export async function GET() { - 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. -Next, update your test button to call this route and throw an error if the response isn't `ok`. +Add a test button to an existing page. Clicking it throws an error that Sentry captures: -Then, open the page in the browser and click the button to trigger a frontend error, an error in the API route, and a trace to measure the time it takes for the API request to complete. + -```javascript +```jsx ``` - - - - - - - - - - ### 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). @@ -434,15 +365,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 your SolidStart 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 SolidStart 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 -- Learn how to make use of SolidStart-specific features -- Get familiar with [Sentry's product features](/) like tracing, insights, and alerts +- Set up Agent Tracing to monitor your AI systems +- Set up tunneling to avoid ad blockers blocking Sentry events diff --git a/docs/platforms/javascript/guides/svelte/index.mdx b/docs/platforms/javascript/guides/svelte/index.mdx index ec01e656bc2b6..1931db3436219 100644 --- a/docs/platforms/javascript/guides/svelte/index.mdx +++ b/docs/platforms/javascript/guides/svelte/index.mdx @@ -1,6 +1,6 @@ --- title: Svelte -description: "Learn how to manually set up Sentry in your Svelte app and capture your first errors." +description: "Learn how to manually set up Sentry in your Svelte app and capture your first events." sdk: sentry.javascript.svelte categories: - browser @@ -33,67 +33,56 @@ pnpm add @sentry/svelte ## Configure -Choose the features you want to configure, and this guide will show you how: - - +**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**. -To use the SDK, initialize it in your Svelte entry point before bootstrapping your app. In a typical Svelte project, that is your `main.js` or `main.ts` file. +### Initialize the SDK + +Initialize the SDK in your Svelte entry point before bootstrapping your app. In a typical project, that is your `main.js` or `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. ```javascript {tabTitle: Svelte v5+} {mdExpandTabs} {filename: main.js} import { mount } from "svelte"; import "./app.css"; import App from "./App.svelte"; - import * as Sentry from "@sentry/svelte"; -// Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", - integrations: [ - // ___PRODUCT_OPTION_START___ performance + // enables automatic instrumentation Sentry.browserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay 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: + // Additional integration configuration goes in here 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 + // Set trace propagation targets for your API requests tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], - // ___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/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 }); const app = mount(App, { @@ -106,47 +95,35 @@ export default app; ```javascript {tabTitle: Svelte v3-v4} {filename: main.js} import "./app.css"; import App from "./App.svelte"; - import * as Sentry from "@sentry/svelte"; -// Initialize the Sentry SDK here Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - // ___PRODUCT_OPTION_START___ performance + // enables Tracing Sentry.browserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay 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: + // Additional integration configuration goes in here 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 + // Set trace propagation targets for your API requests tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], - // ___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/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 }); const app = new App({ @@ -156,31 +133,29 @@ const app = new App({ export default app; ``` -### 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 - + -### Control the Data You Send to Sentry (Optional) +## Send Logs - + -## 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 the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it. +## 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 components. Clicking it will trigger an error for Sentry to capture. ```jsx {tabTitle:Svelte v5+} {mdExpandTabs} {filename:SomeComponent.svelte} -``` - -```jsx {tabTitle:Svelte v3/v4} {filename:SomeComponent.svelte} - -``` - - - - - - - - - - + - ### 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). @@ -260,15 +189,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 Svelte 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 Svelte 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 -- Make use of Svelte-specific features -- Learn how to manually capture errors +- Set up tunneling to avoid ad blockers from blocking Sentry events +- Explore Svelte-specific features @@ -277,6 +202,4 @@ Now's a good time to customize your setup and look into more advanced topics. Ou - - diff --git a/docs/platforms/javascript/guides/vue/index.mdx b/docs/platforms/javascript/guides/vue/index.mdx index 0485d8531af7a..fe85f766b3816 100644 --- a/docs/platforms/javascript/guides/vue/index.mdx +++ b/docs/platforms/javascript/guides/vue/index.mdx @@ -1,6 +1,6 @@ --- title: Vue -description: "Learn how to manually set up Sentry in your Vue app and capture your first errors." +description: "Learn how to manually set up Sentry in your Vue app and capture your first events." sdk: sentry.javascript.vue categories: - browser @@ -29,28 +29,30 @@ pnpm add @sentry/vue ## Configure -Choose the features you want to configure, and this guide will show you how: - - +**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**. -To initialize Sentry in your Vue application, add the following code snippet to your `main.js`. +### Initialize the SDK + +To initialize Sentry in your Vue application, add the code shown below to your `main.js`. + +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. -If you're creating more than one Vue 3 app within your application, check out how to initialize the SDK for [multiple apps](./features/multiple-apps/). +If you're creating more than one Vue 3 app within your application, see how to initialize the SDK for [multiple apps](./features/multiple-apps/). -```javascript {tabTitle:Vue 3} {filename:main.js} {3, 12-34} +```javascript {tabTitle:Vue 3} {filename:main.js} import { createApp } from "vue"; import { createRouter } from "vue-router"; import * as Sentry from "@sentry/vue"; @@ -65,49 +67,38 @@ const router = createRouter({ Sentry.init({ app, dsn: "___PUBLIC_DSN___", - integrations: [ - // ___PRODUCT_OPTION_START___ performance + // enables automatic instrumentation Sentry.browserTracingIntegration({ router }), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay 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: + // Additional integration configuration goes in here 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 + // Set trace propagation targets for your API requests 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 }); app.use(router); app.mount("#app"); ``` -```javascript {tabTitle:Vue 2} {filename:main.js} {3, 11-35} +```javascript {tabTitle:Vue 2} {filename:main.js} import Vue from "vue"; import Router from "vue-router"; import * as Sentry from "@sentry/vue"; @@ -122,40 +113,30 @@ Sentry.init({ Vue, dsn: "___PUBLIC_DSN___", integrations: [ - // ___PRODUCT_OPTION_START___ performance + // enables Tracing Sentry.browserTracingIntegration({ router }), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay + // enables Session Replay 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: + // Additional integration configuration goes in here 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 + // Set trace propagation targets for your API requests 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 }); // ... @@ -166,17 +147,16 @@ new Vue({ }).$mount("#app"); ``` -### Configuration for Late-Defined Vue Apps +### Configure Late-Defined Vue Apps -If your Vue application is not defined from the start, you can add error monitoring for Vue-specific errors later on. -To manually add the integration for late-defined Vue applications, update your `main.js` file: +If your Vue application is not defined from the start, add error monitoring for Vue-specific errors later. To manually add the integration for a late-defined Vue application, update your `main.js` file: ```javascript {filename:main.js} import * as Sentry from "@sentry/vue"; Sentry.init({ dsn: "...", - // Filter out default `Vue` integration + // Filter out the default Vue integration integrations: (integrations) => integrations.filter((integration) => integration.name !== "Vue"), }); @@ -189,100 +169,57 @@ const app = createApp({ Sentry.addIntegration(Sentry.vueIntegration({ app })); ``` -### Configuration for Pinia - -To capture Pinia state data, use `Sentry.createSentryPiniaPlugin()` and add it to your Pinia store instance. +### Configure Pinia -Learn more about the [Pinia Plugin](./features/pinia/) and its options. +To capture Pinia state data, use `Sentry.createSentryPiniaPlugin()` and add it to your Pinia store instance. Learn more about the [Pinia Plugin](./features/pinia/) and its options. ```javascript import { createPinia } from "pinia"; import { createSentryPiniaPlugin } from "@sentry/vue"; const pinia = createPinia(); - pinia.use(createSentryPiniaPlugin()); ``` -### 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 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 is capturing errors and creating issues in your Sentry project, add the following 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. - - - - -```javascript {filename:App.vue} -// ... - -// ... +## Send Application Metrics -export default { - // ... - methods: { - throwError() { - throw new Error('Sentry Error'); - } - } -}; -``` + - -### Tracing +## Verify Your Setup -To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for your code to execute. +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -Then, open the page in a browser and click the button to trigger a frontend error and performance trace. +Add a test button to one of your pages. Clicking it will trigger an error for Sentry to capture. ```javascript {filename:App.vue} -// ... -// ... + ``` - - - - - - - - - + ### View Captured Data in Sentry @@ -292,15 +229,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 Vue 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 Vue 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 -- Make use of Vue-specific features -- Learn how to manually capture errors +- Set up tunneling to avoid ad blockers from blocking Sentry events +- Explore Vue-specific features diff --git a/docs/platforms/javascript/guides/wasm/index.mdx b/docs/platforms/javascript/guides/wasm/index.mdx index 3514cc7d4182a..a16cd93d5e3e8 100644 --- a/docs/platforms/javascript/guides/wasm/index.mdx +++ b/docs/platforms/javascript/guides/wasm/index.mdx @@ -1,7 +1,7 @@ --- title: Wasm sdk: sentry.javascript.wasm -description: "Learn how to manually set up Sentry in your JavaScript application with WebAssembly modules and capture your first errors." +description: "Learn how to manually set up Sentry in your JavaScript application with WebAssembly modules and capture your first events." keywords: ["wasm", "webassembly"] categories: - browser @@ -21,14 +21,6 @@ categories: ## 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: @@ -47,7 +39,18 @@ pnpm add @sentry/browser @sentry/wasm ## Configure -To use the SDK, initialize it in your application's entry point before loading your WebAssembly modules. Sentry's Wasm integration enhances the Browser SDK and allows it to provide more detailed debug information for WebAssembly modules, including Debug IDs, Debug Files, Code IDs, Code Files and memory addresses. +**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**. + + + +To use the SDK, initialize it in your application's entry point before loading your WebAssembly modules. Sentry's Wasm integration enhances the Browser SDK and adds debug information for WebAssembly modules. + +The snippet also turns on: + +- Tracing: via `tracesSampleRate` and `browserTracingIntegration()` + +Don't need a feature? Remove its integration and options from the snippet. ```javascript import * as Sentry from "@sentry/browser"; @@ -57,137 +60,49 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - // ___PRODUCT_OPTION_START___ performance + // enables automatic instrumentation Sentry.browserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance wasmIntegration(), ], - // ___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/wasm/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, // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], - // ___PRODUCT_OPTION_END___ performance }); ``` -### 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 from your WebAssembly modules to your Sentry project. - -### Issues +## Send Logs -To verify that Sentry captures errors from WebAssembly modules and creates issues in your Sentry project, add a function to your WebAssembly module that you can then call to cause an error (for example, division by zero). + -Here's what this could look like in Rust: +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. -```rust -#[no_mangle] -pub extern "C" fn divide(a: i32, b: i32) -> i32 { - // This will cause a division by zero trap when b is 0 - a / b -} -``` - -Then add a button to one of your app pages that, when pressed, calls the WebAssembly function to throw an error. Here's a simple HTML button: - - - -```html - -``` +## Send Application Metrics -Here's the JavaScript that calls the WebAssembly function. Make sure that you adjust it for your JavaScript framework. Note that, depending on how you compile modules, you can either call the function directly or access it through the WebAssembly API. + - - Open your app in the browser and click the button you just created to trigger - an error in your WebAssembly module. - - -```javascript -function testWasmError() { - try { - // Assuming you already have your WebAssembly module loaded as 'wasmModule' - // Replace this with your actual WebAssembly module instance - - // depending on how your module is compiled, call function directly - const result = wasmModule.divide(10, 0); - // or via WebAssembly API - //const result = wasmModule.instance.exports.divide(10, 0); - } catch (e) { - Sentry.captureException(e); - } -} -``` - - -### Tracing - -To test your tracing configuration, add a function to your WebAssembly module that does some calculations. Here's what it could look like in Rust: - -```rust -#[no_mangle] -pub extern "C" fn compute_intensive_function(iterations: i32) -> i32 { - // Add some computation to make tracing more visible - let mut sum = 0; - for i in 0..iterations * 1000 { - sum += i; - } - sum -} -``` - -Next, add a new button to your app: +## Verify Your Setup -```html - -``` +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -Finally, create the JavaScript function that wraps your WebAssembly function calls in a Sentry span to measure the execution time. Again, make sure to adapt the code to fit your setup: +Call a WebAssembly function that triggers a trap, then capture the exception: ```javascript -function testWasmTracing() { - Sentry.startSpan({ op: "test", name: "Example Span" }, () => { - try { - // Assuming you already have your WebAssembly module loaded as 'wasmModule' - // Replace this with your actual WebAssembly module instance - - // depending on how your module is compiled, call function directly - const result = wasmModule.compute_intensive_function(1000); - // or via WebAssembly API - // const result = wasmModule.instance.exports.compute_intensive_function(1000); - console.log("Result:", result); - } catch (e) { - Sentry.captureException(e); - } - }); +try { + wasmModule.divide(10, 0); +} catch (error) { + Sentry.captureException(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). @@ -196,14 +111,9 @@ 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 JavaScript application with WebAssembly modules 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 JavaScript application with WebAssembly modules. Here's what to explore next: - Explore [practical guides](/get-started/guides/) on what to monitor, log, track, and investigate after setup -- Instrument your frontend and backend using our [SDKs](/) -- Continue to [customize your configuration](/platforms/javascript/guides/wasm/configuration/) -- Learn how to [manually capture errors](/platforms/javascript/guides/wasm/usage/) diff --git a/includes/quick-start-features-expandable.mdx b/includes/quick-start-features-expandable.mdx index 87832820c0cbf..ecb0e0d90b374 100644 --- a/includes/quick-start-features-expandable.mdx +++ b/includes/quick-start-features-expandable.mdx @@ -18,7 +18,7 @@ import { FeatureInfo } from "sentry-docs/components/featureInfo"; /> - + - + -Choose the features you want to configure, and this guide will show you how: - - - @@ -19,47 +8,208 @@ Choose the features you want to configure, and this guide will show you how: ## Configure -### Initialize the Sentry SDK +**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**. - + -### Add Readable Stack Traces With Source Maps (Optional) +### Initialize the SDK - +Initialize Sentry as early as possible in your application's lifecycle. Use the tab that matches how you installed the SDK (npm, Loader, or CDN). -### Avoid Ad Blockers With Tunneling (Optional) +The snippet also turns on: - +- Tracing: via `browserTracingIntegration()` and `tracesSampleRate` +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` -### Control the Data You Send to Sentry (Optional) + + +Remove its integration and options from the `Sentry.init` snippet. Depending on how you installed the SDK, you may need one more step: +- **npm:** No additional steps. +- **Loader script:** Also turn off the feature in your Sentry project settings, then replace the loader script in your project with the updated one. +- **CDN bundle:** Also switch to a bundle that includes only the features you need. See the list of available bundles. + + + +```javascript {tabTitle:npm} +import * as Sentry from "@sentry/browser"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + + // Alternatively, use `process.env.npm_package_version` for a dynamic release version + // if your build tool supports it. + release: "my-project-name@2.3.12", + integrations: [ + // enables automatic instrumentation + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + // enables User Feedback + Sentry.feedbackIntegration({ + // Additional integration configuration goes in here + colorScheme: "system", + }), + ], + + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. + tracesSampleRate: 1.0, + + // Set trace propagation targets for your API requests + tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], + + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() + replaysSessionSampleRate: 0.1, + replaysOnErrorSampleRate: 1.0, +}); +``` + +```html {tabTitle:Loader} + + + +``` + +```html {tabTitle:CDN} + + + +``` + +### Add Readable Stack Traces With Source Maps + + + +### Control the Data You Send to Sentry +## Send Logs + + + +If you're already logging with `console` or [Consola](https://github.com/unjs/consola), you can capture those logs with our console integrations. + + +## Send Application Metrics + + + ## Verify Your Setup - +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. Open the page in a browser and click the button to trigger an error for Sentry to capture. + +```html + + + +``` + + ### 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). +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 JavaScript 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 JavaScript 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](/) -- Learn how to [manually capture errors](/platforms/javascript/usage/) -- Continue to [customize your configuration](/platforms/javascript/configuration/) -- Get familiar with [Sentry's product features](/product/) like tracing, insights, and alerts +- Set up tunneling to avoid ad blockers from blocking Sentry events -- Find various support topics in troubleshooting +- Find various topics in Troubleshooting - [Get support](https://www.sentry.help/en/) diff --git a/platform-includes/getting-started-config/javascript.node.mdx b/platform-includes/getting-started-config/javascript.node.mdx index 334bd8776680e..f3797829ad2b4 100644 --- a/platform-includes/getting-started-config/javascript.node.mdx +++ b/platform-includes/getting-started-config/javascript.node.mdx @@ -1,69 +1,43 @@ ```javascript {tabTitle:CommonJS} {filename: instrument.js} const Sentry = require("@sentry/node"); -// ___PRODUCT_OPTION_START___ profiling const { nodeProfilingIntegration } = require("@sentry/profiling-node"); -// ___PRODUCT_OPTION_END___ profiling - Sentry.init({ dsn: "___PUBLIC_DSN___", - // ___PRODUCT_OPTION_START___ profiling integrations: [ // Add our Profiling integration 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/guides/node/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 - // ___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 }); ``` ```javascript {tabTitle:ESM} {filename: instrument.mjs} import * as Sentry from "@sentry/node"; -// ___PRODUCT_OPTION_START___ profiling import { nodeProfilingIntegration } from "@sentry/profiling-node"; -// ___PRODUCT_OPTION_END___ profiling // Ensure to call this before importing any other modules! Sentry.init({ dsn: "___PUBLIC_DSN___", - // ___PRODUCT_OPTION_START___ profiling - integrations: [ // Add our Profiling integration 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/guides/node/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 - // ___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 }); ``` diff --git a/platform-includes/getting-started-install/javascript.mdx b/platform-includes/getting-started-install/javascript.mdx index bb50e9730ce62..088d66987dda2 100644 --- a/platform-includes/getting-started-install/javascript.mdx +++ b/platform-includes/getting-started-install/javascript.mdx @@ -20,12 +20,11 @@ pnpm add @sentry/browser In Sentry, go to **Settings > Projects > (select project) > SDK Setup > [Loader Script](https://sentry.io/orgredirect/organizations/:orgslug/settings/projects/:projectId/loader-script/)**. -Enable the features you want (for example, Tracing or Session Replay), copy the script tag, and place it before all other scripts in your app. +Enable Tracing, Session Replay, Logs and Metrics, and User Feedback. Then, copy the script tag and place it before all other scripts in your app. #### Option 3: CDN Bundle -Sentry provides different bundles that include specific feature combinations. Go to our list of [available bundles](/platforms/javascript/install/loader/#cdn) and copy the one that fits your needs. -Next, place the script tag before all other scripts in your app. +Sentry provides bundles with different feature combinations. In this guide, we'll use the [full bundle with all features](/platforms/javascript/install/loader/#full-bundle-with-all-features). Copy the script tag and place it before all other scripts in your app. If you're updating your Sentry SDK to the latest version, check out our diff --git a/platform-includes/getting-started-install/javascript.node.mdx b/platform-includes/getting-started-install/javascript.node.mdx index d0c4e2e161466..36392fd8f473a 100644 --- a/platform-includes/getting-started-install/javascript.node.mdx +++ b/platform-includes/getting-started-install/javascript.node.mdx @@ -1,21 +1,3 @@ - - -```bash {tabTitle:npm} -npm install @sentry/node -``` - -```bash {tabTitle:yarn} -yarn add @sentry/node -``` - -```bash {tabTitle:pnpm} -pnpm add @sentry/node -``` - - - - - ```bash {tabTitle:npm} npm install @sentry/node @sentry/profiling-node --save ``` @@ -27,5 +9,3 @@ yarn add @sentry/node @sentry/profiling-node ```bash {tabTitle:pnpm} pnpm add @sentry/node @sentry/profiling-node ``` - - diff --git a/platform-includes/getting-started-logs/javascript.mdx b/platform-includes/getting-started-logs/javascript.mdx new file mode 100644 index 0000000000000..36d41f2a986c9 --- /dev/null +++ b/platform-includes/getting-started-logs/javascript.mdx @@ -0,0 +1,16 @@ +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can pass any attributes you want and search or filter by them later. +See Set Up Logs for all available logging methods and the syntax for formatting messages. + +```javascript +Sentry.logger.info("User example action completed"); + +Sentry.logger.warn("Slow operation detected", { + operation: "data_fetch", + duration: 3500, +}); + +Sentry.logger.error("Validation failed", { + form_field: "email", + reason: "Invalid email", +}); +``` diff --git a/platform-includes/getting-started-metrics/javascript.mdx b/platform-includes/getting-started-metrics/javascript.mdx new file mode 100644 index 0000000000000..1b54adb67bdf3 --- /dev/null +++ b/platform-includes/getting-started-metrics/javascript.mdx @@ -0,0 +1,13 @@ +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can pass any attributes you want and search or filter by them later. +See Set Up Metrics for all available metric types and configuration options. + +```javascript +Sentry.metrics.count("checkout.failed", 1); + +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); + +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, +}); +``` diff --git a/platform-includes/getting-started-node/javascript.mdx b/platform-includes/getting-started-node/javascript.mdx index 6b1a0e27256a2..6494a33f2dd07 100644 --- a/platform-includes/getting-started-node/javascript.mdx +++ b/platform-includes/getting-started-node/javascript.mdx @@ -4,25 +4,24 @@ ## 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** and **Profiling**. + + + ### Initialize the Sentry SDK -To import and initialize Sentry, create a file named `instrument.(js|mjs)` in the root directory of your project and add the following code: +To import and initialize Sentry, create a file named `instrument.(js|mjs)` in the root directory of your project and add the code shown below. + +The snippet also turns on: +- Tracing: via `tracesSampleRate` +- Profiling: via `profileSessionSampleRate` and `nodeProfilingIntegration()` @@ -40,14 +39,29 @@ If you are using a bundler like vite, you can also -### 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 +## Send Logs + + + +If you're already logging with another library, use an integration to capture those logs as Sentry Logs automatically: +- `consoleLoggingIntegration` for `console` calls +- Consola +- Pino + +## Send Application Metrics + + + +On Node.js, `nodeRuntimeMetricsIntegration` also collects runtime health metrics automatically. + ## Verify Your Setup Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. @@ -62,16 +76,11 @@ Finally, head over to your project on [Sentry.io](https://sentry.io/) to view th ## Next Steps -At this point, you should have integrated Sentry into your application, which 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 Nest.js 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 frontend using one of our [frontend SDKs](/) -- Learn how to manually capture errors -- Continue to customize your 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-verify/javascript.express.mdx b/platform-includes/getting-started-verify/javascript.express.mdx index 8b44eea158599..912a0045585aa 100644 --- a/platform-includes/getting-started-verify/javascript.express.mdx +++ b/platform-includes/getting-started-verify/javascript.express.mdx @@ -1,40 +1,7 @@ -### Issues - -First, let's make sure Sentry is correctly capturing errors and creating issues in your project. Add the following code snippet to your main application file; it defines a route that will deliberately trigger an error when called: +Add an intentional error to your main application file that Sentry will capture: ```javascript app.get("/debug-sentry", function mainHandler(req, res) { throw new Error("My first Sentry error!"); }); ``` - - - -### Tracing - -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: - -```javascript -app.get("/debug-sentry", async (req, res) => { - await Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - async () => { - await new Promise((resolve) => setTimeout(resolve, 100)); - throw new Error("My first Sentry error!"); - } - ); -}); -``` - - - - - - - - - - diff --git a/platform-includes/getting-started-verify/javascript.fastify.mdx b/platform-includes/getting-started-verify/javascript.fastify.mdx index 32b69ad9f29d8..912a0045585aa 100644 --- a/platform-includes/getting-started-verify/javascript.fastify.mdx +++ b/platform-includes/getting-started-verify/javascript.fastify.mdx @@ -1,40 +1,7 @@ -### Issues - -First, let's make sure Sentry is correctly capturing errors and creating issues in your project. Add the following code snippet to your main application file; it defines a route that will deliberately trigger an error when called: +Add an intentional error to your main application file that Sentry will capture: ```javascript app.get("/debug-sentry", function mainHandler(req, res) { throw new Error("My first Sentry error!"); }); ``` - - - -### Tracing - -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: - -```javascript -app.get("/debug-sentry", async (request, reply) => { - await Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - async () => { - await new Promise((resolve) => setTimeout(resolve, 100)); // Wait for 100ms - throw new Error("My first Sentry error!"); - } - ); -}); -``` - - - - - - - - - - diff --git a/platform-includes/getting-started-verify/javascript.hapi.mdx b/platform-includes/getting-started-verify/javascript.hapi.mdx index 7502f98762e10..403e85ec1969c 100644 --- a/platform-includes/getting-started-verify/javascript.hapi.mdx +++ b/platform-includes/getting-started-verify/javascript.hapi.mdx @@ -1,6 +1,4 @@ -### Issues - -First, let's make sure Sentry is correctly capturing errors and creating issues in your project. Add the following code snippet to your main application file; it defines a route that will deliberately trigger an error when called: +Add an intentional error to your main application file that Sentry will capture: ```javascript server.route({ @@ -11,38 +9,3 @@ server.route({ }, }); ``` - - - -### Tracing - -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: - -```javascript -server.route({ - method: "GET", - path: "/debug-sentry", - handler: async (request, h) => { - await Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - async () => { - await new Promise((resolve) => setTimeout(resolve, 100)); - throw new Error("My first Sentry error!"); - } - ); - }, -}); -``` - - - - - - - - - - diff --git a/platform-includes/getting-started-verify/javascript.koa.mdx b/platform-includes/getting-started-verify/javascript.koa.mdx index 00cf86c161385..41bc1d6228248 100644 --- a/platform-includes/getting-started-verify/javascript.koa.mdx +++ b/platform-includes/getting-started-verify/javascript.koa.mdx @@ -1,6 +1,4 @@ -### Issues - -To check that Sentry captures errors, add this middleware before your other middleware in your main application file. Then visit `/debug-sentry` to trigger a test error: +Add this middleware before your other middleware in your main application file. Then visit `/debug-sentry` to trigger a test error: ```javascript app.use(async (ctx, next) => { @@ -10,38 +8,3 @@ app.use(async (ctx, next) => { await next(); }); ``` - - -### Tracing - -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: - -```javascript -app.use(async (ctx, next) => { - if (ctx.path !== "/debug-sentry") { - await next(); - return; - } - - await Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - async () => { - await new Promise((resolve) => setTimeout(resolve, 100)); - throw new Error("My first Sentry error!"); - } - ); -}); -``` - - - - - - - - - - diff --git a/platform-includes/getting-started-verify/javascript.node.mdx b/platform-includes/getting-started-verify/javascript.node.mdx index dd3623dd571e7..736f01a457988 100644 --- a/platform-includes/getting-started-verify/javascript.node.mdx +++ b/platform-includes/getting-started-verify/javascript.node.mdx @@ -1,6 +1,4 @@ -### Issues - -First, let's verify that Sentry captures errors and creates issues in your Sentry project. Add the following code snippet to your main application file, which will call an undefined function, triggering an error that Sentry will capture: +Add an intentional error to your main application file that Sentry will capture: ```javascript setTimeout(() => { @@ -11,36 +9,3 @@ setTimeout(() => { } }, 99); ``` - - -### Tracing - -To test your tracing configuration, update the previous code snippet by starting a performance trace to measure the time it takes for the execution of your code: - -```javascript -Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - () => { - setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } - }, 99); - } -); -``` - - - - - - - - - - diff --git a/platform-includes/sentry-init/install-command/javascript.react-router.mdx b/platform-includes/sentry-init/install-command/javascript.react-router.mdx index 18b0452388fa3..923a812e3b83e 100644 --- a/platform-includes/sentry-init/install-command/javascript.react-router.mdx +++ b/platform-includes/sentry-init/install-command/javascript.react-router.mdx @@ -1,6 +1,6 @@ Run the Sentry init command in your project directory to automatically configure Sentry in your React Router v7 Framework Mode application. -The command guides you through setup and asks which optional Sentry features you want to enable beyond error monitoring. +The command guides you through setup and asks which optional Sentry features you want to enable 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@latest init