---
title: "HttpClient"
description: "Captures errors on failed requests from Fetch and XHR and attaches request and response information."
url: https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/integrations/httpclient/
---

# HttpClient | Sentry for Nuxt

This integration only works inside a browser environment.

*Import name: `Sentry.httpClientIntegration`*

This integration captures errors on failed requests from Fetch and XHR and attaches request and response information.

By default, these error events include header and cookie data. You can control this with the [`dataCollection`](https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/options.md#dataCollection) option. To turn it off, set `dataCollection: { httpHeaders: false, cookies: false }` in your root `Sentry.init({})` config.

**npm**

```javascript
import * as Sentry from "<sdk-package-name>";

Sentry.init({
  dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>",
  integrations: [Sentry.httpClientIntegration()],
});
```

**Loader (v7)**

```html
<script>
  // Configure sentryOnLoad before adding the Loader Script
  window.sentryOnLoad = function () {
    Sentry.init({
      // This option is required for capturing headers and cookies.
      sendDefaultPii: true,
    });

    if (Sentry.httpClientIntegration) {
      Sentry.addIntegration(Sentry.httpClientIntegration());
    }
  };
</script>

<script
  src="https://js.sentry-cdn.com/<your-public-key>.min.js"
  crossorigin="anonymous"
></script>
<script
  src="https://browser.sentry-cdn.com/7.118.0/httpclient.min.js"
  integrity="sha384-8MAyqW/E9fuqd5JmBqR/UN56Anxd7O06nt+PUTE5G6rRCLsApJc9qoc1cZl9tiQU"
  crossorigin="anonymous"
></script>
```

**Loader (v8)**

```html
<script>
  // Configure sentryOnLoad before adding the Loader Script
  window.sentryOnLoad = function () {
    Sentry.init({
      // This option is required for capturing headers and cookies.
      sendDefaultPii: true,
    });

    Sentry.lazyLoadIntegration("httpClientIntegration").then(
      (integration) => {
        Sentry.addIntegration(integration());
      },
    );
  };
</script>

<script
  src="https://js.sentry-cdn.com/<your-public-key>.min.js"
  crossorigin="anonymous"
></script>
```

**CDN**

```html
<script
  src="https://browser.sentry-cdn.com/11.1.0/bundle.tracing.min.js"
  integrity="sha384-2wFCZVEMgV3bEAFuxyGPq6RUOy0fqw5cagFjTgPf51ZCn2eMSidU68Yc3ZHS5d29"
  crossorigin="anonymous"
></script>
<script
  src="https://browser.sentry-cdn.com/11.1.0/httpclient.min.js"
  integrity="sha384-U1jpJf608SjMiLbnnfnhmZ6vRrnldP4GOMj09vT8yuqnS2DhALNWgVhsAhGYHYyO"
  crossorigin="anonymous"
></script>

<script>
  Sentry.init({
    dsn: "https://<key>@o<orgId>.ingest.sentry.io/<projectId>",
    integrations: [Sentry.httpClientIntegration()],
  });
</script>
```

##### Note

Due to the limitations of the Fetch and XHR API, the cookie and header collection for requests and responses is based on best effort. This means that certain headers may be missing in the event created by the integration.

## [Options](https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/integrations/httpclient.md#options)

### [`failedRequestStatusCodes`](https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/integrations/httpclient.md#failedrequeststatuscodes)

*Type: `(number|[number, number])[]`*

This array can contain tuples of `[begin, end]` (both inclusive), single status codes, or a combination of the two. Default: `[[500, 599]]`

### [`failedRequestTargets`](https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/integrations/httpclient.md#failedrequesttargets)

*Type: `(string|RegExp)[]`*

An array of request targets that should be considered, for example `['http://example.com/api/test']` would interpret any request to this URL as a failure. This array can contain Regexes, strings, or a combination of the two. Default: `[/.*/]`

### [`dataCollection`](https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/integrations/httpclient.md#datacollection)

This option has to be specified on the root `Sentry.init` config, not on the integration!

Controls header and cookie collection for this integration. The SDK captures both on failed requests by default. Use `dataCollection: { httpHeaders: false, cookies: false }` in `Sentry.init` to turn that off. See the [`dataCollection` option](https://docs.sentry.io/platforms/javascript/guides/nuxt/configuration/options.md#dataCollection) for the full set of controls including allow/deny lists.