Skip to content

Commit 72a453d

Browse files
mydeamydea
committed
feat: Rework Browser JS integration docs
1 parent 00ec2be commit 72a453d

File tree

51 files changed

+1072
-297
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+1072
-297
lines changed

‎src/includes/platforms/configuration/integrations/requestdata.mdx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
_Import name: `Sentry.Integrations.RequestData`_
2+
3+
This integration adds data from incoming requests to transaction and error events that occur during request handling done by the backend.
4+
5+
<Alert level="warning">
6+
Please note that this integration is only available on the server.
7+
</Alert>
8+
9+
## Options:
10+
11+
- `include` (object)
12+
13+
Controls what types of data are added to the event:
14+
15+
```js
16+
{
17+
cookies: boolean // default: true,
18+
data: boolean // default: true,
19+
headers: boolean // default: true,
20+
ip: boolean // default: false,
21+
query_string: boolean // default: true,
22+
url: boolean // default: true,
23+
user: boolean | {
24+
id: boolean // default: true,
25+
username: boolean // default: true,
26+
email: boolean // default: true,
27+
},
28+
}
29+
```
30+
31+
- `transactionNamingSchema` (string)
32+
33+
Controls how the transaction will be reported. Options are 'path' (`/some/route`),
34+
'methodPath' (`GET /some/route`), and 'handler' (the name of the route handler
35+
function, if available).
36+
Defaults to `methodPath`

‎src/platform-includes/configuration/enable-pluggable-integrations-lazy/javascript.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@
22

33
```javascript {tabTitle: ESM}
44
import * as Sentry from "@sentry/browser";
5-
import { ReportingObserver as ReportingObserverIntegration } from "@sentry/integrations";
5+
import { ReportingObserver } from "@sentry/integrations";
66

77
Sentry.init({
88
integrations: [],
99
});
1010

1111
const client = Sentry.getCurrentHub().getClient();
1212
if (client) {
13-
client.addIntegration(new ReportingObserverIntegration());
13+
client.addIntegration(new ReportingObserver());
1414
}
1515
```
1616

‎src/platform-includes/configuration/enable-pluggable-integrations/javascript.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,11 @@
22

33
```javascript {tabTitle: ESM}
44
import * as Sentry from "@sentry/browser";
5-
import { ReportingObserver as ReportingObserverIntegration } from "@sentry/integrations";
5+
import { ReportingObserver } from "@sentry/integrations";
66

77
Sentry.init({
88
dsn: "___PUBLIC_DSN___",
9-
integrations: [new ReportingObserverIntegration()],
9+
integrations: [new ReportingObserver()],
1010
});
1111
```
1212

‎src/platforms/javascript/common/configuration/integrations/breadcrumbs.mdx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: Breadcrumbs
3+
excerpt: ""
4+
description: "Wraps native APIs to capture breadcrumbs. (default)"
5+
sidebar_order: 1
6+
---
7+
8+
_Import name: `Sentry.Integrations.Breadcrumbs`_
9+
10+
This integration wraps native APIs to capture breadcrumbs. By default, the Sentry SDK wraps all APIs.
11+
12+
## Options
13+
14+
- `console` (boolean)
15+
16+
Log calls to `console.log`, `console.debug`, etc.
17+
18+
- `dom` (boolean | `{ serializeAttribute: string | string[] }`)
19+
20+
Log all click and keypress events.
21+
22+
When an object with `serializeAttribute` key is provided, Breadcrumbs integration will look for given attribute(s) in DOM elements, while generating the breadcrumb trails. Matched elements will be followed by their custom attributes, instead of their `id`s or `class` names.
23+
24+
- `fetch` (boolean)
25+
26+
Log HTTP requests done with the Fetch API
27+
28+
- `history` (boolean)
29+
30+
Log calls to `history.pushState` and related APIs.
31+
32+
- `sentry` (boolean)
33+
34+
Log whenever we send an event to the server.
35+
36+
- `xhr` (boolean)
37+
38+
Log HTTP requests done with the XHR API.

‎src/platforms/javascript/common/configuration/integrations/captureconsole.mdx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: CaptureConsole
3+
excerpt: ""
4+
description: "Captures all Console API calls via `captureException` or `captureMessage`."
5+
sidebar_order: 100
6+
---
7+
8+
This integration captures all Console API calls and redirects them to Sentry using the SDK's captureMessage or captureException call, depending on the log level. It then re-triggers to preserve default native behavior:
9+
10+
This integration requires you to install `@sentry/integrations` next to your main SDK package.
11+
12+
```javascript {tabTitle: ESM}
13+
import * as Sentry from "@sentry/browser";
14+
import { CaptureConsole } from "@sentry/integrations";
15+
16+
Sentry.init({
17+
dsn: "___PUBLIC_DSN___",
18+
integrations: [new CaptureConsole()],
19+
});
20+
```
21+
22+
```html {tabTitle: Loader}
23+
<script
24+
src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
25+
crossorigin="anonymous"
26+
></script>
27+
<script
28+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/captureconsole.min.js"
29+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'captureconsole.min.js', 'sha384-base64') }}"
30+
crossorigin="anonymous"
31+
></script>
32+
33+
<script>
34+
Sentry.onLoad(function () {
35+
Sentry.init({
36+
integrations: [new Sentry.Integrations.CaptureConsole()],
37+
});
38+
});
39+
</script>
40+
```
41+
42+
```html {tabTitle: CDN}
43+
<script
44+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
45+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
46+
crossorigin="anonymous"
47+
></script>
48+
<script
49+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/captureconsole.min.js"
50+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'captureconsole.min.js', 'sha384-base64') }}"
51+
crossorigin="anonymous"
52+
></script>
53+
54+
<script>
55+
Sentry.init({
56+
dsn: "___PUBLIC_DSN___",
57+
integrations: [new Sentry.Integrations.CaptureConsole()],
58+
});
59+
</script>
60+
```
61+
62+
## Options
63+
64+
- `levels` (string[])
65+
66+
Array of methods that should be captured.
67+
Defaults to `['log', 'info', 'warn', 'error', 'debug', 'assert']`

