---
title: "WebVitals"
description: "Configure browser Web Vitals collection, including INP, LCP, and CLS."
url: https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/webvitals/
---

# WebVitals | Sentry for React Router Framework

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

*Import name: `Sentry.webVitalsIntegration`*

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

[BrowserTracing](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/browsertracing.md)

adds this integration automatically. In SDK version 11 and later, configure it through BrowserTracing's `webVitals` option:

```javascript
Sentry.init({
  integrations: [
    Sentry.browserTracingIntegration({
      webVitals: {
        ignore: ["inp"],
      },
    }),
  ],
});
```

To configure it in SDK versions before 11, add `Sentry.webVitalsIntegration({ ... })` directly to `integrations`:

```javascript
Sentry.init({
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.webVitalsIntegration({ ignore: ["inp"] }),
  ],
});
```

You can also use this approach in SDK version 11 and later. An explicitly added WebVitals integration takes precedence over BrowserTracing's Web Vitals settings.

## [Configuration Options](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/webvitals.md#configuration-options)

### [ignore](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/webvitals.md#ignore)

| Type    | `Array<'cls' \| 'inp' \| 'lcp'>` |
| ------- | -------------------------------- |
| Default | `[]`                             |

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

### [softNavigations](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/webvitals.md#softNavigations)

| Type    | `boolean` |
| ------- | --------- |
| Default | `true`    |

Collect LCP, CLS, and INP for each soft navigation detected by the browser's Soft Navigations API. Requires [stream mode](https://docs.sentry.io/platforms/javascript/guides/react-router/tracing/instrumentation/automatic-instrumentation.md) and a browser that supports this API. Set to `false` to collect one set of vitals for the page lifetime.

### [bfcacheNavigations](https://docs.sentry.io/platforms/javascript/guides/react-router/configuration/integrations/webvitals.md#bfcacheNavigations)

| Type    | `boolean` |
| ------- | --------- |
| Default | `true`    |

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.