feat: Rework Browser JS integration docs

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

@@ -0,0 +1,36 @@
+_Import name: `Sentry.Integrations.RequestData`_
+
+This integration adds data from incoming requests to transaction and error events that occur during request handling done by the backend.
+
+<Alert level="warning">
+  Please note that this integration is only available on the server.
+</Alert>
+
+## Options:
+
+- `include` (object)
+
+Controls what types of data are added to the event:
+
+```js
+{
+  cookies: boolean  // default: true,
+  data: boolean  // default: true,
+  headers: boolean  // default: true,
+  ip: boolean  // default: false,
+  query_string: boolean  // default: true,
+  url: boolean  // default: true,
+  user: boolean | {
+    id: boolean  // default: true,
+    username: boolean  // default: true,
+    email: boolean  // default: true,
+  },
+}
+```
+
+- `transactionNamingSchema` (string)
+
+Controls how the transaction will be reported. Options are 'path' (`/some/route`),
+'methodPath' (`GET /some/route`), and 'handler' (the name of the route handler
+function, if available).
+Defaults to `methodPath`

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

@@ -2,15 +2,15 @@
 
 ```javascript {tabTitle: ESM}
 import * as Sentry from "@sentry/browser";
-import { ReportingObserver as ReportingObserverIntegration } from "@sentry/integrations";
+import { ReportingObserver } from "@sentry/integrations";
 
 Sentry.init({
   integrations: [],
 });
 
 const client = Sentry.getCurrentHub().getClient();
 if (client) {
-  client.addIntegration(new ReportingObserverIntegration());
+  client.addIntegration(new ReportingObserver());
 }
 ```
 

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

@@ -2,11 +2,11 @@
 
 ```javascript {tabTitle: ESM}
 import * as Sentry from "@sentry/browser";
-import { ReportingObserver as ReportingObserverIntegration } from "@sentry/integrations";
+import { ReportingObserver } from "@sentry/integrations";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new ReportingObserverIntegration()],
+  integrations: [new ReportingObserver()],
 });
 ```
 

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

@@ -0,0 +1,38 @@
+---
+title: Breadcrumbs
+excerpt: ""
+description: "Wraps native APIs to capture breadcrumbs. (default)"
+sidebar_order: 1
+---
+
+_Import name: `Sentry.Integrations.Breadcrumbs`_
+
+This integration wraps native APIs to capture breadcrumbs. By default, the Sentry SDK wraps all APIs.
+
+## Options
+
+- `console` (boolean)
+
+Log calls to `console.log`, `console.debug`, etc.
+
+- `dom` (boolean | `{ serializeAttribute: string | string[] }`)
+
+Log all click and keypress events.
+
+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.
+
+- `fetch` (boolean)
+
+Log HTTP requests done with the Fetch API
+
+- `history` (boolean)
+
+Log calls to `history.pushState` and related APIs.
+
+- `sentry` (boolean)
+
+Log whenever we send an event to the server.
+
+- `xhr` (boolean)
+
+Log HTTP requests done with the XHR API.

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

@@ -0,0 +1,67 @@
+---
+title: CaptureConsole
+excerpt: ""
+description: "Captures all Console API calls via `captureException` or `captureMessage`."
+sidebar_order: 100
+---
+
+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:
+
+This integration requires you to install `@sentry/integrations` next to your main SDK package.
+
+```javascript {tabTitle: ESM}
+import * as Sentry from "@sentry/browser";
+import { CaptureConsole } from "@sentry/integrations";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [new CaptureConsole()],
+});
+```
+
+```html {tabTitle: Loader}
+<script
+  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/captureconsole.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'captureconsole.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<script>
+  Sentry.onLoad(function () {
+    Sentry.init({
+      integrations: [new Sentry.Integrations.CaptureConsole()],
+    });
+  });
+</script>
+```
+
+```html {tabTitle: CDN}
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/captureconsole.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'captureconsole.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<script>
+  Sentry.init({
+    dsn: "___PUBLIC_DSN___",
+    integrations: [new Sentry.Integrations.CaptureConsole()],
+  });
+</script>
+```
+
+## Options
+
+- `levels` (string[])
+
+Array of methods that should be captured.
+Defaults to `['log', 'info', 'warn', 'error', 'debug', 'assert']`

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

@@ -1,6 +1,6 @@
 ---
 title: Custom Integrations
-sidebar_order: 3
+sidebar_order: 200
 description: "Learn how you can enable a custom integration."
 redirect_from:
   - /platforms/javascript/integrations/custom/

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

