HttpClient
Captures errors on failed requests from Fetch and XHR and attaches request and response information.
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, error events don't contain header or cookie data. You can control this with the dataCollection option. Set dataCollection: { httpHeaders: true, cookies: true } in your root Sentry.init({}) config. The deprecated sendDefaultPii: true option also enables this behavior.
import * as Sentry from "___SDK_PACKAGE___";
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.httpClientIntegration()]
// This option is required for capturing headers and cookies.
sendDefaultPii: true,
});
import * as Sentry from "___SDK_PACKAGE___";
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.httpClientIntegration()]
// This option is required for capturing headers and cookies.
sendDefaultPii: true,
});
<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/___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>
<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/___PUBLIC_KEY___.min.js"
crossorigin="anonymous"
></script>
<script
src="https://browser.sentry-cdn.com/10.58.0/bundle.tracing.min.js"
integrity="sha384-kds8iO3vDj6X38OxubDgbg45botpNZVBJJPEvhtXGaxOK27CfWEBvSFjD/pBYFu/"
crossorigin="anonymous"
></script>
<script
src="https://browser.sentry-cdn.com/10.58.0/httpclient.min.js"
integrity="sha384-Ux6VWBFXVmemYnsurlbzVKRE5EcpZ5UzUqzGVshViC+vrr/p7B/9lFtxCpe6SJzh"
crossorigin="anonymous"
></script>
<script>
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.httpClientIntegration()],
// This option is required for capturing headers and cookies.
sendDefaultPii: true,
});
</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.
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]]
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: [/.*/]
This option has to be specified on the root Sentry.init config, not on the integration!
Controls header and cookie collection for this integration. Use dataCollection: { httpHeaders: true, cookies: true } in Sentry.init to capture headers and cookies on failed requests. See the dataCollection option for the full set of controls including allow/deny lists.
The deprecated sendDefaultPii: true option also enables this behavior.
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").