‎src/platforms/javascript/common/configuration/integrations/custom.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Custom Integrations
3-
sidebar_order: 3
3+
sidebar_order: 200
44
description: "Learn how you can enable a custom integration."
55
redirect_from:
66
- /platforms/javascript/integrations/custom/

‎src/platforms/javascript/common/configuration/integrations/debug.mdx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: Debug
3+
excerpt: ""
4+
description: "Allows you to inspect the contents of a processed event and hint object that gets passed to beforeSend or beforeSendTransaction."
5+
sidebar_order: 100
6+
---
7+
8+
This integration allows you to inspect the contents of a processed event and hint object that gets passed to beforeSend or beforeSendTransaction. It will always run as the last integration, no matter when it was registered.
9+
10+
Note that this is different than setting `debug: true` in your Sentry.init options, which will enable debug logging in the console.
11+
12+
This integration requires you to install `@sentry/integrations` next to your main SDK package.
13+
14+
```javascript {tabTitle: ESM}
15+
import * as Sentry from "@sentry/browser";
16+
import { Debug } from "@sentry/integrations";
17+
18+
Sentry.init({
19+
dsn: "___PUBLIC_DSN___",
20+
integrations: [new Debug()],
21+
});
22+
```
23+
24+
```html {tabTitle: Loader}
25+
<script
26+
src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
27+
crossorigin="anonymous"
28+
></script>
29+
<script
30+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/debug.min.js"
31+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'debug.min.js', 'sha384-base64') }}"
32+
crossorigin="anonymous"
33+
></script>
34+
35+
<script>
36+
Sentry.onLoad(function () {
37+
Sentry.init({
38+
integrations: [new Sentry.Integrations.Debug()],
39+
});
40+
});
41+
</script>
42+
```
43+
44+
```html {tabTitle: CDN}
45+
<script
46+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
47+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
48+
crossorigin="anonymous"
49+
></script>
50+
<script
51+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/debug.min.js"
52+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'debug.min.js', 'sha384-base64') }}"
53+
crossorigin="anonymous"
54+
></script>
55+
56+
<script>
57+
Sentry.init({
58+
dsn: "___PUBLIC_DSN___",
59+
integrations: [new Sentry.Integrations.Debug()],
60+
});
61+
</script>
62+
```
63+
64+
## Options
65+
66+
- `debugger` (boolean)
67+
68+
Trigger DevTools debugger instead of using `console.log`.
69+
70+
- `stringify` (boolean)
71+
72+
Stringify event before passing it to `console.log`.

‎src/platforms/javascript/common/configuration/integrations/dedupe.mdx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
title: Dedupe
3+
excerpt: ""
4+
description: "Deduplicate certain events to avoid receiving duplicate errors. (default)"
5+
sidebar_order: 1
6+
---
7+
8+
_Import name: `Sentry.Integrations.Dedupe`_
9+
10+
This integration deduplicates certain events. It can be helpful if you're receiving many duplicate errors. Note, that Sentry only compares stack traces and fingerprints.
11+
12+
<PlatformContent includePath="configuration/dedupe" />

‎src/platforms/javascript/common/configuration/integrations/default.mdx‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎src/platforms/javascript/common/configuration/integrations/extraerrordata.mdx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: ExtraErrorData
3+
excerpt: ""
4+
description: "Extracts all non-native attributes from the error object and attaches them to the event as extra data."
5+
sidebar_order: 100
6+
---
7+
8+
This integration extracts all non-native attributes from the error object and attaches them to the event as extra data. If the error object has a .toJSON() method, the ExtraErrorData integration will run it to extract additional information.
9+
10+
This integration requires you to install `@sentry/integrations` next to your main SDK package.
11+
12+
```javascript {tabTitle: ESM}
13+
import * as Sentry from "@sentry/browser";
14+
import { ExtraErrorData } from "@sentry/integrations";
15+
16+
Sentry.init({
17+
dsn: "___PUBLIC_DSN___",
18+
integrations: [new ExtraErrorData()],
19+
});
20+
```
21+
22+
```html {tabTitle: Loader}
23+
<script
24+
src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
25+
crossorigin="anonymous"
26+
></script>
27+
<script
28+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/extraerrordata.min.js"
29+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'debug.min.js', 'sha384-base64') }}"
30+
crossorigin="anonymous"
31+
></script>
32+
33+
<script>
34+
Sentry.onLoad(function () {
35+
Sentry.init({
36+
integrations: [new Sentry.Integrations.ExtraErrorData()],
37+
});
38+
});
39+
</script>
40+
```
41+
42+
```html {tabTitle: CDN}
43+
<script
44+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
45+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
46+
crossorigin="anonymous"
47+
></script>
48+
<script
49+
src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/extraerrordata.min.js"
50+
integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'extraerrordata.min.js', 'sha384-base64') }}"
51+
crossorigin="anonymous"
52+
></script>
53+
54+
<script>
55+
Sentry.init({
56+
dsn: "___PUBLIC_DSN___",
57+
integrations: [new Sentry.Integrations.ExtraErrorData()],
58+
});
59+
</script>
60+
```
61+
62+
## Options
63+
64+
- `depth` (number)
65+
66+
Limit of how deep the object serializer should go. Anything deeper than limit will
67+
be replaced with standard Node.js REPL notation of [Object], [Array], [Function] or
68+
a primitive value. Defaults to 3.

0 commit comments

Comments
 (0)