@@ -0,0 +1,72 @@
+---
+title: Debug
+excerpt: ""
+description: "Allows you to inspect the contents of a processed event and hint object that gets passed to beforeSend or beforeSendTransaction."
+sidebar_order: 100
+---
+
+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.
+
+Note that this is different than setting `debug: true` in your Sentry.init options, which will enable debug logging in the console.
+
+This integration requires you to install `@sentry/integrations` next to your main SDK package.
+
+```javascript {tabTitle: ESM}
+import * as Sentry from "@sentry/browser";
+import { Debug } from "@sentry/integrations";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [new Debug()],
+});
+```
+
+```html {tabTitle: Loader}
+<script
+  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/debug.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'debug.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<script>
+  Sentry.onLoad(function () {
+    Sentry.init({
+      integrations: [new Sentry.Integrations.Debug()],
+    });
+  });
+</script>
+```
+
+```html {tabTitle: CDN}
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/debug.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'debug.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<script>
+  Sentry.init({
+    dsn: "___PUBLIC_DSN___",
+    integrations: [new Sentry.Integrations.Debug()],
+  });
+</script>
+```
+
+## Options
+
+- `debugger` (boolean)
+
+Trigger DevTools debugger instead of using `console.log`.
+
+- `stringify` (boolean)
+
+Stringify event before passing it to `console.log`.

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

@@ -0,0 +1,12 @@
+---
+title: Dedupe
+excerpt: ""
+description: "Deduplicate certain events to avoid receiving duplicate errors. (default)"
+sidebar_order: 1
+---
+
+_Import name: `Sentry.Integrations.Dedupe`_
+
+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.
+
+<PlatformContent includePath="configuration/dedupe" />

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

@@ -0,0 +1,68 @@
+---
+title: ExtraErrorData
+excerpt: ""
+description: "Extracts all non-native attributes from the error object and attaches them to the event as extra data."
+sidebar_order: 100
+---
+
+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.
+
+This integration requires you to install `@sentry/integrations` next to your main SDK package.
+
+```javascript {tabTitle: ESM}
+import * as Sentry from "@sentry/browser";
+import { ExtraErrorData } from "@sentry/integrations";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+  integrations: [new ExtraErrorData()],
+});
+```
+
+```html {tabTitle: Loader}
+<script
+  src="https://js.sentry-cdn.com/___PUBLIC_KEY___.min.js"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/extraerrordata.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'debug.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<script>
+  Sentry.onLoad(function () {
+    Sentry.init({
+      integrations: [new Sentry.Integrations.ExtraErrorData()],
+    });
+  });
+</script>
+```
+
+```html {tabTitle: CDN}
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+<script
+  src="https://browser.sentry-cdn.com/{{@inject packages.version('sentry.javascript.browser') }}/extraerrordata.min.js"
+  integrity="sha384-{{@inject packages.checksum('sentry.javascript.browser', 'extraerrordata.min.js', 'sha384-base64') }}"
+  crossorigin="anonymous"
+></script>
+
+<script>
+  Sentry.init({
+    dsn: "___PUBLIC_DSN___",
+    integrations: [new Sentry.Integrations.ExtraErrorData()],
+  });
+</script>
+```
+
+## Options
+
+- `depth` (number)
+
+Limit of how deep the object serializer should go. Anything deeper than limit will
+be replaced with standard Node.js REPL notation of [Object], [Array], [Function] or
+a primitive value. Defaults to 3.

src/platforms/javascript/common/configuration/integrations/functiontostring.mdx

@@ -0,0 +1,10 @@
+---
+title: FunctionToString
+excerpt: ""
+description: "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)"
+sidebar_order: 1
+---
+
+_Import name: `Sentry.Integrations.FunctionToString`_
+
+This integration allows the SDK to provide original functions and method names, even when those functions or methods are wrapped by our error or breadcrumb handlers.

src/platforms/javascript/common/configuration/integrations/globalhandlers.mdx

@@ -0,0 +1,20 @@
+---
+title: GlobalHandlers
+excerpt: ""
+description: "Attaches global handlers to capture uncaught exceptions and unhandled rejections. (default)"
+sidebar_order: 1
+---
+
+_Import name: `Sentry.Integrations.GlobalHandlers`_
+
+This integration attaches global handlers to capture uncaught exceptions and unhandled rejections. By default it captures errors & unhandled promise rejections.
+
+## Options
+
+- `onerror` (boolean)
+
+Capture errors bubbled to `onerror`.
+
+- `onunhandledrejection` (boolean)
+
+Capture unhandled promise rejections.