# Integrations | Sentry for Angular

The Sentry SDK uses integrations to hook into the functionality of popular libraries to automatically instrument your application and give you the best data out of the box.

Integrations automatically add error instrumentation, performance instrumentation, and/or extra context information to your application. Some are enabled by default, but you can disable them or modify their settings.

### [Integrations](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#integrations)

|                                                                                                                                              | **Auto Enabled** | **Errors** | **Tracing** | **Replay** | **Additional Context** |
| -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ---------- | ----------- | ---------- | ---------------------- |
| [`breadcrumbsIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/breadcrumbs.md)             | ✓                |            |             |            | ✓                      |
| [`browserApiErrorsIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/browserapierrors.md)   | ✓                | ✓          |             |            |                        |
| [`browserSessionIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/browsersession.md)       | ✓                |            |             |            | ✓                      |
| [`dedupeIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/dedupe.md)                       | ✓                | ✓          |             |            |                        |
| [`functionToStringIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/functiontostring.md)   | ✓                |            |             |            |                        |
| [`globalHandlersIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/globalhandlers.md)       | ✓                | ✓          |             |            |                        |
| [`httpContextIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/httpcontext.md)             | ✓                |            |             |            | ✓                      |
| [`inboundFiltersIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/inboundfilters.md)       | ✓                | ✓          |             |            |                        |
| [`linkedErrorsIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/linkederrors.md)           | ✓                | ✓          |             |            |                        |
| [`browserProfilingIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/browserprofiling.md)   |                  |            | ✓           |            |                        |
| [`browserTracingIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/browsertracing.md)       |                  |            | ✓           |            | ✓                      |
| [`captureConsoleIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/captureconsole.md)       |                  | ✓          |             |            | ✓                      |
| [`contextLinesIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/contextlines.md)           |                  | ✓          |             |            |                        |
| [`extraErrorDataIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/extraerrordata.md)       |                  |            |             |            | ✓                      |
| [`featureFlagsIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/featureflags.md)           |                  |            |             |            | ✓                      |
| [`graphqlClientIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/graphqlclient.md)         |                  |            |             |            | ✓                      |
| [`httpClientIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/httpclient.md)               |                  | ✓          |             |            |                        |
| [`launchDarklyIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/launchdarkly.md)           |                  |            |             |            | ✓                      |
| [`moduleMetadataIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/modulemetadata.md)       |                  |            |             |            | ✓                      |
| [`openFeatureIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/openfeature.md)             |                  |            |             |            | ✓                      |
| [`replayCanvasIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/replaycanvas.md)           |                  |            |             | ✓          |                        |
| [`replayIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/replay.md)                       |                  |            |             | ✓          | ✓                      |
| [`reportingObserverIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/reportingobserver.md) |                  | ✓          |             |            |                        |
| [`rewriteFramesIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/rewriteframes.md)         |                  | ✓          |             |            |                        |
| [`statsigIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/statsig.md)                     |                  |            |             |            | ✓                      |
| [`supabaseIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/supabase.md)                   |                  | ✓          | ✓           |            |                        |
| [`unleashIntegration`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/unleash.md)                     |                  |            |             |            | ✓                      |

## [Modifying Default Integrations](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#modifying-default-integrations)

To disable system integrations, set `defaultIntegrations: false` when calling `init()`.

To override their settings, provide a new instance with your config to the `integrations` option. For example, to turn off browser capturing console calls:

```javascript
Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  integrations: [
    Sentry.linkedErrorsIntegration({
      limit: 7,
    }),
  ],
});
```

## [Adding an Integration](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#adding-an-integration)

You can add additional integrations in your `init` call:

```javascript
import * as Sentry from "@sentry/browser";

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

Alternatively, you can add integrations via `Sentry.addIntegration()`. This is useful if you only want to enable an integration in a specific environment or if you want to load an integration later. For all other cases, we recommend you use the `integrations` option.

```javascript
import * as Sentry from "@sentry/browser";

Sentry.init({
  integrations: [],
});

Sentry.addIntegration(Sentry.reportingObserverIntegration());
```

## [Lazy Loading Integrations](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#lazy-loading-integrations)

Lazy-loading lets you add pluggable integrations without increasing the initial bundle size. You can do this in two ways:

### [1. Dynamic Import (recommended)](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#1-dynamic-import-recommended)

You can add the integration with a dynamic import using `import()`. This method loads the integration from the npm package. To avoid running into issues with `import()`, you should use a bundler that supports dynamic imports. If you're using a tool like Vite for your project, the bundling process is probably already set up.

`main.ts`

```javascript
Sentry.init({
  // Note, replayIntegration is NOT instantiated below:

  integrations: [],


  // Replay sample rates still have to be set in `Sentry.init`:

  replaysSessionSampleRate: 0.1,
  replaysOnErrorSampleRate: 1.0,

});

// Sometime later

