From ba10e82f3c066c7bcb8b6f74a38fc52dd9e96e84 Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Wed, 14 Oct 2026 21:41:05 +0000 Subject: [PATCH 01/19] feat(docs): Apply new quick start template to React, Vue, Svelte, Solid, and Gatsby Co-Authored-By: Shannon Anahata --- .../javascript/guides/gatsby/index.mdx | 163 +++++---- .../javascript/guides/react/index.mdx | 327 +++++++----------- .../javascript/guides/solid/index.mdx | 167 +++++---- .../javascript/guides/svelte/index.mdx | 214 +++++------- .../platforms/javascript/guides/vue/index.mdx | 223 ++++++------ 5 files changed, 469 insertions(+), 625 deletions(-) diff --git a/docs/platforms/javascript/guides/gatsby/index.mdx b/docs/platforms/javascript/guides/gatsby/index.mdx index dc90aa371da114..bf2db5cd65cdd3 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 @@ -23,7 +23,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`. @@ -74,7 +74,7 @@ const config: GatsbyConfig = { plugins: [ // ... { - resolve: "@sentry/gatsby" + resolve: "@sentry/gatsby", }, ], }; @@ -88,26 +88,26 @@ 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. For this, create a new file `sentry.config.(js|ts)` in your project root and add the following: +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()` + +Don't need a feature? Remove its integration and options from the snippet. @@ -117,39 +117,31 @@ import * as Sentry from "@sentry/gatsby"; 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, - // ___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 }); ``` @@ -157,65 +149,84 @@ Sentry.init({ -### 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 +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. -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. +If you're already logging with `console`, capture those calls with the console integration. + +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", +}); +``` + + + + -### Issues +## Send Application Metrics -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. - +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 {filename:index.(jsx|tsx)} - +```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" }, +}); ``` - -### Tracing +## Verify Your Setup + +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 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. +Add a test button to one of your pages. Clicking it will trigger an error for Sentry to capture. @@ -224,9 +235,7 @@ Then, open the page in a browser and click the button to trigger a frontend erro -``` - - - -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: - -```javascript -Sentry.metrics.count("checkout.failed", 1); -Sentry.metrics.gauge("queue.depth", 42); -Sentry.metrics.distribution("api_latency", 187, { - unit: "millisecond", -}); -``` - - - + -**1. Enable debug mode** to see SDK activity in the console: +### View Captured Data in Sentry -```javascript {filename:instrument.js} -Sentry.init({ - dsn: "___PUBLIC_DSN___", - debug: true, -}); -``` - -**2. Check your DSN** — Ensure it's correctly copied from your [Sentry project settings](https://sentry.io/orgredirect/organizations/:orgslug/settings/projects/:projectId/keys/). +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). -**3. Disable ad blockers** — Some ad blockers prevent Sentry from sending events. See [tunneling](#avoid-ad-blockers-with-tunneling-optional) for a workaround. + -**4. Check your quota** — View your [usage stats](https://sentry.io/orgredirect/organizations/:orgslug/stats/) to ensure you haven't exceeded your plan limits. +## Next Steps -For more help, see the Troubleshooting page. +At this point, you should have 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 +- Set up Agent Tracing to monitor your AI systems +- Set up tunneling to avoid ad blockers from blocking Sentry events -## Next Steps + -You've successfully integrated Sentry into your React application! Here's what to explore next: +- Find various topics in Troubleshooting +- [Get support](https://www.sentry.help/en/) -- 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 5e2e9ca24fa459..bb6941c3094630 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 @@ -46,79 +46,66 @@ 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: +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()` + +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 Tracing 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 }); } @@ -150,65 +137,84 @@ 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 - + -### Control the Data You Send to Sentry (Optional) +## Send Logs - + + + -## Verify Your Setup +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. -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. +If you're already logging with `console`, capture those calls with the console integration. + +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", +}); +``` + + + + -### Issues +## Send Application Metrics -To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button to one of your pages. +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. - - Then, open the page in a browser and click the button to trigger a frontend - error. - - - +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" }, +}); ``` - -### Tracing +## Verify Your Setup + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -To test your tracing configuration, update the previous code snippet to start a trace to measure the time it takes for the execution of your code. - -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. @@ -217,11 +223,7 @@ Then, open the page in a browser and click the button to trigger a frontend erro -``` +```javascript +Sentry.metrics.count("checkout.failed", 1); -```jsx {tabTitle:Svelte v3/v4} {filename:SomeComponent.svelte} - +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); + +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, +}); ``` - -### Tracing +## Verify Your Setup + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for the execution of your code. - -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 components. Clicking it will trigger an error for Sentry to capture. @@ -255,11 +241,7 @@ Then, open the page in a browser and click the button to trigger a frontend erro -// ... +```javascript +Sentry.metrics.count("checkout.failed", 1); -export default { - // ... - methods: { - throwError() { - throw new Error('Sentry Error'); - } - } -}; +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); + +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, +}); ``` - -### Tracing +## Verify Your Setup + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for your code to execute. - -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 @@ -358,15 +335,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 Agent Tracing to monitor your AI systems +- Set up tunneling to avoid ad blockers from blocking Sentry events From dd13d9a09b7e202b678e3e7b75aa69f5a294c63d Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Wed, 14 Oct 2026 21:42:56 +0000 Subject: [PATCH 02/19] feat(docs): Apply new quick start template to SolidStart, Capacitor, Electron, Wasm, Astro, and React Router Co-Authored-By: Shannon Anahata --- .../javascript/guides/astro/index.mdx | 249 ++++++++- .../javascript/guides/capacitor/index.mdx | 525 ++++++++++++------ .../javascript/guides/electron/index.mdx | 160 ++---- .../javascript/guides/react-router/index.mdx | 227 +++++--- .../javascript/guides/solidstart/index.mdx | 196 +++---- .../javascript/guides/wasm/index.mdx | 197 ++----- 6 files changed, 895 insertions(+), 659 deletions(-) diff --git a/docs/platforms/javascript/guides/astro/index.mdx b/docs/platforms/javascript/guides/astro/index.mdx index 79f9f86d22fd2a..d333dba119d764 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,239 @@ supported**. ## Install -Choose the features you want to configure, and this guide will show you how: +### Install the Sentry SDK - + + + + +Run the Astro integration wizard to add Sentry to your project, then install the Profiling package: + + + + +```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 + + + + + +The Astro integration wizard configures the SDK in your project. The snippets below show the manual configuration for the client and server. Set the client DSN in `sentry.client.config.ts` and the server DSN in `sentry.server.config.ts`. + +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 snippet. + + + + +```typescript {filename:sentry.client.config.ts} +import * as Sentry from "@sentry/astro"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + integrations: [ + 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 {filename:sentry.server.config.ts} +import * as Sentry from "@sentry/astro"; +import { nodeProfilingIntegration } from "@sentry/profiling-node"; + +Sentry.init({ + dsn: "___PUBLIC_DSN___", + 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. + 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 + + + +### Control the Data You Send to Sentry + + + +## Send Logs + + + + + +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. + +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. + +See Set Up Logs for all available logging methods and message formatting options. + + + + +```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", +}); +``` + + + + + +## Send Application Metrics + + + + + +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can add searchable attributes to each metric. + +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 + +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/capacitor/index.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx index e80630e6733c3c..99644ad35a4443 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 @@ -59,16 +59,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**. @@ -80,214 +72,389 @@ 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. +The snippets also turn on: + +- Tracing: via `tracesSampleRate` +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` + +Don't need a feature? Remove its integration and options from the snippet. + 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. - +```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 Tracing. + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + 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, + }, + ], +}) +``` + +```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 Tracing. + new Sentry.BrowserTracing(), + // enables Session Replay + new Sentry.Replay(), + 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, + }, + ], +}) +``` + +```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 Tracing. + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + 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 +); +``` + +```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 Tracing. + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + 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 +); +``` + +```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 Tracing. + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + 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 Tracing. + Sentry.browserTracingIntegration(), + // enables Session Replay + Sentry.replayIntegration(), + 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, +}); +``` -### Add Readable Stack Traces With Source Maps (Optional) +### Add Readable Stack Traces With Source Maps -### Provide Native Debug Information for iOS (Optional) +### Provide Native Debug Information for iOS 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) +### 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. - -### Issues +## Send Logs -To verify that Sentry captures errors and creates issues in your Sentry project, add the following test button and logic. +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. - - Open the page in a browser and click the button to trigger a frontend error. - +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. - +See Set Up Logs for all available logging methods and message formatting options. -```javascript {tabTitle: Angular 12, 13, 14+} {mdExpandTabs} -@Component({ - selector: "app-root", - template: ` - - ` -}) -class AppComponent { - // ... - throwError(): void { - throw new Error("Sentry Test Error"); - } -} -``` - -```javascript {tabTitle: React} - -``` - -```javascript {tabTitle: Vue} - - -export default { - // ... - methods: { - throwError() { - throw new Error('Sentry Error'); - } - } -}; -``` - -```html {tabTitle: Nuxt} - - - -``` - -```html {tabTitle: Other} - +```javascript +Sentry.logger.info("User example action completed"); - +Sentry.logger.error("Validation failed", { + form_field: "email", + reason: "Invalid email", +}); ``` +## 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 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. +Add a test button to an existing page. Clicking it throws an error that Sentry captures: + + -```javascript {tabTitle: Angular 12, 13, 14+} {mdExpandTabs} -import * as Sentry from "@sentry/capacitor"; - -@Component({ - selector: "app-root", - template: ` - - ` -}) -class AppComponent { - // ... - throwError(): void { - Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, () => { - throw new Error("Sentry Test Error"); - }); - } -} -``` - -```javascript {tabTitle: React} -import * as Sentry from "@sentry/capacitor"; - -; -``` - -```javascript {tabTitle: Vue} -import * as Sentry from "@sentry/capacitor"; - - - -export default { - // ... - methods: { - throwError() { - Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, async () => { - throw new Error("Sentry Error"); - }); - } - } -}; -``` - -```html {tabTitle: Nuxt} - - - -``` - -```html {tabTitle: Other} - +```html + ``` @@ -296,14 +463,6 @@ export default { - - - - - - - - ### 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). @@ -312,15 +471,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 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/) +- Use Sentry with Ionic +- Upload iOS dSYM files - Find various topics in Troubleshooting diff --git a/docs/platforms/javascript/guides/electron/index.mdx b/docs/platforms/javascript/guides/electron/index.mdx index 354c8b2292fcac..4b24d59ee91ef4 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 @@ -41,16 +41,8 @@ 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**. @@ -62,7 +54,15 @@ You should initialize the SDK in both the `main` process and every `renderer` pr -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 and renderer snippets also turn on: + +- Tracing: via `tracesSampleRate` +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` + +Don't need a feature? Remove its integration and options from the snippet. @@ -72,16 +72,15 @@ 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(), + ], }); ``` @@ -105,37 +104,24 @@ import * as Sentry from "@sentry/electron/renderer"; Sentry.init({ integrations: [ - // ___PRODUCT_OPTION_START___ performance Sentry.browserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay Sentry.replayIntegration(), - // ___PRODUCT_OPTION_END___ session-replay - // ___PRODUCT_OPTION_START___ 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 }); ``` @@ -242,103 +228,89 @@ 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 +## Send Logs -**Main process error** +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. + +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. -Add an event listener that throws an error in your main process: +See Set Up Logs for all available logging methods and message formatting options. ```javascript -import { app } from "electron"; -import * as Sentry from "@sentry/electron/main"; +Sentry.logger.info("User example action completed"); -app.on("ready", () => { - throw new Error("Sentry test error in main process"); +Sentry.logger.warn("Slow operation detected", { + operation: "data_fetch", + duration: 3500, +}); + +Sentry.logger.error("Validation failed", { + form_field: "email", + reason: "Invalid email", }); ``` + +## Send Application Metrics + -**Renderer process error** +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can add searchable attributes to each metric. -Add a test button in one of your HTML pages: +See Set Up Metrics for all available metric types and configuration options. -```html {filename: index.html} - - - -``` - - - - - - +```javascript +Sentry.metrics.count("checkout.failed", 1); -Then, in your renderer, add the following: +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); - - 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"); +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, }); ``` +## 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 in your renderer, start a trace to measure the time it takes to execute your code. - -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"); }); ``` @@ -346,16 +318,6 @@ document.getElementById("testError").addEventListener("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). @@ -364,15 +326,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 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 +- Learn more about Logs diff --git a/docs/platforms/javascript/guides/react-router/index.mdx b/docs/platforms/javascript/guides/react-router/index.mdx index 28f843a7165071..da31719b2969ce 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 @@ -32,38 +32,46 @@ If you're using React Router in data or declarative mode, follow the instruction -## Configure +### Install Profiling -If you prefer to configure Sentry manually, here are the configuration files the wizard would create: +The manual server configuration below enables Profiling. Install its package with your package manager: -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/). - -Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. - - +```bash {tabTitle:npm} +npm install @sentry/profiling-node +``` + +```bash {tabTitle:yarn} +yarn add @sentry/profiling-node +``` + +```bash {tabTitle:pnpm} +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**. +If you prefer to configure Sentry manually, here are the configuration files the wizard would create: + ### Client-Side Configuration -The wizard creates a client configuration file that initializes the Sentry SDK in your browser. +The wizard creates a client configuration file that initializes the Sentry SDK in your browser. This manual example includes your DSN and enables the supported browser features. + +The snippet also turns on: + +- Tracing: via `tracesSampleRate` and `reactRouterTracingIntegration()` +- Session Replay: via `replayIntegration()`, sampled with `replaysSessionSampleRate` and `replaysOnErrorSampleRate` +- User Feedback: via `feedbackIntegration()` -The configuration includes your DSN (Data Source Name), which connects your app to your Sentry project, and enables the features you selected during installation. +Don't need a feature? Remove its integration and options from the snippet. @@ -76,47 +84,25 @@ 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 + // enables Session Replay 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 + // enables User Feedback + Sentry.feedbackIntegration({ colorScheme: "system" }), ], - // ___PRODUCT_OPTION_START___ performance - // Set tracesSampleRate to 1.0 to capture 100% - // of transactions for tracing. - // We recommend adjusting this value in production - // Learn more at - // https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/options/#traces-sample-rate + // Enables Tracing. + // Set to 1.0 to capture 100% of spans for tracing. + // We recommend reducing this value in production. tracesSampleRate: 1.0, - - // 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 + // Capture replays for 10% of all sessions, + // plus for 100% of sessions with an error + // Requires Sentry.replayIntegration() replaysSessionSampleRate: 0.1, replaysOnErrorSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ session-replay }); startTransition(() => { @@ -137,41 +123,34 @@ startTransition(() => { ### Server-Side Configuration -The wizard also creates a server configuration file for Node.js runtime. +The wizard also creates a server configuration file for the Node.js runtime. Profiling requires `@sentry/profiling-node`. + +The server snippet also turns on: + +- Tracing: via `tracesSampleRate` +- Profiling: via `nodeProfilingIntegration()` and `profileSessionSampleRate` -For more advanced configuration options or to set up Sentry manually, check out our [manual setup guide](/platforms/javascript/guides/react-router/manual-setup/). +Don't need a feature? Remove its integration and options from the snippet. ```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 + + // 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. profileSessionSampleRate: 1.0, - // ___PRODUCT_OPTION_END___ profiling }); ``` @@ -179,30 +158,100 @@ Sentry.init({ -### Control the Data You Send to Sentry (Optional) +### Control the Data You Send to Sentry -## Verify Your Setup +## Send Logs -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: +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. -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. +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. - +See Set Up Logs for all available logging methods and message formatting options. -Clicking the button triggers an error that Sentry captures for you. The example also demonstrates how to test performance tracing. + + - +```javascript +Sentry.logger.info("User example action completed"); -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. +Sentry.logger.warn("Slow operation detected", { + operation: "data_fetch", + duration: 3500, +}); - +Sentry.logger.error("Validation failed", { + form_field: "email", + reason: "Invalid email", +}); +``` - + + + + +## Send Application Metrics + + + + + +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can add searchable attributes to each metric. + +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 + +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: + + + + + +Clicking this button throws an error that Sentry captures: + + + + +```tsx + +``` + + + + + + ### View Captured Data in Sentry @@ -212,15 +261,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/solidstart/index.mdx b/docs/platforms/javascript/guides/solidstart/index.mdx index c5334aecab174a..b45f0471922283 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 @@ -66,6 +53,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. @@ -80,60 +72,48 @@ The examples in this guide will use TypeScript with a `src` folder structure. Ma -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. - - If you're using Solid Router, make sure to import and add the - `solidRouterBrowserTracingIntegration` to enable tracing in your app. - +The snippet also turns on: + +- Tracing: via `tracesSampleRate` and the Solid Router instrumentation in the next steps +- 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 solidRouterBrowserTracingIntegration(), - // ___PRODUCT_OPTION_END___ performance - // ___PRODUCT_OPTION_START___ session-replay // Replay may only be enabled for the client-side Sentry.replayIntegration(), - // ___PRODUCT_OPTION_END___ session-replay - // ___PRODUCT_OPTION_START___ 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")); @@ -161,15 +141,13 @@ 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 }); }); ``` @@ -179,15 +157,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 }); ``` @@ -270,8 +244,6 @@ export default defineConfig( - - ### Configure Solid Router @@ -302,7 +274,6 @@ export default function App() { - ### Run Your Application @@ -368,7 +339,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 @@ -457,99 +428,92 @@ SENTRY_AUTH_TOKEN="___ORG_AUTH_TOKEN___" -### Avoid Ad Blockers With Tunneling (Optional) - - - -### Control the Data You Send to Sentry (Optional) +### Control the Data You Send to Sentry -## Verify Your Setup - -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - -### Issues +## Send Logs -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. +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. - - Then, open the page in a browser and click the button to trigger a frontend - error. - +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. + +See Set Up Logs for all available logging methods and message formatting options. - ```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", +}); ``` - - -### Tracing +## Send Application Metrics -To test tracing, create a test API route like `src/routes/sentry-test.tsx`: +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can add searchable attributes to each metric. + +See Set Up Metrics for all available metric types and configuration options. -```javascript {filename:sentry-test.tsx} -export async function GET() { - throw new Error("Sentry Example API Route Error"); -} +```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 + +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 ``` @@ -557,16 +521,6 @@ Then, open the page in the browser and click the button to trigger a frontend er - - - - - - - - - - ### 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). @@ -575,15 +529,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/wasm/index.mdx b/docs/platforms/javascript/guides/wasm/index.mdx index 39ed63ac447709..81021cb75457c6 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 @@ -58,11 +50,22 @@ pnpm add @sentry/browser @sentry/wasm ## 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**. + + + -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. +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. @@ -75,23 +78,17 @@ Sentry.init({ dsn: "___PUBLIC_DSN___", integrations: [ - // ___PRODUCT_OPTION_START___ performance 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 }); ``` @@ -99,158 +96,87 @@ Sentry.init({ -### 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: - - - - -```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 -} -``` - - - - - - +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. -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: +If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. - +See Set Up Logs for all available logging methods and message formatting options. -```html - -``` - - - - - - - -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 +Sentry.logger.info("User example action completed"); - - +Sentry.logger.warn("Slow operation detected", { + operation: "data_fetch", + duration: 3500, +}); -```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); - } -} +Sentry.logger.error("Validation failed", { + form_field: "email", + reason: "Invalid email", +}); ``` - - -### Tracing +## Send Application Metrics -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: +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can add searchable attributes to each metric. + +See Set Up Metrics for all available metric types and configuration options. -```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: +```javascript +Sentry.metrics.count("checkout.failed", 1); - - +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); -```html - +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, +}); ``` + +## Verify Your Setup +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); } ``` @@ -258,16 +184,6 @@ function testWasmTracing() { - - - - - - - - - - ### 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). @@ -276,14 +192,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 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/) +- Set up Agent Tracing to monitor your AI systems +- Set up tunneling to avoid ad blockers blocking Sentry events From cf9c403ba5c66026d2f413dc3bf2afb30ad617e1 Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Wed, 14 Oct 2026 21:42:22 +0000 Subject: [PATCH 03/19] feat(docs): Apply new quick start template to Azure Functions, Bun, Cloudflare, Deno, Effect, and Elysia Co-Authored-By: Shannon Anahata --- .../guides/azure-functions/index.mdx | 153 +++++++------- .../platforms/javascript/guides/bun/index.mdx | 122 ++++++------ .../javascript/guides/cloudflare/index.mdx | 151 +++++++------- .../javascript/guides/deno/index.mdx | 121 ++++++------ .../javascript/guides/effect/index.mdx | 187 ++++++------------ .../javascript/guides/elysia/index.mdx | 122 ++++++------ 6 files changed, 381 insertions(+), 475 deletions(-) diff --git a/docs/platforms/javascript/guides/azure-functions/index.mdx b/docs/platforms/javascript/guides/azure-functions/index.mdx index c15efbdf34fbc7..8d0432f04c0487 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 @@ -42,44 +34,43 @@ 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**. + + + Make sure to initialize Sentry at the top of your function file before importing any other modules: +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. + ```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 @@ -125,64 +116,76 @@ 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. + + + + +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. If you already use `console`, Consola, Pino, or Winston, see the console and Consola, Pino, and Winston integrations. + +See Set Up Logs for logging methods and message formatting. + + + -### Issues +```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" }); +``` + + + + + +## Send Application Metrics -Let's verify that Sentry captures errors and creates issues in your Sentry project. Add an intentional error in your function: +Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. + +See Set Up Metrics for metric types and configuration options. -```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); - }); - } +```javascript +Sentry.metrics.count("checkout.failed", 1); - // Wait for the event to be sent before the function execution ends - await Sentry.flush(2000); +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); - context.res = { - status: 500, - body: "Test error sent to Sentry.", - }; -}; +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, +}); ``` - -### Tracing +## Verify Your Setup + +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: @@ -191,18 +194,12 @@ To test tracing, update your function to include a custom span: 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); + } }; ``` @@ -210,16 +207,6 @@ module.exports = async function (context, req) { - - - - - - - - - - ### 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). @@ -228,14 +215,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 d70ce4d8aa9aca..572596628df1dc 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 @@ -42,6 +34,11 @@ 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 @@ -51,6 +48,12 @@ bun add @sentry/bun 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: +The snippet also turns on: + +- Tracing: via `tracesSampleRate` + +Don't need a feature? Remove its integration and options from the snippet. + @@ -60,16 +63,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 }); ``` @@ -128,86 +125,89 @@ 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. - -### Issues +## Send Logs -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: +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can pass attributes to search or filter by later. + +See Set Up Logs for logging methods and message formatting. ```javascript -setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } -}, 99); +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" }); ``` - -### 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: +Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. + +See Set Up Metrics for metric types and configuration options. ```javascript -Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - () => { - setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } - }, 99); - } -); +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 + +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 @@ -217,16 +217,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/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx index 07bc0e6562d4e4..d0aaa822097b1b 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 @@ -61,6 +53,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. @@ -120,6 +117,12 @@ 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. + @@ -128,13 +131,11 @@ 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 })); ``` @@ -148,89 +149,108 @@ 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/). + +This is expected behavior in the Cloudflare Workers environment and affects all frameworks deployed to Cloudflare Workers, including Next.js, Astro, Remix, and others. -First, let's make sure Sentry is correctly capturing errors and creating issues in your project. + +## Send Logs -Add the following code snippet to your main worker file to create a `/debug-sentry` route that triggers an error when called: +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. Cloudflare Workers also support the console logging integration to capture existing `console.log` calls. + +See Set Up Logs for logging methods and message formatting. -```javascript {filename:index.js} -export default { - async fetch(request) { - const url = new URL(request.url); +```javascript +import * as Sentry from "@sentry/cloudflare"; - if (url.pathname === "/debug-sentry") { - throw new Error("My first Sentry error!"); - } +Sentry.logger.info("User example action completed"); - // Your existing routes and logic here... - return new Response("..."); - }, -}; +Sentry.logger.warn("Slow operation detected", { operation: "data_fetch", duration: 3500 }); + +Sentry.logger.error("Validation failed", { form_field: "email", reason: "Invalid email" }); ``` - -### 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. +## Send Application Metrics -```javascript {filename:index.js} -import * as Sentry from "@sentry/cloudflare"; + + + +Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. + +See Set Up Metrics for 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 + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + + + + + +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 @@ -238,25 +258,12 @@ Now, head over to your project on [Sentry.io](https://sentry.io) to view the col -## 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 03e6221cbfa321..8e7b286c50e0c0 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 @@ -72,6 +64,11 @@ 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 @@ -80,6 +77,12 @@ The hook reads your dependencies from a local `node_modules` directory, not from 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. + @@ -90,16 +93,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 }); ``` @@ -144,86 +141,89 @@ 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 - -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - -### Issues +## Send Logs -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: +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can pass attributes to search or filter by later. + +See Set Up Logs for logging methods and message formatting. ```javascript -setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } -}, 99); +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" }); ``` - -### 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: +Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. + +See Set Up Metrics for metric types and configuration options. ```javascript -Sentry.startSpan( - { - op: "test", - name: "My First Test Transaction", - }, - () => { - setTimeout(() => { - try { - foo(); - } catch (e) { - Sentry.captureException(e); - } - }, 99); - } -); +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 + +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 @@ -233,15 +233,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 3cd8fb2579da7c..c12b76838a669e 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 @@ -61,6 +53,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 @@ -76,46 +73,41 @@ 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)); @@ -125,35 +117,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)); @@ -181,41 +162,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)); @@ -225,36 +193,25 @@ 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)); @@ -264,70 +221,63 @@ 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. - -### Issues +## Send Logs -To verify that Sentry captures errors and creates issues in your Sentry project, add a test error: +The Effect logger layer forwards `Effect.log` messages to Sentry. The v3 and v4 layer setup is included in the configuration snippets above. + +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")); + yield* Effect.log("User example action completed"); + yield* Effect.logWarning("Slow operation detected").pipe( + Effect.annotateLogs({ operation: "data_fetch", duration: "3500ms" }) + ); }); - -// Run with your layer that includes Sentry.effectLayer ``` - -### Tracing +## Send Application Metrics -To test your tracing configuration, update the previous code snippet to create a custom span: +Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. + +See Set Up Metrics for metric types and configuration options. -```typescript -import { Effect } from "effect"; -import * as Sentry from "@sentry/effect"; +```javascript +Sentry.metrics.count("checkout.failed", 1); -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" }, - }) - ); +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); + +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, }); ``` @@ -335,56 +285,31 @@ const program = Effect.gen(function* () { - +## 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). @@ -393,10 +318,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/elysia/index.mdx b/docs/platforms/javascript/guides/elysia/index.mdx index d9a6b4ca920c9b..c4630ec82103a8 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,14 +27,6 @@ You need: ## Install -Choose the features you want to configure, and this guide will show you how: - - - - - ### Install the Sentry SDK @@ -69,12 +61,23 @@ pnpm add @sentry/elysia @elysiajs/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**. + + + 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. + @@ -84,15 +87,10 @@ 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 @@ -108,15 +106,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 @@ -129,7 +122,7 @@ const app = Sentry.withElysia(new Elysia({ adapter: node() })) -### Customize Automatic Error Capturing (Optional) +### Customize Automatic Error Capturing @@ -154,64 +147,60 @@ 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 - -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - -### Issues +## Send Logs -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: +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can pass attributes to search or filter by later. + +See Set Up Logs for logging methods and message formatting. ```javascript -app.get("/debug-sentry", () => { - throw new Error("My first Sentry error!"); -}); +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" }); ``` - - -### 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: +Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. + +See Set Up Metrics for metric types and configuration options. ```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!"); - } - ); +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" }, }); ``` @@ -219,15 +208,28 @@ app.get("/debug-sentry", async () => { - +## Verify Your Setup - +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - + + + - +Add a route to your app that throws an error: - + + + +```javascript +app.get("/debug-sentry", () => { + throw new Error("Sentry Test Error"); +}); +``` + + + + ### View Captured Data in Sentry @@ -237,10 +239,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 From ad1e139f542931da59d96ad4cebb23080548acb8 Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Wed, 14 Oct 2026 21:41:12 +0000 Subject: [PATCH 04/19] feat(docs): Apply new quick start template to Firebase, GCP Functions, Hono, NestJS, and Nitro Co-Authored-By: Shannon Anahata --- .../javascript/guides/firebase/index.mdx | 159 ++++++------- .../javascript/guides/gcp-functions/index.mdx | 211 +++++++++++------- .../javascript/guides/hono/index.mdx | 148 +++++++----- .../javascript/guides/nestjs/index.mdx | 127 +++++++++-- .../javascript/guides/nitro/index.mdx | 188 ++++++++-------- 5 files changed, 491 insertions(+), 342 deletions(-) diff --git a/docs/platforms/javascript/guides/firebase/index.mdx b/docs/platforms/javascript/guides/firebase/index.mdx index 0549b511e808e2..4dc6705ffac589 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,14 +28,6 @@ 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 @@ -47,23 +39,6 @@ Run the command for your preferred package manager to add the Sentry SDK to your - - -```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 @@ -77,57 +52,52 @@ 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 }); ``` @@ -172,100 +142,106 @@ 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 - -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - -### Issues +## Send Logs -Add a test function that throws an error to verify Sentry is capturing errors: +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. Logs are enabled by default in JavaScript SDK `10.71.0` and later; earlier versions require `enableLogs: true` in `Sentry.init()`. + +If you already use `console`, Pino, Winston, or Consola, you can send those logs with the console, Pino, Winston, or Consola integrations. + +See Set Up Logs for all available logging methods and formatting options. -```javascript {filename:index.js} -require("./instrument"); // Import Sentry initialization first -const { onRequest } = require("firebase-functions/https"); +```javascript +Sentry.logger.info("User example action completed"); + +Sentry.logger.warn("Slow operation detected", { + operation: "data_fetch", + duration: 3500, +}); -exports.testSentry = onRequest(async (request, response) => { - throw new Error("Sentry Test Error - This is intentional!"); +Sentry.logger.error("Validation failed", { + form_field: "email", + reason: "Invalid email", }); ``` + +## Send Application Metrics + + -Deploy your functions and trigger the test endpoint: +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. Metrics are supported in JavaScript SDK `10.25.0` and later and need no extra configuration beyond SDK initialization. + +See Set Up Metrics for all available metric types and configuration options. -```bash -firebase deploy --only functions -curl https://-.cloudfunctions.net/testSentry +```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 -### 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 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). @@ -274,14 +250,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/gcp-functions/index.mdx b/docs/platforms/javascript/guides/gcp-functions/index.mdx index 3e30400e212d81..c473a248a1edf1 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 @@ -53,61 +45,135 @@ 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 [#3](#send-logs) and [#4](#send-application-metrics-). +This guide also enables **Tracing** and **Profiling**. + + + 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): +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 {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("oh, hello there!"); +}); +``` + +```javascript {tabTitle:Background 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, + 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, + profileSessionSampleRate: 1.0, + profileLifecycle: "trace", +}); + +exports.helloEvents = Sentry.wrapCloudEventFunction((context, callback) => { + throw new Error("oh, hello there!"); +}); +``` -### 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. - -### Issues +## Send Logs -Let's verify that Sentry captures errors and creates issues in your Sentry project. Add an intentional error in your function: +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. Logs are enabled by default in JavaScript SDK `10.71.0` and later; earlier versions require `enableLogs: true` in `Sentry.init()`. + +If you already use `console`, Pino, Winston, or Consola, you can send those logs with the console, Pino, Winston, or Consola integrations. + +See Set Up Logs for all available logging methods and formatting options. -```javascript {tabTitle:Http functions} {mdExpandTabs} -exports.helloHttp = Sentry.wrapHttpFunction((req, res) => { - throw new Error("Sentry Test Error - This is intentional!"); -}); -``` +```javascript +Sentry.logger.info("User example action completed"); -```javascript {tabTitle:Background functions} -exports.helloBackground = Sentry.wrapEventFunction( - (data, context, callback) => { - throw new Error("Sentry Test Error - This is intentional!"); - } -); -``` +Sentry.logger.warn("Slow operation detected", { + operation: "data_fetch", + duration: 3500, +}); -```javascript {tabTitle:CloudEvent functions} -exports.helloEvents = Sentry.wrapCloudEventFunction((context, callback) => { - throw new Error("Sentry Test Error - This is intentional!"); +Sentry.logger.error("Validation failed", { + form_field: "email", + reason: "Invalid email", }); ``` @@ -115,52 +181,27 @@ exports.helloEvents = Sentry.wrapCloudEventFunction((context, callback) => { - -### Tracing +## Send Application Metrics + -To test tracing, wrap your code in a span: +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. Metrics are supported in JavaScript SDK `10.25.0` and later and need no extra configuration beyond SDK initialization. + +See Set Up Metrics for all available metric types and configuration options. -```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 +Sentry.metrics.count("checkout.failed", 1); -```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)); - } - ); -}); -``` +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); -```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)); - } - ); +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, }); ``` @@ -168,15 +209,28 @@ exports.helloEvent = Sentry.wrapCloudEventFunction(async (context) => { - +## 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 @@ -186,14 +240,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/hono/index.mdx b/docs/platforms/javascript/guides/hono/index.mdx index 71ad13f56a967f..58bce216c00892 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 @@ -92,7 +84,6 @@ deno add npm:@sentry/deno - ### Install the Profiling Package (Node.js Only) @@ -121,10 +112,14 @@ 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. + + + @@ -160,41 +155,37 @@ 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: [nodeProfilingIntegration()], - // ___PRODUCT_OPTION_END___ profiling - // ___PRODUCT_OPTION_START___ performance + integrations: [ + // enables Profiling + nodeProfilingIntegration(), + ], - // 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 }); ``` @@ -248,12 +239,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 }) ); @@ -286,12 +275,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 }) ); @@ -310,12 +297,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 }) ); @@ -364,17 +349,76 @@ 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 + + + + + +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. Logs are enabled by default in JavaScript SDK `10.71.0` and later; earlier versions require `enableLogs: true` in `Sentry.init()`. + +If you're using Node.js and already log with `console`, Pino, Winston, or Consola, you can send those logs with the console, Pino, Winston, or Consola integrations. + +See Set Up Logs for all available logging methods and formatting options. + + + + +```typescript +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" }); +``` + + + + + +## Send Application Metrics + + + + + +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. Metrics are supported in JavaScript SDK `10.25.0` and later and need no extra configuration beyond SDK initialization. + +See Set Up Metrics for all available metric types and configuration options. + + + + +```typescript +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 - +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 @@ -384,15 +428,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/nestjs/index.mdx b/docs/platforms/javascript/guides/nestjs/index.mdx index d1babb29069579..fce1cefa62dfdd 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 @@ -43,6 +35,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 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 @@ -51,10 +48,36 @@ Run the command for your preferred package manager to add the Sentry SDK to your To import and initialize Sentry, create a file named `instrument.ts` in the root directory of your project and add the following code: +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", +}); +``` @@ -119,27 +142,92 @@ export class AppModule {} -### Add Readable Stack Traces With Source Maps (Optional) +### Add Readable Stack Traces With Source Maps -## Capture Nest.js Errors +### Capture Nest.js Errors -## 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) +### Control the Data You Send to Sentry +## Send Logs + + + + + +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. Logs are enabled by default in JavaScript SDK `10.71.0` and later; earlier versions require `enableLogs: true` in `Sentry.init()`. + +If you already use `console`, Pino, Winston, or Consola, you can send those logs with the console, Pino, Winston, or Consola integrations. + +See Set Up Logs for all available logging methods and formatting options. + + + + +```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", +}); +``` + + + + + +## Send Application Metrics + + + + + +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. Metrics are supported in JavaScript SDK `10.25.0` and later and need no extra configuration beyond SDK initialization. + +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 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 @@ -149,16 +237,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 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 diff --git a/docs/platforms/javascript/guides/nitro/index.mdx b/docs/platforms/javascript/guides/nitro/index.mdx index f0d0db71ab390f..ea0d20256f134d 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: @@ -26,14 +26,6 @@ You need: ## Install -Choose the features you want to configure, and this guide will show you how: - - - - - ### Install the Sentry SDK @@ -63,6 +55,11 @@ pnpm add @sentry/nitro ## 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**. + + + 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 @@ -156,6 +153,12 @@ 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. + @@ -164,15 +167,10 @@ 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 }); ``` @@ -209,65 +207,83 @@ 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 +### Automatic Instrumentation -Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. +#### Automatic Error Capturing -### Issues +The SDK registers a Nitro `error` hook that captures unhandled errors from route handlers and middleware. `HTTPError`s with 3xx or 4xx status codes are skipped. - - - +To disable the built-in error hook, set `enableNitroErrorHandler: false` in `Sentry.init`: -Add a test route that throws an error, then open `/debug-sentry` in your browser (or `curl` it) to trigger the error: +```javascript {filename: instrument.mjs} +Sentry.init({ + dsn: "___PUBLIC_DSN___", + enableNitroErrorHandler: false, +}); +``` - - +#### Automatic Tracing -```javascript {filename: server/routes/debug-sentry.ts} +The SDK creates transactions for incoming requests using Nitro's tracing channels (`h3.request` and `srvx.request`). `withSentryConfig` enables `tracingChannel: true` on your Nitro config automatically. + +- Root request spans use `op: 'http.server'` with parameterized route names (e.g. `GET /users/:id`) +- Middleware spans use `op: 'middleware.nitro'` +- Path parameters are attached as `url.path.parameter.` attributes +- 3xx/4xx `HTTPError`s do not mark the span as errored + +#### Distributed Tracing + +The SDK appends `sentry-trace` and `baggage` values to `Server-Timing` response headers so the browser SDK can link pageload traces to their server trace. Incoming `sentry-trace` and `baggage` headers are honored by the underlying `@sentry/node` SDK. No additional configuration needed. + +#### Manual Spans + +You can create manual spans inside your route handlers: + +```javascript import { defineHandler } from "nitro/h3"; +import * as Sentry from "@sentry/nitro"; export default defineHandler(() => { - throw new Error("My first Sentry error!"); + return Sentry.startSpan({ name: "process-payment" }, () => { + // ... your code + }); }); ``` - - - +#### 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. -### Tracing +## Send Logs -To verify tracing, add a handler that starts a manual span: +Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. Logs are enabled by default in JavaScript SDK `10.71.0` and later; earlier versions require `enableLogs: true` in `Sentry.init()`. + +If you already use `console`, Pino, Winston, or Consola, you can send those logs with the console, Pino, Winston, or Consola integrations. + +See Set Up Logs for all available logging methods and formatting options. -```javascript {filename: server/routes/debug-sentry.ts} -import { defineHandler } from "nitro/h3"; -import * as Sentry from "@sentry/nitro"; +```javascript +Sentry.logger.info("User example action completed"); -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!"); - } - ); +Sentry.logger.warn("Slow operation detected", { + operation: "data_fetch", + duration: 3500, +}); + +Sentry.logger.error("Validation failed", { + form_field: "email", + reason: "Invalid email", }); ``` @@ -275,75 +291,61 @@ export default defineHandler(async () => { - - - - - +## Send Application Metrics - - - - -### 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). + + + - +Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. Metrics are supported in JavaScript SDK `10.25.0` and later and need no extra configuration beyond SDK initialization. -## Features +See Set Up Metrics for all available metric types and configuration options. -### Automatic Error Capturing + + -The SDK registers a Nitro `error` hook that captures unhandled errors from route handlers and middleware. `HTTPError`s with 3xx or 4xx status codes are skipped. +```javascript +Sentry.metrics.count("checkout.failed", 1); -To disable the built-in error hook, set `enableNitroErrorHandler: false` in `Sentry.init`: +Sentry.metrics.gauge("time_since_refresh", 4, { unit: "hour" }); -```javascript {filename: instrument.mjs} -Sentry.init({ - dsn: "___PUBLIC_DSN___", - enableNitroErrorHandler: false, +Sentry.metrics.distribution("api_latency", 187, { + unit: "millisecond", + attributes: { endpoint: "/api/orders" }, }); ``` -### Automatic Tracing - -The SDK creates transactions for incoming requests using Nitro's tracing channels (`h3.request` and `srvx.request`). `withSentryConfig` enables `tracingChannel: true` on your Nitro config automatically. - -- Root request spans use `op: 'http.server'` with parameterized route names (e.g. `GET /users/:id`) -- Middleware spans use `op: 'middleware.nitro'` -- Path parameters are attached as `url.path.parameter.` attributes -- 3xx/4xx `HTTPError`s do not mark the span as errored - -### Distributed Tracing + + + -The SDK appends `sentry-trace` and `baggage` values to `Server-Timing` response headers so the browser SDK can link pageload traces to their server trace. Incoming `sentry-trace` and `baggage` headers are honored by the underlying `@sentry/node` SDK. No additional configuration needed. +## Verify Your Setup -### Manual Spans +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. -You can create manual spans inside your route handlers: +Add a test route that throws an error, then open `/debug-sentry` in your browser (or use `curl`) to trigger the error: -```javascript +```javascript {filename: server/routes/debug-sentry.ts} import { defineHandler } from "nitro/h3"; -import * as Sentry from "@sentry/nitro"; export default defineHandler(() => { - return Sentry.startSpan({ name: "process-payment" }, () => { - // ... your code - }); + throw new Error("Sentry Test Error"); }); ``` -## Runtime Behavior +### View Captured Data in Sentry -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. +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 From db44f48043240c8b8b58c59a8c0b3361f164821a Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Wed, 14 Oct 2026 22:17:00 +0000 Subject: [PATCH 05/19] fix(docs): Fix broken links in Astro, React, and Wasm quick starts --- .../javascript/guides/astro/index.mdx | 48 ++++++++++++++++++- .../javascript/guides/react/index.mdx | 2 +- .../javascript/guides/wasm/index.mdx | 1 - 3 files changed, 48 insertions(+), 3 deletions(-) diff --git a/docs/platforms/javascript/guides/astro/index.mdx b/docs/platforms/javascript/guides/astro/index.mdx index d333dba119d764..45631add917c1e 100644 --- a/docs/platforms/javascript/guides/astro/index.mdx +++ b/docs/platforms/javascript/guides/astro/index.mdx @@ -146,7 +146,53 @@ export default defineConfig({ ### 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 diff --git a/docs/platforms/javascript/guides/react/index.mdx b/docs/platforms/javascript/guides/react/index.mdx index 34fc7352909c67..7956e32a591587 100644 --- a/docs/platforms/javascript/guides/react/index.mdx +++ b/docs/platforms/javascript/guides/react/index.mdx @@ -365,7 +365,7 @@ At this point, you should have integrated Sentry into your React application. He -- Find various topics in Troubleshooting +- Find various topics in Troubleshooting - [Get support](https://www.sentry.help/en/) diff --git a/docs/platforms/javascript/guides/wasm/index.mdx b/docs/platforms/javascript/guides/wasm/index.mdx index 81021cb75457c6..1317746808003b 100644 --- a/docs/platforms/javascript/guides/wasm/index.mdx +++ b/docs/platforms/javascript/guides/wasm/index.mdx @@ -195,7 +195,6 @@ Now, head over to your project on [Sentry.io](https://sentry.io/) to view the co 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 -- Set up Agent Tracing to monitor your AI systems - Set up tunneling to avoid ad blockers blocking Sentry events From 571acf73b2cb8f7fc97533bccbb504d89262567f Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Thu, 15 Oct 2026 18:45:19 +0000 Subject: [PATCH 06/19] feat(docs): Apply new quick start template to browser JavaScript quick start guide Co-Authored-By: Shannon Anahata --- .../getting-started-complete/javascript.mdx | 275 ++++++++++++++++-- 1 file changed, 248 insertions(+), 27 deletions(-) diff --git a/platform-includes/getting-started-complete/javascript.mdx b/platform-includes/getting-started-complete/javascript.mdx index d52dd85b7f597f..894ea69d5685ac 100644 --- a/platform-includes/getting-started-complete/javascript.mdx +++ b/platform-includes/getting-started-complete/javascript.mdx @@ -1,15 +1,4 @@ -Choose the features you want to configure, and this guide will show you how: - - - @@ -19,47 +8,279 @@ 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**. + + - +### Initialize the SDK -### Add Readable Stack Traces With Source Maps (Optional) + + + - +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). + +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 use the Loader Script, also turn on Tracing and Session Replay in its settings. The CDN tab loads the bundle that includes every feature in this guide; to load less code, pick a smaller one from the 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 Tracing + 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} + + + +``` + + + + -### Avoid Ad Blockers With Tunneling (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 + + + + + +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", +}); +``` + + + + + +## 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 - +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 +- Learn how to manually capture errors +- Set up tunneling to avoid ad blockers from blocking Sentry events +- Continue to customize your configuration -- Find various support topics in troubleshooting +- Find various topics in Troubleshooting - [Get support](https://www.sentry.help/en/) From de5c0e84ce89b53ff3f62bf11befa35d7337ee9d Mon Sep 17 00:00:00 2001 From: "sentry-junior[bot]" <264270552+sentry-junior[bot]@users.noreply.github.com> Date: Thu, 15 Oct 2026 22:14:25 +0000 Subject: [PATCH 07/19] ref(docs): Remove SplitLayout wrappers from JavaScript quick starts Co-Authored-By: Shannon Anahata --- .../javascript/guides/astro/index.mdx | 75 --------- .../guides/azure-functions/index.mdx | 66 -------- .../platforms/javascript/guides/bun/index.mdx | 77 ---------- .../javascript/guides/capacitor/index.mdx | 43 ------ .../javascript/guides/cloudflare/index.mdx | 66 -------- .../javascript/guides/deno/index.mdx | 77 ---------- .../javascript/guides/effect/index.mdx | 66 -------- .../javascript/guides/electron/index.mdx | 107 ------------- .../javascript/guides/elysia/index.mdx | 66 -------- .../javascript/guides/firebase/index.mdx | 64 -------- .../javascript/guides/gatsby/index.mdx | 66 -------- .../javascript/guides/gcp-functions/index.mdx | 55 ------- .../javascript/guides/hono/index.mdx | 112 -------------- .../javascript/guides/nestjs/index.mdx | 64 -------- .../javascript/guides/nitro/index.mdx | 84 ---------- .../javascript/guides/react-router/index.mdx | 53 ------- .../javascript/guides/react/index.mdx | 55 ------- .../javascript/guides/solid/index.mdx | 66 -------- .../javascript/guides/solidstart/index.mdx | 144 ------------------ .../javascript/guides/svelte/index.mdx | 55 ------- .../platforms/javascript/guides/vue/index.mdx | 77 ---------- .../javascript/guides/wasm/index.mdx | 53 ------- .../getting-started-complete/javascript.mdx | 44 ------ 23 files changed, 1635 deletions(-) diff --git a/docs/platforms/javascript/guides/astro/index.mdx b/docs/platforms/javascript/guides/astro/index.mdx index 45631add917c1e..2f7bd26cde0858 100644 --- a/docs/platforms/javascript/guides/astro/index.mdx +++ b/docs/platforms/javascript/guides/astro/index.mdx @@ -28,15 +28,8 @@ This SDK currently only works on Node runtimes, such as Node adapter or Vercel w ### Install the Sentry SDK - - - - Run the Astro integration wizard to add Sentry to your project, then install the Profiling package: - - - ```bash {tabTitle:npm} npx astro add @sentry/astro npm install @sentry/profiling-node @@ -52,10 +45,6 @@ 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-). @@ -65,10 +54,6 @@ This guide also enables **Tracing**, **Profiling**, **Session Replay**, and **Us ### Initialize the SDK - - - - The Astro integration wizard configures the SDK in your project. The snippets below show the manual configuration for the client and server. Set the client DSN in `sentry.client.config.ts` and the server DSN in `sentry.server.config.ts`. The snippets also turn on: @@ -80,9 +65,6 @@ The snippets also turn on: Don't need a feature? Remove its integration and options from the snippet. - - - ```typescript {filename:sentry.client.config.ts} import * as Sentry from "@sentry/astro"; @@ -127,10 +109,6 @@ Sentry.init({ }); ``` - - - - ### Register the Sentry Integration Add the Sentry integration to your `astro.config.mjs`: @@ -146,15 +124,8 @@ export default defineConfig({ ### 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"; @@ -171,27 +142,14 @@ export default defineConfig({ }); ``` - - - - - - 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 @@ -200,19 +158,12 @@ SENTRY_AUTH_TOKEN=___ORG_AUTH_TOKEN___ ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. See Set Up Logs for all available logging methods and message formatting options. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -227,23 +178,12 @@ Sentry.logger.error("Validation failed", { }); ``` - - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can add searchable attributes to each metric. See Set Up Metrics for all available metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -255,23 +195,12 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## 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 @@ -282,10 +211,6 @@ Add this button to a page in your Astro app and click it to send a 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). diff --git a/docs/platforms/javascript/guides/azure-functions/index.mdx b/docs/platforms/javascript/guides/azure-functions/index.mdx index 8d0432f04c0487..5d23bbd0854a7f 100644 --- a/docs/platforms/javascript/guides/azure-functions/index.mdx +++ b/docs/platforms/javascript/guides/azure-functions/index.mdx @@ -17,21 +17,10 @@ categories: ### Install the Sentry SDK - - - - Run the command for your preferred package manager to add `@sentry/node` as a runtime dependency 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-). @@ -39,10 +28,6 @@ This guide also enables **Tracing** and **Profiling**. - - - - Make sure to initialize Sentry at the top of your function file before importing any other modules: The snippet also turns on: @@ -52,9 +37,6 @@ The snippet also turns on: Don't need a feature? Remove its integration and options from the snippet. - - - ```javascript {tabTitle:async} const Sentry = require("@sentry/node"); const { nodeProfilingIntegration } = require("@sentry/profiling-node"); @@ -76,21 +58,10 @@ Sentry.init({ // your function code ``` - - - - ### Capture Errors - - - - Because Azure Functions are short-lived, you have to explicitly `flush` Sentry events after calling `captureException`, or they may be lost before being sent to Sentry. - - - ```javascript {tabTitle:async} const Sentry = require("@sentry/node"); @@ -112,10 +83,6 @@ module.exports = async function (context, req) { }; ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -126,17 +93,10 @@ module.exports = async function (context, req) { ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. If you already use `console`, Consola, Pino, or Winston, see the console and Consola, Pino, and Winston integrations. See Set Up Logs for logging methods and message formatting. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -145,23 +105,12 @@ Sentry.logger.warn("Slow operation detected", { operation: "data_fetch", duratio Sentry.logger.error("Validation failed", { form_field: "email", reason: "Invalid email" }); ``` - - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. See Set Up Metrics for metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -173,23 +122,12 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## 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 in your function and flush the event before the function execution ends: - - - ```javascript {tabTitle:async} const Sentry = require("@sentry/node"); @@ -203,10 +141,6 @@ module.exports = async function (context, req) { }; ``` - - - - ### 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). diff --git a/docs/platforms/javascript/guides/bun/index.mdx b/docs/platforms/javascript/guides/bun/index.mdx index 572596628df1dc..62339f2f7146b8 100644 --- a/docs/platforms/javascript/guides/bun/index.mdx +++ b/docs/platforms/javascript/guides/bun/index.mdx @@ -15,23 +15,12 @@ categories: ### Install the SDK - - - - Use the Bun package manager to add the Sentry SDK to your application: - - - ```bash {tabTitle:Bun} 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-). @@ -41,10 +30,6 @@ 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: @@ -54,9 +39,6 @@ The snippet also turns on: Don't need a feature? Remove its integration and options from the snippet. - - - ```javascript {filename: instrument.js} import * as Sentry from "@sentry/bun"; @@ -70,23 +52,12 @@ Sentry.init({ }); ``` - - - - ### Build With the Sentry Plugin (Recommended) - - - - We recommend building with the Sentry plugin, because it adds spans from your dependencies, such as database drivers, AI SDKs, and web frameworks like Express, Koa and Hapi. Bun has no runtime hook Sentry can use to instrument those packages, so the plugin rewrites them as `bun build` bundles them. Add `sentryBunPlugin` from `@sentry/bun/plugin` to your `Bun.build()` call, then run the output the same way, with `--preload`. Errors, the spans you create yourself, and `Bun.serve`, `node:http` and `fetch` spans work either way. - - - ```typescript {filename:build.ts} import { sentryBunPlugin } from "@sentry/bun/plugin"; @@ -98,21 +69,10 @@ await Bun.build({ }); ``` - - - - ### Apply Instrumentation to Your App - - - - Preload your instrumentation file with the [`--preload`](https://bun.com/docs/runtime#param-preload) flag. This is what guarantees that `Sentry.init()` runs before any other module is loaded. - - - ```bash {tabTitle:From source} bun --preload ./instrument.js app.js ``` @@ -121,10 +81,6 @@ bun --preload ./instrument.js app.js bun --preload ./instrument.js dist/app.js ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -135,17 +91,10 @@ bun --preload ./instrument.js dist/app.js ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can pass attributes to search or filter by later. See Set Up Logs for logging methods and message formatting. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -154,23 +103,12 @@ Sentry.logger.warn("Slow operation detected", { operation: "data_fetch", duratio Sentry.logger.error("Validation failed", { form_field: "email", reason: "Invalid email" }); ``` - - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. See Set Up Metrics for metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -182,33 +120,18 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## 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 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). diff --git a/docs/platforms/javascript/guides/capacitor/index.mdx b/docs/platforms/javascript/guides/capacitor/index.mdx index 99644ad35a4443..d9354a8b186b1c 100644 --- a/docs/platforms/javascript/guides/capacitor/index.mdx +++ b/docs/platforms/javascript/guides/capacitor/index.mdx @@ -22,21 +22,10 @@ This guide will show you setup instructions for Angular, React, Vue, and Nuxt. I ### Install the Sentry SDK - - - - Run the command for your preferred package manager to add Sentry's Capacitor SDK and the SDK for the framework you're using to your application: - - - - - - - #### Angular @@ -66,10 +55,6 @@ This guide also enables **Tracing**, **Session Replay**, and **User Feedback**. ### Initialize the Sentry SDK - - - - Initialize Sentry as early as possible in your application's lifecycle. The snippets also turn on: @@ -82,9 +67,6 @@ Don't need a feature? Remove its integration and options from the snippet. 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. - - - ```typescript {tabTitle: Angular 14+} {mdExpandTabs} {filename: app.module.ts} import * as Sentry from "@sentry/capacitor"; import * as SentryAngular from "@sentry/angular"; @@ -386,10 +368,6 @@ Sentry.init({ }); ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -404,19 +382,12 @@ You need to provide debug information to Sentry to make the stack-trace informat ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. See Set Up Logs for all available logging methods and message formatting options. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -431,24 +402,14 @@ Sentry.logger.error("Validation failed", { }); ``` - - - ## 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 an existing page. Clicking it throws an error that Sentry captures: - - - ```html @@ -459,10 +420,6 @@ Add a test button to an existing page. Clicking it throws an error that Sentry c ``` - - - - ### 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). diff --git a/docs/platforms/javascript/guides/cloudflare/index.mdx b/docs/platforms/javascript/guides/cloudflare/index.mdx index d0aaa822097b1b..d2e4ff5be98a9d 100644 --- a/docs/platforms/javascript/guides/cloudflare/index.mdx +++ b/docs/platforms/javascript/guides/cloudflare/index.mdx @@ -36,21 +36,10 @@ If you're using any of the listed frameworks, follow their specific setup instru ### 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 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-). @@ -68,19 +57,12 @@ Not using Vite? See the Wrangler setup - - - Add the Sentry plugin to your existing `vite.config.ts`, next to `cloudflare()`. Both of its behaviors are on by default. `autoInstrumentation` wraps your Worker entry, and any Durable Object, Workflow or Agents SDK class in your wrangler config, at build time, so you don't have to call `Sentry.withSentry()` yourself. `buildTimeInstrumentation` instruments bundled dependencies such as database clients, which is the only way to trace them in the Workers runtime, where the SDK can't patch them at runtime. To see its options, which packages it instruments, and how to opt out of either behavior, see Vite Plugin. - - - ```typescript {filename:vite.config.ts} {diff} import { cloudflare } from "@cloudflare/vite-plugin"; +import { sentryCloudflareVitePlugin } from "@sentry/cloudflare/vite"; @@ -94,10 +76,6 @@ To see its options, which packages it instruments, and how to opt out of either }); ``` - - - - Run `vite build` before `wrangler deploy`, and use `vite dev` in place of `wrangler dev` for local development. ### Wrangler Configuration @@ -109,10 +87,6 @@ Run `vite build` before `wrangler deploy`, and use `vite dev` in place of `wrang ### Add Your Sentry Options - - - - Create an `instrument.server.ts` file next to your Worker entry, the file that `main` points at in your wrangler config. If `main` is `src/index.ts`, the file belongs at `src/instrument.server.ts`, not at the project root. 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. @@ -123,9 +97,6 @@ The snippet also turns on: Don't need a feature? Remove its integration and options from the snippet. - - - ```typescript {filename:src/instrument.server.ts} import { defineCloudflareOptions } from "@sentry/cloudflare"; @@ -139,10 +110,6 @@ export default defineCloudflareOptions((env) => ({ })); ``` - - - - If you don't add an `instrument.server.*` file, the SDK reads its configuration from the Worker's `env` at runtime instead: `SENTRY_DSN`, `SENTRY_ENVIRONMENT`, `SENTRY_TRACES_SAMPLE_RATE`, `SENTRY_DEBUG`, `SENTRY_TUNNEL` and `SENTRY_TRACE_LIFECYCLE`. Set them as secrets or vars in your wrangler config. @@ -168,17 +135,10 @@ This is expected behavior in the Cloudflare Workers environment and affects all ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. Cloudflare Workers also support the console logging integration to capture existing `console.log` calls. See Set Up Logs for logging methods and message formatting. - - - ```javascript import * as Sentry from "@sentry/cloudflare"; @@ -189,23 +149,12 @@ Sentry.logger.warn("Slow operation detected", { operation: "data_fetch", duratio Sentry.logger.error("Validation failed", { form_field: "email", reason: "Invalid email" }); ``` - - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. See Set Up Metrics for metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -217,23 +166,12 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## Verify Your Setup Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - - - - Add a route to your Worker that throws an error: - - - ```javascript export default { async fetch(request) { @@ -248,10 +186,6 @@ export default { }; ``` - - - - ### 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). diff --git a/docs/platforms/javascript/guides/deno/index.mdx b/docs/platforms/javascript/guides/deno/index.mdx index 8e7b286c50e0c0..2e0648efe84bfa 100644 --- a/docs/platforms/javascript/guides/deno/index.mdx +++ b/docs/platforms/javascript/guides/deno/index.mdx @@ -21,34 +21,16 @@ This SDK is currently in **beta**. Beta features are still in progress and may h ### 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: - - - ```javascript {filename: main.ts} import "___SDK_PACKAGE___/import"; import * as Sentry from "___SDK_PACKAGE___"; // your other imports ``` - - - - - - - - The hook reads your dependencies from a local `node_modules` directory, not from Deno's global npm cache. Set `nodeModulesDir` in your `deno.json`: - - - ```json {filename: deno.json} { "imports": { @@ -58,10 +40,6 @@ 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-). @@ -71,10 +49,6 @@ This guide also enables **Tracing**. ### Initialize the Sentry SDK - - - - Initialize Sentry as early as possible in your app: The snippet also turns on: @@ -83,9 +57,6 @@ The snippet also turns on: Don't need a feature? Remove its integration and options from the snippet. - - - ```javascript {filename: main.ts} import "___SDK_PACKAGE___/import"; import * as Sentry from "___SDK_PACKAGE___"; @@ -100,21 +71,10 @@ Sentry.init({ }); ``` - - - - ### Grant Permissions - - - - Deno blocks access to the network, the file system and system information until you grant it. Start your app with all four permissions so that the SDK can send complete events. Add the other hosts your app talks to, separated by commas: - - - ```bash deno run \ --allow-net=___ORG_INGEST_DOMAIN___ \ @@ -124,10 +84,6 @@ deno run \ main.ts ``` - - - - | Flag | What it gives you | @@ -151,17 +107,10 @@ If you omit `--allow-read` or `--allow-sys`, the SDK sends events without that d ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can pass attributes to search or filter by later. See Set Up Logs for logging methods and message formatting. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -170,23 +119,12 @@ Sentry.logger.warn("Slow operation detected", { operation: "data_fetch", duratio Sentry.logger.error("Validation failed", { form_field: "email", reason: "Invalid email" }); ``` - - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. See Set Up Metrics for metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -198,33 +136,18 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## 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 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). diff --git a/docs/platforms/javascript/guides/effect/index.mdx b/docs/platforms/javascript/guides/effect/index.mdx index c12b76838a669e..8c402dce607078 100644 --- a/docs/platforms/javascript/guides/effect/index.mdx +++ b/docs/platforms/javascript/guides/effect/index.mdx @@ -26,15 +26,8 @@ This guide will show you how to integrate Sentry into your [Effect](https://effe ### Install the Sentry SDK - - - - Run the command for your preferred package manager to add the Sentry SDK to your application. - - - ```bash {tabTitle:npm} npm install @sentry/effect --save ``` @@ -47,10 +40,6 @@ yarn add @sentry/effect 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-). @@ -62,10 +51,6 @@ The SDK provides an `effectLayer` that initializes Sentry. You can compose it wi ### Effect v3 - - - - - Node: Provide `SentryLive` before launching your HTTP layer (for example, with `NodeRuntime`). @@ -81,9 +66,6 @@ The snippets also turn on: 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"; @@ -140,25 +122,14 @@ const SentryLive = Layer.mergeAll( const MainLive = YourAppLayer.pipe(Layer.provide(SentryLive)); ``` - - - - ### Effect v4 - - - - Effect v4 changes how you install the default `Tracer` and `Logger` services. Use `Layer.succeed(Tracer.Tracer, …)` plus `Logger.layer([…])`. With SDK version 10.75.0 or higher, `effectLayer` also registers a Sentry `ErrorReporter`. Sentry then captures the failures that Effect reports, for example a route handler of Effect's HTTP server that fails. Learn more in Capturing Errors. - - - ```typescript {tabTitle: Server} {filename: main.ts} import * as Sentry from "@sentry/effect"; import { NodeRuntime } from "@effect/platform-node"; @@ -217,10 +188,6 @@ const SentryLive = Layer.mergeAll( const MainLive = YourAppLayer.pipe(Layer.provide(SentryLive)); ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -231,17 +198,10 @@ const MainLive = YourAppLayer.pipe(Layer.provide(SentryLive)); ## Send Logs - - - - The Effect logger layer forwards `Effect.log` messages to Sentry. The v3 and v4 layer setup is included in the configuration snippets above. See Set Up Logs for logging methods and message formatting. - - - ```typescript import { Effect } from "effect"; @@ -253,23 +213,12 @@ const program = Effect.gen(function* () { }); ``` - - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. See Set Up Metrics for metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -281,23 +230,12 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## Verify Your Setup Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - - - - Run an Effect that fails using the layer that includes `Sentry.effectLayer()`: - - - ```typescript import { Effect } from "effect"; @@ -306,10 +244,6 @@ const program = Effect.fail(new Error("Sentry Test Error")); // 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). diff --git a/docs/platforms/javascript/guides/electron/index.mdx b/docs/platforms/javascript/guides/electron/index.mdx index 4b24d59ee91ef4..b7e6d71120968a 100644 --- a/docs/platforms/javascript/guides/electron/index.mdx +++ b/docs/platforms/javascript/guides/electron/index.mdx @@ -14,15 +14,8 @@ categories: ### Install the Sentry SDK - - - - Run the command for your preferred package manager to add the Sentry SDK to your application: - - - ```bash {tabTitle:npm} npm install @sentry/electron --save ``` @@ -35,10 +28,6 @@ yarn add @sentry/electron pnpm add @sentry/electron ``` - - - - ## 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-). @@ -50,10 +39,6 @@ You should initialize the SDK in both the `main` process and every `renderer` pr ### Configure the Main Process - - - - Initialize the SDK in your Electron `main` process as early as possible. The main and renderer snippets also turn on: @@ -64,9 +49,6 @@ The main and renderer snippets also turn on: Don't need a feature? Remove its integration and options from the snippet. - - - ```javascript import * as Sentry from "@sentry/electron/main"; @@ -84,21 +66,10 @@ Sentry.init({ }); ``` - - - - ### Configure the Renderer Process - - - - 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. - - - ```javascript import * as Sentry from "@sentry/electron/renderer"; @@ -125,64 +96,32 @@ Sentry.init({ }); ``` - - - - ### Configure Any Utility Processes - - - - If your app uses utility processes, initialize Sentry in each one. - - - ```javascript import * as Sentry from "@sentry/electron/utility"; Sentry.init(); ``` - - - - - - - If your app uses a preload script and `contextIsolation: true`, Sentry can't automatically capture errors that occur in the preload context. To include those, initialize Sentry in your preload script as well: - - - ```javascript import * as Sentry from "@sentry/electron/renderer"; Sentry.init(); // don't forget to add your configuration options ``` - - - - - - - - If you change the `userData` directory used by your app, ensure this change is made before you configure the SDK as this path is used to cache scope and events between application restarts. - - - ```javascript import { app } from "electron"; import * as Sentry from "@sentry/electron/main"; @@ -191,23 +130,12 @@ app.setPath("userData", "~/.config/my-app"); Sentry.init({ dsn: "___PUBLIC_DSN___" }); ``` - - - - ### Using Framework-Specific SDKs - - - - If you're using a framework in your renderers, you can combine the Electron SDK with the framework SDK: - - - ```javascript import { init } from "@sentry/electron/renderer"; import { init as reactInit } from "@sentry/react"; @@ -224,10 +152,6 @@ init( ); ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -238,19 +162,12 @@ init( ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. See Set Up Logs for all available logging methods and message formatting options. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -265,22 +182,12 @@ Sentry.logger.error("Validation failed", { }); ``` - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can add searchable attributes to each metric. See Set Up Metrics for all available metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -292,32 +199,18 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - ## 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 renderer pages. Clicking it throws an error that Sentry captures: - - - ```javascript document.getElementById("testError").addEventListener("click", () => { 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). diff --git a/docs/platforms/javascript/guides/elysia/index.mdx b/docs/platforms/javascript/guides/elysia/index.mdx index c4630ec82103a8..19d51cce28df03 100644 --- a/docs/platforms/javascript/guides/elysia/index.mdx +++ b/docs/platforms/javascript/guides/elysia/index.mdx @@ -29,10 +29,6 @@ You need: ### Install the Sentry SDK - - - - Run the command for your runtime and preferred package manager to add the Sentry SDK to your application: @@ -40,9 +36,6 @@ Run the command for your runtime and preferred package manager to add the Sentry handles all instrumentation natively. - - - ```bash {tabTitle:Bun} {mdExpandTabs} bun add @sentry/elysia ``` @@ -55,10 +48,6 @@ yarn add @sentry/elysia @elysiajs/node pnpm add @sentry/elysia @elysiajs/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-). @@ -66,10 +55,6 @@ 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: @@ -78,9 +63,6 @@ The snippet also turns on: 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"; @@ -118,22 +100,11 @@ const app = Sentry.withElysia(new Elysia({ adapter: node() })) .listen(3000); ``` - - - - ### 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. - - - ```javascript const app = Sentry.withElysia(new Elysia(), { shouldHandleError: (context) => { @@ -143,10 +114,6 @@ const app = Sentry.withElysia(new Elysia(), { }); ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -157,17 +124,10 @@ const app = Sentry.withElysia(new Elysia(), { ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can pass attributes to search or filter by later. See Set Up Logs for logging methods and message formatting. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -176,23 +136,12 @@ Sentry.logger.warn("Slow operation detected", { operation: "data_fetch", duratio Sentry.logger.error("Validation failed", { form_field: "email", reason: "Invalid email" }); ``` - - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your application to Sentry. You can pass attributes to search or filter by later. See Set Up Metrics for metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -204,33 +153,18 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## Verify Your Setup Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - - - - Add a route to your app that throws an error: - - - ```javascript 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). diff --git a/docs/platforms/javascript/guides/firebase/index.mdx b/docs/platforms/javascript/guides/firebase/index.mdx index 4dc6705ffac589..c81ccfa4a6189c 100644 --- a/docs/platforms/javascript/guides/firebase/index.mdx +++ b/docs/platforms/javascript/guides/firebase/index.mdx @@ -30,16 +30,8 @@ This integration is enabled by default, so you get automatic performance monitor ### 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 @sentry/profiling-node --save ``` @@ -52,10 +44,6 @@ 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-). @@ -63,10 +51,6 @@ 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: @@ -76,9 +60,6 @@ The snippet also turns on: Don't need a feature? Remove its integration and options from the snippet. - - - ```javascript {filename:instrument.js} const Sentry = require("@sentry/node"); const { nodeProfilingIntegration } = require("@sentry/profiling-node"); @@ -101,12 +82,6 @@ Sentry.init({ }); ``` - - - - - - Import the initialization file at the very top of your functions entry point (for example, `index.js`), before any other imports: @@ -114,8 +89,6 @@ Import the initialization file at the very top of your functions entry point (fo calls, including Firebase imports. This ensures Sentry can properly instrument all modules. - - ```javascript {filename:index.js} require("./instrument"); // Require Sentry initialization first @@ -138,10 +111,6 @@ exports.onUserCreated = onDocumentCreated("users/{userId}", async (event) => { }); ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -152,19 +121,12 @@ exports.onUserCreated = onDocumentCreated("users/{userId}", async (event) => { ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. Logs are enabled by default in JavaScript SDK `10.71.0` and later; earlier versions require `enableLogs: true` in `Sentry.init()`. If you already use `console`, Pino, Winston, or Consola, you can send those logs with the console, Pino, Winston, or Consola integrations. See Set Up Logs for all available logging methods and formatting options. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -179,23 +141,12 @@ Sentry.logger.error("Validation failed", { }); ``` - - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. Metrics are supported in JavaScript SDK `10.25.0` and later and need no extra configuration beyond SDK initialization. See Set Up Metrics for all available metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -207,23 +158,12 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## 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 function that throws an error, deploy your functions, and trigger the test endpoint: - - - ```javascript {filename:index.js} require("./instrument"); const { onRequest } = require("firebase-functions/https"); @@ -238,10 +178,6 @@ firebase deploy --only functions curl https://-.cloudfunctions.net/testSentry ``` - - - - ### 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). diff --git a/docs/platforms/javascript/guides/gatsby/index.mdx b/docs/platforms/javascript/guides/gatsby/index.mdx index bf2db5cd65cdd3..03ef4f02201448 100644 --- a/docs/platforms/javascript/guides/gatsby/index.mdx +++ b/docs/platforms/javascript/guides/gatsby/index.mdx @@ -15,10 +15,6 @@ categories: ### Install the Sentry SDK - - - - Run the command for your preferred package manager to add the Sentry SDK to your application. @@ -27,9 +23,6 @@ Run the command for your preferred package manager to add the Sentry SDK to your - - - ```bash {tabTitle:npm} npm install @sentry/gatsby --save ``` @@ -42,21 +35,10 @@ yarn add @sentry/gatsby pnpm add @sentry/gatsby ``` - - - - ### Register the Sentry SDK - - - - Register `@sentry/gatsby` in your Gatsby configuration file (typically `gatsby-config.(js|ts)`). - - - ```javascript {tabTitle: CommonJS}{filename:gatsby-config.(js|ts)} module.exports = { plugins: [ @@ -82,10 +64,6 @@ const config: GatsbyConfig = { export default config; ``` - - - - ## 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-). @@ -95,10 +73,6 @@ This guide also enables **Tracing**, **Session Replay**, and **User Feedback**. ### 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: @@ -109,9 +83,6 @@ The snippet also turns on: 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"; @@ -145,10 +116,6 @@ Sentry.init({ }); ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -159,19 +126,12 @@ Sentry.init({ ## 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`, capture those calls with the console integration. See Set Up Logs for all available logging methods and the syntax for formatting messages. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -186,23 +146,12 @@ Sentry.logger.error("Validation failed", { }); ``` - - - - ## 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); @@ -214,23 +163,12 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## 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. Clicking it will trigger an error for Sentry to capture. - - - ```javascript {filename:index.(jsx|tsx)} @@ -321,10 +248,6 @@ export default { ``` - - - - ### View Captured Data in Sentry diff --git a/docs/platforms/javascript/guides/wasm/index.mdx b/docs/platforms/javascript/guides/wasm/index.mdx index 1317746808003b..719045026a61a6 100644 --- a/docs/platforms/javascript/guides/wasm/index.mdx +++ b/docs/platforms/javascript/guides/wasm/index.mdx @@ -23,15 +23,8 @@ categories: ### Install the Sentry SDK - - - - Run the command for your preferred package manager to add the Sentry SDK to your application: - - - ```bash {tabTitle:npm} npm install @sentry/browser @sentry/wasm --save ``` @@ -44,10 +37,6 @@ yarn add @sentry/browser @sentry/wasm pnpm add @sentry/browser @sentry/wasm ``` - - - - ## 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-). @@ -55,10 +44,6 @@ 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: @@ -67,9 +52,6 @@ The snippet also turns on: Don't need a feature? Remove its integration and options from the snippet. - - - ```javascript import * as Sentry from "@sentry/browser"; import { wasmIntegration } from "@sentry/wasm"; @@ -92,29 +74,18 @@ Sentry.init({ }); ``` - - - - ### Control the Data You Send to Sentry ## Send Logs - - - - Use `Sentry.logger` to send logs at different levels, such as `info`, `warn`, or `error`. You can add searchable attributes to each log. If you already use `console`, capture those calls as Sentry Logs with `consoleLoggingIntegration`. See Set Up Logs for all available logging methods and message formatting options. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -129,22 +100,12 @@ Sentry.logger.error("Validation failed", { }); ``` - - - ## Send Application Metrics - - - - Use `Sentry.metrics` to send counters, gauges, and distributions from your app to Sentry. You can add searchable attributes to each metric. See Set Up Metrics for all available metric types and configuration options. - - - ```javascript Sentry.metrics.count("checkout.failed", 1); @@ -156,22 +117,12 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - ## Verify Your Setup Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. - - - - Call a WebAssembly function that triggers a trap, then capture the exception: - - - ```javascript try { wasmModule.divide(10, 0); @@ -180,10 +131,6 @@ try { } ``` - - - - ### 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). diff --git a/platform-includes/getting-started-complete/javascript.mdx b/platform-includes/getting-started-complete/javascript.mdx index 894ea69d5685ac..1bd39472587066 100644 --- a/platform-includes/getting-started-complete/javascript.mdx +++ b/platform-includes/getting-started-complete/javascript.mdx @@ -15,10 +15,6 @@ This guide also enables **Tracing**, **Session Replay**, and **User Feedback**. ### 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). The snippet also turns on: @@ -31,9 +27,6 @@ Don't need a feature? Remove its integration and options from the snippet. If you use the Loader Script, also turn on Tracing and Session Replay in its settings. The CDN tab loads the bundle that includes every feature in this guide; to load less code, pick a smaller one from the available bundles. - - - ```javascript {tabTitle:npm} import * as Sentry from "@sentry/browser"; @@ -158,10 +151,6 @@ Sentry.init({ ``` - - - - ### Add Readable Stack Traces With Source Maps @@ -172,10 +161,6 @@ Sentry.init({ ## 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. @@ -183,9 +168,6 @@ If you're already logging with `console` or [Consola](https://github.com/unjs/co See Set Up Logs for all available logging methods and the syntax for formatting messages. - - - ```javascript Sentry.logger.info("User example action completed"); @@ -200,24 +182,13 @@ Sentry.logger.error("Validation failed", { }); ``` - - - - ## 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); @@ -229,23 +200,12 @@ Sentry.metrics.distribution("api_latency", 187, { }); ``` - - - - ## 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