diff --git a/docs/platforms/javascript/common/configuration/integrations/browsersession.mdx b/docs/platforms/javascript/common/configuration/integrations/browsersession.mdx index f5eb7c3e6a6180..12e630e02b5ca4 100644 --- a/docs/platforms/javascript/common/configuration/integrations/browsersession.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/browsersession.mdx @@ -40,11 +40,19 @@ Sentry.init({ ## Configuration Options - + Controls how long one session lasts and when a new session is started. -- `'route'`: A new session is started when the route changes, based on the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). This is the default behavior. If you're building a single-page application (SPA), this will result in one session being created per soft navigation. -- `'page'`: A new session is started when the page changes on a hard page reload or navigation. This is useful if you're building a single-page application (SPA) and want to track one session across multiple routes as users navigate through your application. +- `'page'`: Starts a session on page load. Client-side route changes keep the same session. This is the default. +- `'route'`: Starts a session on page load and on each navigation detected through the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API). + +To create a session on each client-side navigation in a single-page application, set `lifecycle` to `'route'`: + +```javascript +Sentry.init({ + integrations: [Sentry.browserSessionIntegration({ lifecycle: "route" })], +}); +``` diff --git a/docs/platforms/javascript/common/configuration/integrations/fetchstreamperformance.mdx b/docs/platforms/javascript/common/configuration/integrations/fetchstreamperformance.mdx new file mode 100644 index 00000000000000..0801d0284d6b74 --- /dev/null +++ b/docs/platforms/javascript/common/configuration/integrations/fetchstreamperformance.mdx @@ -0,0 +1,56 @@ +--- +title: FetchStreamPerformance +description: "Measure how long streamed fetch response bodies take to finish." +notSupported: + - javascript.cordova + - javascript.capacitor + - javascript.electron + - javascript.node + - javascript.aws-lambda + - javascript.azure-functions + - javascript.connect + - javascript.express + - javascript.fastify + - javascript.gcp-functions + - javascript.hapi + - javascript.hono + - javascript.koa + - javascript.nitro + - javascript.nestjs + - javascript.deno + - javascript.cloudflare + - javascript.bun + - javascript.effect + - javascript.elysia + - javascript.firebase + - javascript.mastra +--- + + + +This integration only works inside a browser environment. Requires JavaScript SDK version 11 or later. + + + +_Import name: `Sentry.fetchStreamPerformanceIntegration`_ + +The FetchStreamPerformance integration captures `http.client.stream` spans for streamed fetch responses. These spans measure the time from when response headers arrive until the body finishes, up to 90 seconds. + +Use it with BrowserTracing or your framework's routing integration. + +```javascript +Sentry.init({ + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.fetchStreamPerformanceIntegration(), + ], +}); +``` + +Responses are tracked when they have no `content-length` header and their `content-type` starts with one of these values: + +- `text/event-stream` +- `application/x-ndjson` +- `application/stream+json` + +This integration has no configuration options. diff --git a/docs/platforms/javascript/common/configuration/integrations/index.mdx b/docs/platforms/javascript/common/configuration/integrations/index.mdx index cfedf1d887d79a..ea485185e3c5b9 100644 --- a/docs/platforms/javascript/common/configuration/integrations/index.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/index.mdx @@ -85,6 +85,8 @@ Lazy loading is available for the following integrations: - `reportingObserverIntegration` - `rewriteFramesIntegration` - `browserProfilingIntegration` +- `userTimingIntegration` +- `interactionsIntegration` diff --git a/docs/platforms/javascript/common/configuration/integrations/interactions.mdx b/docs/platforms/javascript/common/configuration/integrations/interactions.mdx new file mode 100644 index 00000000000000..a89e0d8074d205 --- /dev/null +++ b/docs/platforms/javascript/common/configuration/integrations/interactions.mdx @@ -0,0 +1,81 @@ +--- +title: Interactions +description: "Capture clicks and the work they trigger as browser spans." +notSupported: + - javascript.cordova + - javascript.capacitor + - javascript.electron + - javascript.node + - javascript.aws-lambda + - javascript.azure-functions + - javascript.connect + - javascript.express + - javascript.fastify + - javascript.gcp-functions + - javascript.hapi + - javascript.hono + - javascript.koa + - javascript.nitro + - javascript.nestjs + - javascript.deno + - javascript.cloudflare + - javascript.bun + - javascript.effect + - javascript.elysia + - javascript.firebase + - javascript.mastra +--- + + + +This integration only works inside a browser environment. Requires JavaScript SDK version 11 or later. + + + +_Import name: `Sentry.interactionsIntegration`_ + +The Interactions integration captures clicks and the work they trigger as spans. Use it with BrowserTracing or your framework's routing integration to associate interactions with the current route. + + + +This integration is experimental and can generate a large number of spans. + + + +```javascript +Sentry.init({ + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.interactionsIntegration(), + ], +}); +``` + +Clicks outside an active pageload or navigation create a `ui.action.click` span. Requests and other spans started during the interaction become its children. The integration also captures individual clicks as `ui.interaction.click` spans through the browser's Event Timing API. + + + WebVitals + +collects INP independently of this integration. + +## Configuration Options + +These timeouts apply to interaction spans, independently of BrowserTracing's pageload and navigation timeouts. + + + +Time in milliseconds to wait before finishing an interaction span when no unfinished child spans remain. + + + + + +Maximum duration of an interaction span in milliseconds, including time spent waiting for child spans. + + + + + +Maximum time in milliseconds a child span can run before the interaction span finishes. + + diff --git a/docs/platforms/javascript/common/configuration/integrations/usertiming.mdx b/docs/platforms/javascript/common/configuration/integrations/usertiming.mdx new file mode 100644 index 00000000000000..40416a8985e2a3 --- /dev/null +++ b/docs/platforms/javascript/common/configuration/integrations/usertiming.mdx @@ -0,0 +1,60 @@ +--- +title: UserTiming +description: "Capture performance.mark() and performance.measure() entries as browser spans." +notSupported: + - javascript.cordova + - javascript.capacitor + - javascript.electron + - javascript.node + - javascript.aws-lambda + - javascript.azure-functions + - javascript.connect + - javascript.express + - javascript.fastify + - javascript.gcp-functions + - javascript.hapi + - javascript.hono + - javascript.koa + - javascript.nitro + - javascript.nestjs + - javascript.deno + - javascript.cloudflare + - javascript.bun + - javascript.effect + - javascript.elysia + - javascript.firebase + - javascript.mastra +--- + + + +This integration only works inside a browser environment. Requires JavaScript SDK version 11 or later. + + + +_Import name: `Sentry.userTimingIntegration`_ + +The UserTiming integration captures `performance.mark()` and `performance.measure()` entries as spans. Use it with BrowserTracing or your framework's routing integration. Timing entries are added to pageload and navigation spans when those spans end. + +```javascript +Sentry.init({ + integrations: [ + Sentry.browserTracingIntegration(), + Sentry.userTimingIntegration(), + ], +}); +``` + +## Configuration Options + + + +Skip timing entries whose names match any string or regular expression in this array. Use this to exclude measurements from third-party code. + +```javascript +Sentry.userTimingIntegration({ + ignore: ["third-party-mark", /^framework-/], +}); +``` + + diff --git a/docs/platforms/javascript/common/configuration/integrations/webvitals.mdx b/docs/platforms/javascript/common/configuration/integrations/webvitals.mdx new file mode 100644 index 00000000000000..729c14c4d8bf53 --- /dev/null +++ b/docs/platforms/javascript/common/configuration/integrations/webvitals.mdx @@ -0,0 +1,77 @@ +--- +title: WebVitals +description: "Configure browser Web Vitals collection, including INP, LCP, and CLS." +notSupported: + - javascript.cordova + - javascript.capacitor + - javascript.electron + - javascript.node + - javascript.aws-lambda + - javascript.azure-functions + - javascript.connect + - javascript.express + - javascript.fastify + - javascript.gcp-functions + - javascript.hapi + - javascript.hono + - javascript.koa + - javascript.nitro + - javascript.nestjs + - javascript.deno + - javascript.cloudflare + - javascript.bun + - javascript.effect + - javascript.elysia + - javascript.firebase + - javascript.mastra +--- + + + +This integration only works inside a browser environment. Requires JavaScript SDK version 11 or later. + + + +_Import name: `Sentry.webVitalsIntegration`_ + +The WebVitals integration captures LCP, CLS, and INP for the [Web Vitals dashboard](/product/dashboards/sentry-dashboards/frontend/web-vitals/). + + + BrowserTracing + +adds this integration automatically. Configure it through BrowserTracing's +`webVitals` option: + +```javascript +Sentry.init({ + integrations: [ + Sentry.browserTracingIntegration({ + webVitals: { + ignore: ["inp"], + }, + }), + ], +}); +``` + +You can also add `Sentry.webVitalsIntegration({ ... })` directly to `integrations`. Its options take precedence over BrowserTracing's Web Vitals settings. + +## Configuration Options + + + +Web Vitals to skip. By default, all supported Web Vitals are collected. + + + + + +Collect LCP, CLS, and INP for each soft navigation detected by the browser's Soft Navigations API. Requires stream mode and a browser that supports this API. Set to `false` to collect one set of vitals for the page lifetime. + + + + + +Collect LCP, CLS, and INP when a page is restored from the back/forward cache. Requires stream mode and BrowserTracing with `instrumentBfcacheRestore` enabled. Set to `false` to disable Web Vitals collection for restores. + + diff --git a/docs/platforms/javascript/common/install/loader.mdx b/docs/platforms/javascript/common/install/loader.mdx index 91de29e976014d..f618b8e4655b4a 100644 --- a/docs/platforms/javascript/common/install/loader.mdx +++ b/docs/platforms/javascript/common/install/loader.mdx @@ -416,7 +416,7 @@ Our CDN hosts a variety of bundles: - `bundle.tracing.replay.logs.metrics..js` - Error monitoring, tracing, session replay, logs, and metrics - `bundle.tracing.replay.feedback.logs.metrics..js` - Error monitoring, tracing, session replay, feedback, logs, and metrics -Additionally, each of the integrations in `@sentry/integrations` is available as a bundle named `..js`. +Some integrations are available as separate bundles. See Lazy Loading Integrations for the supported list. In SDK version 11, UserTiming and Interactions require separate loading; FetchStreamPerformance and WebVitals are included in bundles that support tracing. Since v8 of the SDK, the bundles are ES6 by default. If you need ES5 support, make sure to add a polyfill for ES5 features yourself. Alternatively, you can use the v7 bundles and add the `.es5` modifier. diff --git a/docs/platforms/javascript/common/migration/v10-to-v11/index.mdx b/docs/platforms/javascript/common/migration/v10-to-v11/index.mdx index 83aa7dbabd85a7..a75ec94005386f 100644 --- a/docs/platforms/javascript/common/migration/v10-to-v11/index.mdx +++ b/docs/platforms/javascript/common/migration/v10-to-v11/index.mdx @@ -866,6 +866,8 @@ Sentry.init({ }); ``` +See BrowserSession for lifecycle configuration and session health details. + ### The `DOMException.code` Tag Was Removed Events created from a `DOMException` no longer carry a `DOMException.code` tag, because the `code` property is deprecated in favor of `DOMException.name`, which is already the exception type. Switch searches and alert rules that use the tag to `error.type`. @@ -897,10 +899,10 @@ Several `browserTracingIntegration` options moved to dedicated integrations, or | Removed option | Replacement | | ------------------------------------- | ----------------------------------------------- | -| `_experiments.enableInteractions` | `interactionsIntegration()` | -| `ignorePerformanceApiSpans` | `userTimingIntegration({ ignore: [...] })` | -| `trackFetchStreamPerformance` | `fetchStreamPerformanceIntegration()` | -| `_experiments.enableStandalone*Spans` | Removed, CLS and LCP are no longer configurable | +| `_experiments.enableInteractions` | `interactionsIntegration()` | +| `ignorePerformanceApiSpans` | `userTimingIntegration({ ignore: [...] })` | +| `trackFetchStreamPerformance` | `fetchStreamPerformanceIntegration()` | +| `_experiments.enableStandalone*Spans` | Removed. The trace lifecycle determines how CLS and LCP are sent. | ```js // Before @@ -925,12 +927,16 @@ Sentry.init({ }); ``` -`browserTracingIntegration` no longer captures `performance.mark()` and `performance.measure()` spans by default, and no longer accepts an `_experiments` object at all. The `idleTimeout`, `finalTimeout`, and `childSpanTimeout` options of interaction spans are configured on `interactionsIntegration` now, with the same defaults as before. +`browserTracingIntegration` no longer captures `performance.mark()` and `performance.measure()` spans by default, and no longer accepts an `_experiments` object. Configure `idleTimeout`, `finalTimeout`, and `childSpanTimeout` for interaction spans on `interactionsIntegration`, with the same defaults as before. BrowserTracing's timeout options still control pageload and navigation spans. -Web vitals also changed: +BrowserTracing now automatically adds the WebVitals integration. Web Vitals changed as follows: - CLS and LCP are recorded as measurements on the pageload span, or as dedicated spans in stream mode. -- INP is always sent as a web vital span, carrying its value in the `browser.web_vital.inp.value` attribute instead of as a span measurement. Update custom dashboards and alerts that read it as a measurement (built-in dashboards do not need adjustments). +- When collected, INP is always sent as a Web Vital span, carrying its value in the `browser.web_vital.inp.value` attribute instead of as a span measurement. Update custom dashboards and alerts that read it as a measurement. Built-in dashboards do not need adjustments. +- The `enableInp` option is deprecated. To disable INP, use `browserTracingIntegration({ webVitals: { ignore: ["inp"] } })`. The `ignore` array can also contain `"cls"` or `"lcp"` to skip those vitals. +- To configure Web Vitals, pass `webVitals` options to BrowserTracing, or add `webVitalsIntegration()` explicitly. Explicit registration takes precedence over BrowserTracing's `webVitals` and `enableInp` options. +- Soft-navigation vitals are enabled by default in stream mode on browsers that support the Soft Navigations API. Set `webVitals: { softNavigations: false }` to keep one set of vitals for the page lifetime. +- BrowserTracing starts a navigation span after a back/forward-cache restore by default. Set `instrumentBfcacheRestore: false` to disable it. Web Vitals for restores are collected by default in stream mode when `instrumentBfcacheRestore` is enabled. Set `webVitals: { bfcacheNavigations: false }` to disable this collection. diff --git a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx index 1ed43c3321d851..afe3ddeb33883d 100644 --- a/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx +++ b/docs/platforms/javascript/common/tracing/instrumentation/automatic-instrumentation.mdx @@ -29,7 +29,7 @@ Once you enable tracing, the SDK automatically captures performance data without | **Page loads** | Full page load performance | LCP, CLS, TTFB | | **Navigations** | Client-side route changes | Duration, Web Vitals | | **HTTP requests** | All fetch/XHR calls | Duration, status, URL | -| **User interactions** | Clicks, inputs that trigger work | INP (responsiveness) | +| **Responsiveness** | Interaction to Next Paint | INP | | **Long tasks** | Main thread blocking > 50ms | Duration, attribution | @@ -118,36 +118,60 @@ Exclude requests from tracing, such as health checks or analytics pings: -## Web Vitals & Interactions + -### Interaction to Next Paint (INP) + - +## Web Vitals & Interactions -Automatically captures [INP](/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts/#interaction-to-next-paint-inp) events to measure responsiveness. Results appear in the [Web Vitals](/product/dashboards/sentry-dashboards/frontend/web-vitals/) module. +BrowserTracing automatically adds WebVitals to collect loading, visual stability, and responsiveness metrics. Individual click spans and the work they trigger require the separate Interactions integration. -Default: `true` in SDK 8.x+, `false` in 7.x. +### Configure Web Vitals - + -As of SDK version 10.0.0, First Input Delay (FID) is no longer reported. Google deprecated FID in favor of INP, which provides a more comprehensive measure of responsiveness. If you have alerts or dashboards based on FID, update them to use INP instead. +Configure the automatically added WebVitals integration: - +- `ignore`: Web Vitals to skip, from `"cls"`, `"inp"`, and `"lcp"`. Defaults to `[]`. +- `softNavigations`: Collect vitals for browser-detected soft navigations. Defaults to `true` in supporting browsers with stream mode. +- `bfcacheNavigations`: Collect vitals after back/forward-cache restoration. Defaults to `true`. Requires stream mode and `instrumentBfcacheRestore` enabled. + +For example, to disable INP collection: +If you explicitly add `webVitalsIntegration()`, configure these options on that integration instead. See WebVitals for details and browser support requirements. + - +### Interaction to Next Paint (INP) + +[INP](/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts/#interaction-to-next-paint-inp) measures responsiveness and is collected by default. In SDK version 11, its value is sent as the `browser.web_vital.inp.value` attribute on a Web Vital span, including in static mode. Update custom dashboards and alerts that read INP as a span measurement. Built-in dashboards do not need adjustments. + + -Sample rate for INP spans, applied on top of `tracesSampleRate`. For example, `interactionsSampleRate: 0.5` with `tracesSampleRate: 0.1` results in 5% of interactions captured. +Deprecated in SDK version 11. Use `webVitals: { ignore: ["inp"] }` to disable INP. Explicitly adding `webVitalsIntegration()` takes precedence over this option. + + + + ## Advanced Options +These timeouts control pageload and navigation spans. + + + + +Configure timeouts for click-triggered work on the Interactions integration separately. + + + + Time in ms to wait before finishing a pageload/navigation span when no unfinished child spans remain. @@ -182,6 +206,20 @@ Enable/disable automatic `navigation` span creation on history changes. + + + + + +Start a navigation span when the page is restored from the back/forward cache. This starts a new trace for activity after the restore. It is independent of `instrumentNavigation`. + +Web Vitals for restored pages are collected by default in stream mode. Set `webVitals: { bfcacheNavigations: false }` to disable this collection. See WebVitals for requirements. + + + + + + Enable/disable automatic spans for long tasks (main thread blocking > 50ms). @@ -250,21 +288,24 @@ Sentry.init({ - + + -Ignore spans created from `performance.mark()` and `performance.measure()`: +Starting with SDK version 11, capturing `performance.mark()` and `performance.measure()` entries requires the UserTiming integration. Use its `ignore` option to filter entries by name: ```javascript Sentry.init({ integrations: [ - Sentry.browserTracingIntegration({ - ignorePerformanceApiSpans: ["myMeasurement", /myMark/], + Sentry.browserTracingIntegration(), + Sentry.userTimingIntegration({ + ignore: ["myMeasurement", /myMark/], }), ], }); ``` - + + diff --git a/docs/platforms/javascript/guides/nextjs/tracing/index.mdx b/docs/platforms/javascript/guides/nextjs/tracing/index.mdx index 802c9ced62d901..9e48a55f335876 100644 --- a/docs/platforms/javascript/guides/nextjs/tracing/index.mdx +++ b/docs/platforms/javascript/guides/nextjs/tracing/index.mdx @@ -185,7 +185,7 @@ export async function submitForm(formData: FormData) { ## Web Vitals -The SDK automatically captures [Web Vitals](/product/dashboards/sentry-dashboards/frontend/web-vitals/) on every page load. These metrics measure real user experience: +The SDK automatically captures [Web Vitals](/product/dashboards/sentry-dashboards/frontend/web-vitals/) in the browser. These metrics measure real user experience: | Metric | What It Measures | Threshold (Good) | |--------|------------------|------------------| @@ -195,7 +195,9 @@ The SDK automatically captures [Web Vitals](/product/dashboards/sentry-dashboard | **FCP** | First Contentful Paint — initial render | ≤ 1s | | **TTFB** | Time to First Byte — server response | ≤ 100ms | -Web Vitals appear as measurements on page load transactions and feed into your [Performance Score](/product/dashboards/sentry-dashboards/frontend/web-vitals/#performance-score). See [Web Vitals Concepts](/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts/) for detailed explanations of each metric. +Web Vitals feed into your [Performance Score](/product/dashboards/sentry-dashboards/frontend/web-vitals/#performance-score). In SDK version 11's default stream mode, LCP, CLS, and INP are sent as Web Vital spans. INP's value is stored in `browser.web_vital.inp.value`, including in static mode. Update custom dashboards and alerts that read INP as a span measurement. + +To configure collection, including soft-navigation and back/forward-cache vitals, see the WebVitals integration. For definitions of each metric, see [Web Vitals Concepts](/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts/). ## Custom Instrumentation diff --git a/docs/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.mdx b/docs/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.mdx index a31ad37e5ed377..7d62abe1486ffe 100644 --- a/docs/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.mdx +++ b/docs/product/dashboards/sentry-dashboards/frontend/web-vitals/web-vitals-concepts.mdx @@ -9,7 +9,9 @@ og_image: /og-images/product-insights-frontend-web-vitals-web-vitals-concepts.pn [Web Vitals](https://web.dev/vitals/) are a set of metrics defined by Google to measure render time, response time, and layout shift. Each data point provides insights about the overall [performance](/product/dashboards/sentry-dashboards/) of your application. -The in-browser Sentry SDKs collect web vitals information (where supported) and adds that information to frontend [transactions](/product/dashboards/sentry-dashboards/transaction-summary/). These web vitals are then summarized in the [Web Vitals dashboard](/product/dashboards/sentry-dashboards/frontend/web-vitals/) to give you a quick overview of how each page is performing for your users. +Sentry's browser SDKs collect supported Web Vitals and associate them with your application's traces. The [Web Vitals dashboard](/product/dashboards/sentry-dashboards/frontend/web-vitals/) summarizes these metrics to show how each page performs for your users. + +In JavaScript SDK version 11's default stream mode, LCP, CLS, and INP are sent as Web Vital spans. Earlier SDK versions and static mode can report vitals as measurements on pageload spans. INP in version 11 always uses a Web Vital span with the `browser.web_vital.inp.value` attribute. See the [WebVitals integration](/platforms/javascript/configuration/integrations/webvitals/) to configure collection and update custom dashboards or alerts that use the old INP measurement. ![Visualization of Web Vitals](../../img/diagram-transaction-vitals.png) @@ -24,7 +26,7 @@ Google considers Core Web Vitals to be the most important metrics for measuring ### Interaction to Next Paint (INP) -On March 12, 2024, Interaction to Next Paint (INP) replaced First Input Delay (FID) as a Core Web Vital. Prior to this, INP was an experimental metric that Sentry did not collect. To begin collecting INP measurements, make sure your JavaScript SDK version is [7.104.0](https://github.com/getsentry/sentry-javascript/releases/tag/7.104.0) or higher and that the option [`enableInp`](/platforms/javascript/tracing/instrumentation/automatic-instrumentation/#enableinp) is on (starting with version `8.0.0`, `enableInp` is enabled by default). +INP replaced First Input Delay (FID) as a Core Web Vital on March 12, 2024. Sentry supports INP starting with JavaScript SDK version 7.104.0. It is enabled by default with BrowserTracing in version 8 and later. In version 11, configure collection through the [WebVitals integration](/platforms/javascript/configuration/integrations/webvitals/). The older `enableInp` option is deprecated. [Interaction to Next Paint (INP)](https://web.dev/articles/inp) measures the time from when a user interacts with a page (through a click, tap, or keyboard input) to when the next paint (rendering of content on the screen) occurs. INP aims to assess how quickly users see a response from the website after taking an action, which is crucial for providing a smooth and responsive user experience. diff --git a/includes/migration/javascript-v11/browser-session-lifecycle-page.mdx b/includes/migration/javascript-v11/browser-session-lifecycle-page.mdx index 8da8a9aecd7295..0545f0a4f3b2db 100644 --- a/includes/migration/javascript-v11/browser-session-lifecycle-page.mdx +++ b/includes/migration/javascript-v11/browser-session-lifecycle-page.mdx @@ -17,3 +17,5 @@ Sentry.init({ integrations: [Sentry.browserSessionIntegration({ lifecycle: "route" })], }); ``` + +See BrowserSession for lifecycle configuration and session health details. diff --git a/includes/migration/javascript-v11/browser-session-unhandled.mdx b/includes/migration/javascript-v11/browser-session-unhandled.mdx index 1827622d318bb4..5ff4021d42066e 100644 --- a/includes/migration/javascript-v11/browser-session-unhandled.mdx +++ b/includes/migration/javascript-v11/browser-session-unhandled.mdx @@ -10,3 +10,5 @@ order: 20 --- Sessions affected by an uncaught error are recorded as `unhandled` instead of `crashed`. If you track crash-free session rates or have alerts built on them, expect the rate to shift. + +See BrowserSession for session health details. diff --git a/includes/migration/javascript-v11/browser-user-timing.mdx b/includes/migration/javascript-v11/browser-user-timing.mdx index 45106aad2700ee..6897a55acc1b93 100644 --- a/includes/migration/javascript-v11/browser-user-timing.mdx +++ b/includes/migration/javascript-v11/browser-user-timing.mdx @@ -29,3 +29,5 @@ Sentry.init({ ], }); ``` + +See UserTiming for configuration and CDN loading instructions. diff --git a/includes/migration/javascript-v11/browser-web-vital-options.mdx b/includes/migration/javascript-v11/browser-web-vital-options.mdx index f7b759a6e913a0..2f4e48b7aaf205 100644 --- a/includes/migration/javascript-v11/browser-web-vital-options.mdx +++ b/includes/migration/javascript-v11/browser-web-vital-options.mdx @@ -1,6 +1,6 @@ --- id: browser-web-vital-options -title: "Standalone CLS and LCP span options were removed" +title: "Web Vitals moved to a dedicated integration" phase: code-changes category: removed-api severity: action-required @@ -9,6 +9,10 @@ platformCategory: browser order: 220 --- -The `_experiments.enableStandalone*Spans` options were removed. CLS and LCP are no longer configurable, and `browserTracingIntegration` no longer accepts an `_experiments` object at all. +The `_experiments.enableStandalone*Spans` options were removed, and `browserTracingIntegration` no longer accepts an `_experiments` object. BrowserTracing automatically adds `webVitalsIntegration` to collect Web Vitals. CLS and LCP are recorded as measurements on the pageload span, or as dedicated spans in stream mode. + +Configure collection through `browserTracingIntegration({ webVitals: { ... } })`. The `enableInp` option is deprecated. Use `webVitals: { ignore: ["inp"] }` to disable INP, or include `"cls"` or `"lcp"` in `ignore` to skip those vitals. If you explicitly add `webVitalsIntegration()`, its options take precedence. + +Soft-navigation vitals are enabled by default in stream mode on supporting browsers. Set `webVitals: { softNavigations: false }` to keep one set of vitals for the page lifetime. Back/forward-cache vitals are also enabled by default in stream mode when BrowserTracing's `instrumentBfcacheRestore` is enabled. Set `webVitals: { bfcacheNavigations: false }` to disable collection for restores. See WebVitals for requirements. diff --git a/includes/migration/javascript-v11/inp-web-vital-span.mdx b/includes/migration/javascript-v11/inp-web-vital-span.mdx index 5e1eaaabe848e1..b46f2b2b6d09c8 100644 --- a/includes/migration/javascript-v11/inp-web-vital-span.mdx +++ b/includes/migration/javascript-v11/inp-web-vital-span.mdx @@ -9,4 +9,6 @@ platformCategory: browser order: 80 --- -INP is always sent as a web vital span, carrying its value in the `browser.web_vital.inp.value` attribute instead of as a span measurement. Update custom dashboards and alerts that read it as a measurement (built-in dashboards do not need adjustments). +When collected, INP is always sent as a Web Vital span, carrying its value in the `browser.web_vital.inp.value` attribute instead of as a span measurement. Update custom dashboards and alerts that read it as a measurement. Built-in dashboards do not need adjustments. + +See WebVitals for collection options and the attributes sent with each vital. diff --git a/includes/migration/javascript-v11/interaction-spans-integration.mdx b/includes/migration/javascript-v11/interaction-spans-integration.mdx index 2abf543870bde9..2f814c16d79010 100644 --- a/includes/migration/javascript-v11/interaction-spans-integration.mdx +++ b/includes/migration/javascript-v11/interaction-spans-integration.mdx @@ -30,4 +30,4 @@ Sentry.init({ }); ``` -The `idleTimeout`, `finalTimeout`, and `childSpanTimeout` options of interaction spans are configured on `interactionsIntegration` now, with the same defaults as before. +Configure `idleTimeout`, `finalTimeout`, and `childSpanTimeout` for interaction spans on `interactionsIntegration`, with the same defaults as before. BrowserTracing's timeout options still control pageload and navigation spans. See Interactions for configuration and CDN loading instructions. diff --git a/includes/migration/javascript-v11/track-fetch-stream-performance.mdx b/includes/migration/javascript-v11/track-fetch-stream-performance.mdx index c2dd1eedf55383..167aecfba86c88 100644 --- a/includes/migration/javascript-v11/track-fetch-stream-performance.mdx +++ b/includes/migration/javascript-v11/track-fetch-stream-performance.mdx @@ -29,3 +29,5 @@ Sentry.init({ ], }); ``` + +See FetchStreamPerformance for supported response types and setup instructions. diff --git a/platform-includes/configuration/auto-session-tracking/javascript.mdx b/platform-includes/configuration/auto-session-tracking/javascript.mdx index 253272c2114086..f72314bc0f3468 100644 --- a/platform-includes/configuration/auto-session-tracking/javascript.mdx +++ b/platform-includes/configuration/auto-session-tracking/javascript.mdx @@ -1,7 +1,6 @@ -By default, the JavaScript Browser SDKs are sending sessions. -We create a session for every page load. For single-page applications, we will create a new session for every navigation change (History API). +JavaScript Browser SDKs track sessions by default. A session starts on page load and continues across client-side navigations. A hard reload or navigation starts a new session. To disable the default sessions handling, disable the `BrowserSession` integration: @@ -37,7 +36,18 @@ Sentry.init({ Sessions are marked as: -- `crashed` if an _unhandled error_ or _unhandled promise rejection_ bubbled up to the global handler. + + +- `unhandled` in the browser if an _unhandled error_ or _unhandled promise rejection_ bubbles up to the global handler. + + + + + +- `crashed` on the server if an _unhandled error_ or _unhandled promise rejection_ bubbles up to the global handler. + + + - `errored` if the SDK captures an event that contains an exception (this includes manually captured errors). To receive data on user adoption, such as users crash free rate percentage, and the number of users that have adopted a specific release, set the user on the [`initialScope`](/platforms/javascript/configuration/options/#initial-scope) when initializing the SDK. diff --git a/platform-includes/configuration/integrations/javascript.astro.mdx b/platform-includes/configuration/integrations/javascript.astro.mdx index 5d44264f8c76de..a5eb483d43f1d9 100644 --- a/platform-includes/configuration/integrations/javascript.astro.mdx +++ b/platform-includes/configuration/integrations/javascript.astro.mdx @@ -26,6 +26,10 @@ Depending on whether an integration enhances the functionality of a particular r | [`browserApiErrorsIntegration`](./browserapierrors) | ✓ | ✓ | | | | | [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ | | [`browserTracingIntegration`](./browsertracing) | ✓ | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`globalHandlersIntegration`](./globalhandlers) | ✓ | ✓ | | | | | [`httpContextIntegration`](./httpcontext) | ✓ | | | | ✓ | | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | diff --git a/platform-includes/configuration/integrations/javascript.gatsby.mdx b/platform-includes/configuration/integrations/javascript.gatsby.mdx index 5aff5b73147a26..bf11cd5d8784b5 100644 --- a/platform-includes/configuration/integrations/javascript.gatsby.mdx +++ b/platform-includes/configuration/integrations/javascript.gatsby.mdx @@ -13,6 +13,10 @@ | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | | [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ | | [`browserTracingIntegration`](./browsertracing) | | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`captureConsoleIntegration`](./captureconsole) | | | | | ✓ | | [`contextLinesIntegration`](./contextlines) | | ✓ | | | | | [`extraErrorDataIntegration`](./extraerrordata) | | | | | ✓ | diff --git a/platform-includes/configuration/integrations/javascript.mdx b/platform-includes/configuration/integrations/javascript.mdx index 3061f61c3fe67d..fb44858ee5d822 100644 --- a/platform-includes/configuration/integrations/javascript.mdx +++ b/platform-includes/configuration/integrations/javascript.mdx @@ -14,6 +14,10 @@ | [`anthropicAIIntegration`](../../agent-tracing/anthropic) | | | ✓ | | ✓ | | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | | [`browserTracingIntegration`](./browsertracing) | | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`elementTimingIntegration`](./elementtiming) | | | | | | | [`captureConsoleIntegration`](./captureconsole) | | ✓ | | | ✓ | | [`contextLinesIntegration`](./contextlines) | | ✓ | | | | diff --git a/platform-includes/configuration/integrations/javascript.nextjs.mdx b/platform-includes/configuration/integrations/javascript.nextjs.mdx index 58b03e0ad63ff6..b80523d496b3a7 100644 --- a/platform-includes/configuration/integrations/javascript.nextjs.mdx +++ b/platform-includes/configuration/integrations/javascript.nextjs.mdx @@ -27,6 +27,10 @@ Depending on whether an integration enhances the functionality of a particular r | [`browserApiErrorsIntegration`](./browserapierrors) | ✓ | ✓ | | | | | [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ | | [`browserTracingIntegration`](./browsertracing) | ✓ | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`globalHandlersIntegration`](./globalhandlers) | ✓ | ✓ | | | | | [`httpContextIntegration`](./httpcontext) | ✓ | | | | ✓ | | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | diff --git a/platform-includes/configuration/integrations/javascript.nuxt.mdx b/platform-includes/configuration/integrations/javascript.nuxt.mdx index 299722eb631869..3af9b312da31e3 100644 --- a/platform-includes/configuration/integrations/javascript.nuxt.mdx +++ b/platform-includes/configuration/integrations/javascript.nuxt.mdx @@ -26,6 +26,10 @@ Depending on whether an integration enhances the functionality of a particular r | [`browserApiErrorsIntegration`](./browserapierrors) | ✓ | ✓ | | | | | [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ | | [`browserTracingIntegration`](./browsertracing) | ✓ | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`globalHandlersIntegration`](./globalhandlers) | ✓ | ✓ | | | | | [`httpContextIntegration`](./httpcontext) | ✓ | | | | ✓ | | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | diff --git a/platform-includes/configuration/integrations/javascript.remix.mdx b/platform-includes/configuration/integrations/javascript.remix.mdx index b7e2d2dc2a8ab6..9d6c7c4c4e0470 100644 --- a/platform-includes/configuration/integrations/javascript.remix.mdx +++ b/platform-includes/configuration/integrations/javascript.remix.mdx @@ -26,6 +26,10 @@ Depending on whether an integration enhances the functionality of a particular r | [`browserApiErrorsIntegration`](./browserapierrors) | ✓ | ✓ | | | | | [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ | | [`browserTracingIntegration`](./browsertracing) | ✓ | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`globalHandlersIntegration`](./globalhandlers) | ✓ | ✓ | | | | | [`httpContextIntegration`](./httpcontext) | ✓ | | | | ✓ | | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | diff --git a/platform-includes/configuration/integrations/javascript.solidstart.mdx b/platform-includes/configuration/integrations/javascript.solidstart.mdx index a33bc442497a43..873715155f3101 100644 --- a/platform-includes/configuration/integrations/javascript.solidstart.mdx +++ b/platform-includes/configuration/integrations/javascript.solidstart.mdx @@ -26,6 +26,10 @@ Depending on whether an integration enhances the functionality of a particular r | [`browserApiErrorsIntegration`](./browserapierrors) | ✓ | ✓ | | | | | [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ | | [`browserTracingIntegration`](./browsertracing) | ✓ | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`globalHandlersIntegration`](./globalhandlers) | ✓ | ✓ | | | | | [`httpContextIntegration`](./httpcontext) | ✓ | | | | ✓ | | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | diff --git a/platform-includes/configuration/integrations/javascript.sveltekit.mdx b/platform-includes/configuration/integrations/javascript.sveltekit.mdx index 5f9b60c65be938..9028f20758da06 100644 --- a/platform-includes/configuration/integrations/javascript.sveltekit.mdx +++ b/platform-includes/configuration/integrations/javascript.sveltekit.mdx @@ -26,6 +26,10 @@ Depending on whether an integration enhances the functionality of a particular r | [`browserApiErrorsIntegration`](./browserapierrors) | ✓ | ✓ | | | | | [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ | | [`browserTracingIntegration`](./browsertracing) | ✓ | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`globalHandlersIntegration`](./globalhandlers) | ✓ | ✓ | | | | | [`httpContextIntegration`](./httpcontext) | ✓ | | | | ✓ | | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | diff --git a/platform-includes/configuration/integrations/javascript.vue.mdx b/platform-includes/configuration/integrations/javascript.vue.mdx index ecbd989aa0f011..ee901f30670450 100644 --- a/platform-includes/configuration/integrations/javascript.vue.mdx +++ b/platform-includes/configuration/integrations/javascript.vue.mdx @@ -14,6 +14,10 @@ | [`vueIntegration`](./vue) | ✓ | ✓ | ✓ | | | | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | | [`browserTracingIntegration`](./browsertracing) | | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`captureConsoleIntegration`](./captureconsole) | | | | | ✓ | | [`contextLinesIntegration`](./contextlines) | | ✓ | | | | | [`extraErrorDataIntegration`](./extraerrordata) | | | | | ✓ | diff --git a/platform-includes/configuration/integrations/javascript.wasm.mdx b/platform-includes/configuration/integrations/javascript.wasm.mdx index ac3c8c7eab56d3..b1c80277cfc54e 100644 --- a/platform-includes/configuration/integrations/javascript.wasm.mdx +++ b/platform-includes/configuration/integrations/javascript.wasm.mdx @@ -13,6 +13,10 @@ | [`browserProfilingIntegration`](./browserprofiling) | | | ✓ | | | | [`browserSessionIntegration`](./browsersession) | ✓ | | | | ✓ | | [`browserTracingIntegration`](./browsertracing) | | | ✓ | | ✓ | +| [`fetchStreamPerformanceIntegration`](./fetchstreamperformance) | | | ✓ | | | +| [`interactionsIntegration`](./interactions) | | | ✓ | | | +| [`userTimingIntegration`](./usertiming) | | | ✓ | | | +| [`webVitalsIntegration`](./webvitals) | With BrowserTracing | | ✓ | | | | [`captureConsoleIntegration`](./captureconsole) | | | | | ✓ | | [`contextLinesIntegration`](./contextlines) | | ✓ | | | | | [`extraErrorDataIntegration`](./extraerrordata) | | | | | ✓ | diff --git a/platform-includes/performance/enable-inp-example/javascript.mdx b/platform-includes/performance/enable-inp-example/javascript.mdx index 9182861cab98ee..7c64af2750285c 100644 --- a/platform-includes/performance/enable-inp-example/javascript.mdx +++ b/platform-includes/performance/enable-inp-example/javascript.mdx @@ -3,7 +3,9 @@ Sentry.init({ // ... integrations: [ Sentry.browserTracingIntegration({ - enableInp: true, + webVitals: { + ignore: ["inp"], + }, }), ], });