HttpClient for Svelte
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, these error events include header and cookie data. You can control this with the dataCollection option. To turn it off, set dataCollection: { httpHeaders: false, cookies: false } in your root Sentry.init({}) config.
import * as Sentry from "___SDK_PACKAGE___";
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.httpClientIntegration()],
});
import * as Sentry from "___SDK_PACKAGE___";
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [Sentry.httpClientIntegration()],
});
<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/11.7.0/bundle.tracing.min.js"
integrity="sha384-IA8Pp7Ivj9Oxc0mcsyMNkWT3ukPtFlLvNVcclfNaxR3x4Rvk/i5vuAAA4WlCYyJm"
crossorigin="anonymous"
></script>
<script
src="https://browser.sentry-cdn.com/11.7.0/httpclient.min.js"
integrity="sha384-P7AqJ2m2VFTVDY0Nigx27KSQ17gNO7NFU5inGTTlkNrWs5qcn3X2MI+fLHR0MYYz"
crossorigin="anonymous"
></script>
<script>
Sentry.init({
dsn: "___PUBLIC_DSN___",
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.
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. 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 for the full set of controls including allow/deny lists.
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").