Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -40,11 +40,19 @@ Sentry.init({

## Configuration Options

<SdkOption name="lifecycle" type="'route' | 'page'" defaultValue="'route'" availableSince="10.39.0">
<SdkOption name="lifecycle" type="'route' | 'page'" defaultValue="'page'" availableSince="10.39.0">

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" })],
});
```

</SdkOption>
Original file line number Diff line number Diff line change
@@ -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
---

<Alert>

This integration only works inside a browser environment. Requires JavaScript SDK version 11 or later.

</Alert>

_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 <PlatformLink to="/configuration/integrations/browsertracing/">BrowserTracing</PlatformLink> 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.
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ Lazy loading is available for the following integrations:
- `reportingObserverIntegration`
- `rewriteFramesIntegration`
- `browserProfilingIntegration`
- `userTimingIntegration`
- `interactionsIntegration`

</PlatformCategorySection>

Expand Down
Original file line number Diff line number Diff line change
@@ -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
---

<Alert>

This integration only works inside a browser environment. Requires JavaScript SDK version 11 or later.

</Alert>

_Import name: `Sentry.interactionsIntegration`_

The Interactions integration captures clicks and the work they trigger as spans. Use it with <PlatformLink to="/configuration/integrations/browsertracing/">BrowserTracing</PlatformLink> or your framework's routing integration to associate interactions with the current route.

<Alert level="warning">

This integration is experimental and can generate a large number of spans.

</Alert>

```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.

<PlatformLink to="/configuration/integrations/webvitals/">
WebVitals
</PlatformLink>
collects INP independently of this integration.

## Configuration Options

These timeouts apply to interaction spans, independently of BrowserTracing's pageload and navigation timeouts.

<SdkOption name="idleTimeout" type="number" defaultValue="1000">

Time in milliseconds to wait before finishing an interaction span when no unfinished child spans remain.

</SdkOption>

<SdkOption name="finalTimeout" type="number" defaultValue="30000">

Maximum duration of an interaction span in milliseconds, including time spent waiting for child spans.

</SdkOption>

<SdkOption name="childSpanTimeout" type="number" defaultValue="15000">

Maximum time in milliseconds a child span can run before the interaction span finishes.

</SdkOption>
Original file line number Diff line number Diff line change
@@ -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
---

<Alert>

This integration only works inside a browser environment. Requires JavaScript SDK version 11 or later.

</Alert>

_Import name: `Sentry.userTimingIntegration`_

The UserTiming integration captures `performance.mark()` and `performance.measure()` entries as spans. Use it with <PlatformLink to="/configuration/integrations/browsertracing/">BrowserTracing</PlatformLink> 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

<SdkOption name="ignore" type="Array<string | RegExp>" defaultValue="[]">

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-/],
});
```

</SdkOption>
Original file line number Diff line number Diff line change
@@ -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
---

<Alert>

This integration only works inside a browser environment. Requires JavaScript SDK version 11 or later.

</Alert>

_Import name: `Sentry.webVitalsIntegration`_

The WebVitals integration captures LCP, CLS, and INP for the [Web Vitals dashboard](/product/dashboards/sentry-dashboards/frontend/web-vitals/).

<PlatformLink to="/configuration/integrations/browsertracing/">
BrowserTracing
</PlatformLink>
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

<SdkOption name="ignore" type="Array<'cls' | 'inp' | 'lcp'>" defaultValue="[]">

Web Vitals to skip. By default, all supported Web Vitals are collected.

</SdkOption>

<SdkOption name="softNavigations" type="boolean" defaultValue="true">

Collect LCP, CLS, and INP for each soft navigation detected by the browser's Soft Navigations API. Requires <PlatformLink to="/tracing/instrumentation/automatic-instrumentation/">stream mode</PlatformLink> and a browser that supports this API. Set to `false` to collect one set of vitals for the page lifetime.

</SdkOption>

<SdkOption name="bfcache" type="boolean" defaultValue="false">

Collect LCP, CLS, and INP when a page is restored from the back/forward cache. Requires stream mode and BrowserTracing with `instrumentBfcacheRestore` enabled.

</SdkOption>
2 changes: 1 addition & 1 deletion docs/platforms/javascript/common/install/loader.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -416,7 +416,7 @@ Our CDN hosts a variety of bundles:
- `bundle.tracing.replay.logs.metrics.<modifiers>.js` - Error monitoring, tracing, session replay, logs, and metrics
- `bundle.tracing.replay.feedback.logs.metrics.<modifiers>.js` - Error monitoring, tracing, session replay, feedback, logs, and metrics

Additionally, each of the integrations in `@sentry/integrations` is available as a bundle named `<integration-name>.<modifiers>.js`.
Some integrations are available as separate bundles. See <PlatformLink to="/configuration/integrations/#2-load-from-cdn-with-lazyloadintegration">Lazy Loading Integrations</PlatformLink> 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.

Expand Down
20 changes: 13 additions & 7 deletions docs/platforms/javascript/common/migration/v10-to-v11/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -866,6 +866,8 @@ Sentry.init({
});
```

See <PlatformLink to="/configuration/integrations/browsersession/">BrowserSession</PlatformLink> 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`.
Expand Down Expand Up @@ -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` | <PlatformLink to="/configuration/integrations/interactions/">`interactionsIntegration()`</PlatformLink> |
| `ignorePerformanceApiSpans` | <PlatformLink to="/configuration/integrations/usertiming/">`userTimingIntegration({ ignore: [...] })`</PlatformLink> |
| `trackFetchStreamPerformance` | <PlatformLink to="/configuration/integrations/fetchstreamperformance/">`fetchStreamPerformanceIntegration()`</PlatformLink> |
| `_experiments.enableStandalone*Spans` | Removed. The trace lifecycle determines how CLS and LCP are sent. |

```js
// Before
Expand All @@ -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 <PlatformLink to="/configuration/integrations/webvitals/">WebVitals integration</PlatformLink>. 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. Collecting Web Vitals for restores is a separate opt-in through `webVitals: { bfcache: true }` and requires stream mode.

</PlatformCategorySection>

Expand Down
Loading
Loading