Sentry.lazyLoadIntegration("replayIntegration").then(
  (replayIntegration) => {
    Sentry.addIntegration(replayIntegration());
  },
);
```

### [2. Load from CDN with `lazyLoadIntegration()`](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#2-load-from-cdn-with-lazyloadintegration)

You can also lazy-load pluggable integrations via `Sentry.lazyLoadIntegration()`. This will attempt to load the integration from the Sentry CDN. Note that this function will reject if it fails to load the integration from the Sentry CDN, which can happen if a user has an ad-blocker or if there's a network problem. You should always make sure that rejections are handled for this function in your application.

```javascript
async function loadHttpClient() {
  const httpClientIntegration = await Sentry.lazyLoadIntegration(
    "httpClientIntegration",
  );
  Sentry.addIntegration(httpClientIntegration());
}
```

Lazy loading is available for the following integrations:

* `replayIntegration`
* `replayCanvasIntegration`
* `feedbackIntegration`
* `feedbackModalIntegration`
* `feedbackScreenshotIntegration`
* `captureConsoleIntegration`
* `contextLinesIntegration`
* `linkedErrorsIntegration`
* `dedupeIntegration`
* `extraErrorDataIntegration`
* `httpClientIntegration`
* `reportingObserverIntegration`
* `rewriteFramesIntegration`
* `browserProfilingIntegration`

## [Removing a Default Integration](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#removing-a-default-integration)

If you only want to remove a single or some of the default integrations, instead of disabling all of them with `defaultIntegrations: false`, you can use the following syntax to filter out the ones you don't want.

This example removes the integration for adding breadcrumbs to the event, which is enabled by default:

```javascript
Sentry.init({
  // ...
  integrations: function (integrations) {
    // integrations will be all default integrations
    return integrations.filter(function (integration) {
      return integration.name !== "Breadcrumbs";
    });
  },
});
```

## [Custom Integrations](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#custom-integrations)

You can also create [custom integrations](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/custom.md).

## [Available Integrations](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations.md#available-integrations)

* #### [Breadcrumbs](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/breadcrumbs.md)

  Wraps native browser APIs to capture breadcrumbs. (default)

* #### [BrowserApiErrors](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/browserapierrors.md)

  Wraps native time and events APIs (\`setTimeout\`, \`setInterval\`, \`requestAnimationFrame\`, \`addEventListener/removeEventListener\`) in \`try/catch\` blocks to handle async exceptions. (default)

* #### [BrowserProfiling](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/browserprofiling.md)

  Capture profiling data for the Browser.

* #### [BrowserSession](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/browsersession.md)

  Track healthy Sessions in the Browser.

* #### [BrowserTracing](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/browsertracing.md)

  Capture performance data for the Browser.

* #### [CaptureConsole](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/captureconsole.md)

  Captures all Console API calls via \`captureException\` or \`captureMessage\`.

* #### [ContextLines](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/contextlines.md)

  Adds source code from inline JavaScript of the current page's HTML.

* #### [Dedupe](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/dedupe.md)

  Deduplicate certain events to avoid receiving duplicate errors. (default)

* #### [ExtraErrorData](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/extraerrordata.md)

  Extracts all non-native attributes from the error object and attaches them to the event as extra data.

* #### [FunctionToString](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/functiontostring.md)

  Allows the SDK to provide original functions and method names, even when those functions or methods are wrapped by our error or breadcrumb handlers. (default)

* #### [Generic Feature Flags Integration](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/featureflags.md)

  Learn how to attach custom feature flag data to Sentry error events.

* #### [GlobalHandlers](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/globalhandlers.md)

  Attaches global handlers to capture uncaught exceptions and unhandled rejections. (default)

* #### [GraphQLClient](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/graphqlclient.md)

  Enhance spans and breadcrumbs with data from GraphQL requests.

* #### [HttpClient](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/httpclient.md)

  Captures errors on failed requests from Fetch and XHR and attaches request and response information.

* #### [HttpContext](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/httpcontext.md)

  Attaches HTTP request information, such as URL, user-agent, referrer, and other headers to the event. (default)

* #### [InboundFilters](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/inboundfilters.md)

  Allows you to ignore specific errors based on the type, message, or URLs in a given exception. (default)

* #### [LaunchDarkly](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/launchdarkly.md)

  Learn how to use Sentry with LaunchDarkly.

* #### [LinkedErrors](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/linkederrors.md)

  Allows you to configure linked errors. (default)

* #### [ModuleMetadata](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/modulemetadata.md)

  Adds module metadata to stack frames.

* #### [OpenFeature](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/openfeature.md)

  Learn how to use Sentry with OpenFeature.

* #### [Replay](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/replay.md)

  Capture a video-like reproduction of what was happening in the user's browser.

* #### [ReplayCanvas](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/replaycanvas.md)

  Capture session replays from HTML canvas elements.

* #### [ReportingObserver](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/reportingobserver.md)

  Captures the reports collected via the \`ReportingObserver\` interface and sends them to Sentry.

* #### [RewriteFrames](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/rewriteframes.md)

  Allows you to apply a transformation to each frame of the stack trace.

* #### [Statsig](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/statsig.md)

  Learn how to use Sentry with Statsig.

* #### [Unleash](https://docs.sentry.io/platforms/javascript/guides/angular/configuration/integrations/unleash.md)

  Learn how to use Sentry with Unleash.
