Demo
Đăng nhập

Pluggable Integrations

These pluggable integrations are snippets of code that augment functionality for specific applications and/or frameworks. We document them so you can see what they do and that they can be enabled.

How to Enable

Install the @sentry/integrations package and provide a new instance with your config to integrations option. Include the plugin after the SDK has been loaded.

For example:

Copied
import * as Sentry from "@sentry/browser";
import { ReportingObserver as ReportingObserverIntegration } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new ReportingObserverIntegration()],
});

ExtraErrorData

Import name: Sentry.Integrations.ExtraErrorData

This integration extracts all non-native attributes from the Error object and attaches them to the event as the extra data.

Available options:

Copied
import * as Sentry from "@sentry/browser";
import { ExtraErrorData as ExtraErrorDataIntegration } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new ExtraErrorDataIntegration(
    {
      // Limit of how deep the object serializer should go. Anything deeper than limit will
      // be replaced with standard Node.js REPL notation of [Object], [Array], [Function] or
      // a primitive value. Defaults to 3.
      // When changing this value, make sure to update `normalizeDepth` of the whole SDK
      // to `depth + 1` in order to get it serialized properly - https://docs.sentry.io/platforms/javascript/configuration/options/#normalize-depth
      depth: number;
    }
  )],
});

CaptureConsole

Import name: Sentry.Integrations.CaptureConsole

This integration captures all Console API calls and redirects them to Sentry using the captureMessage call. It then retriggers to preserve default native behavior.

Copied
import * as Sentry from "@sentry/browser";
import { CaptureConsole as CaptureConsoleIntegration } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new CaptureConsoleIntegration(
    {
      // array of methods that should be captured
      // defaults to ['log', 'info', 'warn', 'error', 'debug', 'assert']
      levels: string[];
    }
  )],
});

Debug

Import name: Sentry.Integrations.Debug

This integration allows you to inspect the content of the processed event, that will be passed to beforeSend and effectively send to the Sentry SDK. It will always run as the last integration, no matter when it was registered.

Available options:

Copied
import * as Sentry from "@sentry/browser";
import { Debug as DebugIntegration } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new DebugIntegration(
    {
      // trigger DevTools debugger instead of using console.log
      debugger: boolean;

      // stringify event before passing it to console.log
      stringify: boolean;
    }
  )],
});

Offline

Import name: Sentry.Integrations.Offline

This integration uses the web browser's online and offline events to detect when no network connectivity is available. If offline, it saves events to the web browser's client-side storage (typically IndexedDB) then automatically uploads events when network connectivity is restored.

This plugin does not attempt to provide local storage or retries for other scenarios. For example, if the browser has a local area connection but no internet connection, then it may report that it's online, and Sentry's Offline plugin will not attempt to save or retry any send failures in this case.

Copied
import * as Sentry from "@sentry/browser";
import { Offline as OfflineIntegration } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new OfflineIntegration(
    {
      // limit how many events will be localled saved. Defaults to 30.
      maxStoredEvents: number;
    }
  )],
});

RewriteFrames

Import name: Sentry.Integrations.RewriteFrames

This integration allows you to apply a transformation to each frame of the stack trace. In the streamlined scenario, it can be used to change the name of the file frame it originates from, or it can be fed with an iterated function to apply any arbitrary transformation.

On Windows machines, you have to use Unix paths and skip the volume letter in root option to enable. For example C:\\Program Files\\Apache\\www won’t work, however, /Program Files/Apache/www will.

Available options:

Copied
import * as Sentry from "@sentry/browser";
import { RewriteFrames as RewriteFramesIntegration } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new RewriteFramesIntegration(
    {
      // root path that will be stripped from the current frame's filename by the default iteratee if the filename is an absolute path
      root: string;

      // a custom prefix that will be used by the default iteratee (default: `app://`)
      prefix: string;

      // function that takes the frame, applies a transformation, and returns it
      iteratee: (frame) => frame;
    }
  )],
});

Usage Examples

For example, if the full path to your file is /www/src/app/file.js:

UsagePath in Stack TraceDescription
RewriteFrames()app:///file.jsThe default behavior is to replace the absolute path, except the filename, and prefix it with the default prefix (app:///).
RewriteFrames({prefix: 'foo/'})foo/file.jsPrefix foo/ is used instead of the default prefix app:///.
RewriteFrames({root: '/www'})app:///src/app/file.jsroot is defined as /www, so only that part is trimmed from beginning of the path.

ReportingObserver

Import name: Sentry.Integrations.ReportingObserver

This integration hooks into the ReportingObserver API and sends captured events through to Sentry. It can be configured to handle only specific issue types.

Available options:

Copied
import * as Sentry from "@sentry/browser";
import { ReportingObserver as ReportingObserverIntegration } from "@sentry/integrations";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [new ReportingObserverIntegration(
    {
      types: <'crash'|'deprecation'|'intervention'>[];
    }
  )],
});
Package:
npm:@sentry/vue
Version:
8.24.0
Repository:
https://github.com/getsentry/sentry-javascript