feat: Rework Browser JS integration docs (#7648)

---------

Co-authored-by: Liza Mock <liza.mock@sentry.io>
Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>

src/docs/product/accounts/quotas/manage-event-stream-guide.mdx

@@ -244,9 +244,9 @@ To learn more and see code samples, check out:
 
 #### GlobalHandlers
 
-This integration attaches global handlers to capture uncaught exceptions (`onerror`) and unhandled rejections (`onunhandledrejection`). Both handlers are enabled by default, but can be disabled through configuration. Learn more in [GlobalHandlers Integration](/platforms/javascript/configuration/integrations/default/#globalhandlers).
+This integration attaches global handlers to capture uncaught exceptions (`onerror`) and unhandled rejections (`onunhandledrejection`). Both handlers are enabled by default, but can be disabled through configuration. Learn more in [GlobalHandlers Integration](/platforms/javascript/configuration/integrations/globalhandlers/).
 
-Check out additional configuration options with the [tryCatch](/platforms/javascript/configuration/integrations/default/#trycatch) and [ReportingObserver](/platforms/javascript/configuration/integrations/plugin/#reportingobserver) integrations.
+Check out additional configuration options with the [tryCatch](/platforms/javascript/configuration/integrations/trycatch/) and [ReportingObserver](/platforms/javascript/configuration/integrations/reportingobserver/) integrations.
 
 ### Other SDKs
 

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

@@ -1,8 +1,14 @@
-Add a custom integration to your JavaScript using the following format:
+Add a custom integration to your JavaScript using the following format
 
 ```javascript
-// All integrations that come with an SDK can be found on Sentry.Integrations object
-// Custom integration must conform to the Integration interface: https://github.com/getsentry/sentry-javascript/blob/master/packages/types/src/integration.ts
+class MyAwesomeIntegrations {
+  static id = "MyAwesomeIntegration";
+  name = "MyAwesomeIntegration";
+
+  setupOnce() {
+    // Do something when the integration is initialized
+  }
+}
 
 Sentry.init({
   // ...

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/includes/platforms/configuration/options/allow-urls.mdx

@@ -0,0 +1 @@
+A list of strings or regex patterns that match error URLs which should exclusively be sent to Sentry. If you use this option, only errors whose entire file URL contains (string) or matches (regex) at least one entry in the list will be sent. As a result, if you add `'foo.com'` to it, it will also match on `https://bar.com/myfile/foo.com`. Keep in mind that this only applies for captured exceptions, not raw message events. By default, all errors are sent.

src/includes/platforms/configuration/options/deny-urls.mdx

@@ -0,0 +1 @@
+A list of strings or regex patterns that match error URLs that should not be sent to Sentry. Errors whose entire file URL contains (string) or matches (regex) at least one entry in the list will not be sent. As a result, if you add `'foo.com'` to the list, it will also match on `https://bar.com/myfile/foo.com`. Keep in mind that this only applies for captured exceptions, not raw message events. By default, all errors are sent.

src/includes/platforms/configuration/options/ignore-errors.mdx

@@ -0,0 +1 @@
+A list of strings or regex patterns that match error messages that shouldn't be sent to Sentry. Messages that match these strings or regular expressions will be filtered out before they're sent to Sentry. When using strings, partial matches will be filtered out, so if you need to filter by exact match, use regex patterns instead. By default, all errors are sent.

src/includes/platforms/configuration/options/ignore-transactions.mdx

@@ -0,0 +1 @@
+A list of strings or regex patterns that match transaction names that shouldn't be sent to Sentry. Transactions that match these strings or regular expressions will be filtered out before they're sent to Sentry. When using strings, partial matches will be filtered out, so if you need to filter by exact match, use regex patterns instead. By default, transactions spanning typical API health check requests are filtered out.

src/platform-includes/configuration/capture-console/javascript.mdx

@@ -2,17 +2,11 @@
 
 ```javascript {tabTitle: ESM}
 import * as Sentry from "@sentry/browser";
-import { CaptureConsole as CaptureConsoleIntegration } from "@sentry/integrations";
+import { CaptureConsole } from "@sentry/integrations";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new CaptureConsoleIntegration(
-    {
-      // array of methods that should be captured
-      // defaults to ['log', 'info', 'warn', 'error', 'debug', 'assert']
-      levels: string[];
-    }
-  )],
+  integrations: [new CaptureConsole()],
 });
 ```
 
@@ -28,15 +22,9 @@ Sentry.init({
 ></script>
 
 <script>
-  Sentry.onLoad(function() {
+  Sentry.onLoad(function () {
     Sentry.init({
-      integrations: [new Sentry.Integrations.CaptureConsole(
-        {
-          // array of methods that should be captured
-          // defaults to ['log', 'info', 'warn', 'error', 'debug', 'assert']
-          levels: string[];
-        }
-      )],
+      integrations: [new Sentry.Integrations.CaptureConsole()],
     });
   });
 </script>
@@ -57,13 +45,7 @@ Sentry.init({
 <script>
   Sentry.init({
     dsn: "___PUBLIC_DSN___",
-    integrations: [new Sentry.Integrations.CaptureConsole(
-      {
-        // array of methods that should be captured
-        // defaults to ['log', 'info', 'warn', 'error', 'debug', 'assert']
-        levels: string[];
-      }
-    )],
+    integrations: [new Sentry.Integrations.CaptureConsole()],
   });
 </script>
 ```

src/platform-includes/configuration/contextlines/javascript.mdx

@@ -6,13 +6,7 @@ import { ContextLines } from "@sentry/integrations";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [
-    new ContextLines({
-      // The number of lines to collect around each stack frame's line number
-      // Defaults to 7
-      frameContextLines: 7,
-    }),
-  ],
+  integrations: [new ContextLines()],
 });
 ```
 
@@ -30,13 +24,7 @@ Sentry.init({
 <script>
   Sentry.onLoad(function () {
     Sentry.init({
-      integrations: [
-        new Sentry.Integrations.ContextLines({
-          // The number of lines to collect before and after each stack frame's line number
-          // Defaults to 7
-          frameContextLines: 7,
-        }),
-      ],
+      integrations: [new Sentry.Integrations.ContextLines()],
     });
   });
 </script>
@@ -57,13 +45,7 @@ Sentry.init({
 <script>
   Sentry.init({
     dsn: "___PUBLIC_DSN___",
-    integrations: [
-      new Sentry.Integrations.ContextLines({
-        // The number of lines to collect around each stack frame's line number
-        // Defaults to 7
-        frameContextLines: 7,
-      }),
-    ],
+    integrations: [new Sentry.Integrations.ContextLines()],
   });
 </script>
 ```

src/platform-includes/configuration/debug/javascript.mdx

@@ -2,19 +2,11 @@
 
 ```javascript {tabTitle: ESM}
 import * as Sentry from "@sentry/browser";
-import { Debug as DebugIntegration } from "@sentry/integrations";
+import { Debug } from "@sentry/integrations";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new DebugIntegration(
-    {
-      // trigger DevTools debugger instead of using console.log
-      debugger: boolean;
-
-      // stringify event before passing it to console.log
-      stringify: boolean;
-    }
-  )],
+  integrations: [new Debug()],
 });
 ```
 
@@ -30,17 +22,9 @@ Sentry.init({
 ></script>
 
 <script>
-  Sentry.onLoad(function() {
+  Sentry.onLoad(function () {
     Sentry.init({
-      integrations: [new Sentry.Integrations.Debug(
-        {
-          // trigger DevTools debugger instead of using console.log
-          debugger: boolean;
-
-          // stringify event before passing it to console.log
-          stringify: boolean;
-        }
-      )],
+      integrations: [new Sentry.Integrations.Debug()],
     });
   });
 </script>
@@ -61,15 +45,7 @@ Sentry.init({
 <script>
   Sentry.init({
     dsn: "___PUBLIC_DSN___",
-    integrations: [new Sentry.Integrations.Debug(
-      {
-        // trigger DevTools debugger instead of using console.log
-        debugger: boolean;
-
-        // stringify event before passing it to console.log
-        stringify: boolean;
-      }
-    )],
+    integrations: [new Sentry.Integrations.Debug()],
   });
 </script>
 ```

src/platform-includes/configuration/dedupe/javascript.mdx

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

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/platform-includes/configuration/extra-error-data/javascript.mdx

@@ -2,18 +2,11 @@
 
 ```javascript {tabTitle: ESM}
 import * as Sentry from "@sentry/browser";
-import { ExtraErrorData as ExtraErrorDataIntegration } from "@sentry/integrations";
+import { ExtraErrorData } from "@sentry/integrations";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [
-    new ExtraErrorDataIntegration({
-      // 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.
-      depth: number,
-    }),
-  ],
+  integrations: [new ExtraErrorData()],
 });
 ```
 
@@ -31,14 +24,7 @@ Sentry.init({
 <script>
   Sentry.onLoad(function () {
     Sentry.init({
-      integrations: [
-        new Sentry.Integrations.ExtraErrorData({
-          // 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.
-          depth: number,
-        }),
-      ],
+      integrations: [new Sentry.Integrations.ExtraErrorData()],
     });
   });
 </script>
@@ -59,14 +45,7 @@ Sentry.init({
 <script>
   Sentry.init({
     dsn: "___PUBLIC_DSN___",
-    integrations: [
-      new Sentry.Integrations.ExtraErrorData({
-        // 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.
-        depth: number,
-      }),
-    ],
+    integrations: [new Sentry.Integrations.ExtraErrorData()],
   });
 </script>
 ```