ref(replay): Change Replay integration from class-based to functional (#8935)

billyvg · web-flow · commit d192b24347f0 · 2024-01-25T12:42:43.000-05:00
Changes documentation regarding Replay integration from class-based to functional-based

e.g.

`new Sentry.Replay()` --&gt; `Sentry.replayIntegration()`
diff --git a/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx b/src/docs/product/sentry-basics/integrate-frontend/initialize-sentry-sdk.mdx
@@ -49,7 +49,7 @@ Sentry captures data by using a platform-specific SDK that you add to your appli
 
    Sentry.init({
      dsn: "<your_DSN_key>",
-     integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+     integrations: [new Sentry.BrowserTracing(), Sentry.replayIntegration()],
 
      // Set tracesSampleRate to 1.0 to capture 100%
      // of transactions for performance monitoring.
diff --git a/src/platform-includes/getting-started-config/javascript.angular.mdx b/src/platform-includes/getting-started-config/javascript.angular.mdx
@@ -19,7 +19,7 @@ Sentry.init({
     }),
     // Registers the Replay integration,
     // which automatically captures Session Replays
-    new Sentry.Replay(),
+    Sentry.replayIntegration(),
   ],
 
   // Set tracesSampleRate to 1.0 to capture 100%
diff --git a/src/platform-includes/getting-started-config/javascript.ember.mdx b/src/platform-includes/getting-started-config/javascript.ember.mdx
@@ -12,7 +12,7 @@ import * as Sentry from "@sentry/ember";
 
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new Sentry.Replay()],
+  integrations: [Sentry.replayIntegration()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
diff --git a/src/platform-includes/getting-started-config/javascript.mdx b/src/platform-includes/getting-started-config/javascript.mdx
@@ -13,7 +13,7 @@ Sentry.init({
   // Alternatively, use `process.env.npm_package_version` for a dynamic release version
   // if your build tool supports it.
   release: "my-project-name@2.3.12",
-  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+  integrations: [new Sentry.BrowserTracing(), Sentry.replayIntegration()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
@@ -44,7 +44,7 @@ Sentry.init({
       // Alternatively, use `process.env.npm_package_version` for a dynamic release version
       // if your build tool supports it.
       release: "my-project-name@2.3.12",
-      integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+      integrations: [new Sentry.BrowserTracing(), Sentry.replayIntegration()],
 
       // Set tracesSampleRate to 1.0 to capture 100%
       // of transactions for performance monitoring.
@@ -77,7 +77,7 @@ Sentry.init({
       // Alternatively, use `process.env.npm_package_version` for a dynamic release version
       // if your build tool supports it.
       release: "my-project-name@2.3.12",
-      integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+      integrations: [new Sentry.BrowserTracing(), Sentry.replayIntegration()],
 
       // Set tracesSampleRate to 1.0 to capture 100%
       // of transactions for performance monitoring.
diff --git a/src/platform-includes/getting-started-config/javascript.react.mdx b/src/platform-includes/getting-started-config/javascript.react.mdx
@@ -21,7 +21,7 @@ Sentry.init({
         matchRoutes
       ),
     }),
-    new Sentry.Replay()
+    Sentry.replayIntegration()
   ],
 
   // Set tracesSampleRate to 1.0 to capture 100%
diff --git a/src/platform-includes/getting-started-config/javascript.solid.mdx b/src/platform-includes/getting-started-config/javascript.solid.mdx
@@ -12,7 +12,7 @@ import { DEV } from "solid-js";
 if (!DEV) {
   Sentry.init({
     dsn: "<Sentry DSN>",
-    integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+    integrations: [new Sentry.BrowserTracing(), Sentry.replayIntegration()],
 
     // Set tracesSampleRate to 1.0 to capture 100%
     // of transactions for performance monitoring.
diff --git a/src/platform-includes/getting-started-config/javascript.svelte.mdx b/src/platform-includes/getting-started-config/javascript.svelte.mdx
@@ -11,7 +11,7 @@ import * as Sentry from "@sentry/svelte";
 // Initialize the Sentry SDK here
 Sentry.init({
   dsn: "___PUBLIC_DSN___",
-  integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+  integrations: [new Sentry.BrowserTracing(), Sentry.replayIntegration()],
 
   // Set tracesSampleRate to 1.0 to capture 100%
   // of transactions for performance monitoring.
diff --git a/src/platform-includes/getting-started-config/javascript.vue.mdx b/src/platform-includes/getting-started-config/javascript.vue.mdx
@@ -23,7 +23,7 @@ Sentry.init({
     new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
     }),
-    new Sentry.Replay(),
+    Sentry.replayIntegration(),
   ],
 
   // Set tracesSampleRate to 1.0 to capture 100%
@@ -66,7 +66,7 @@ Sentry.init({
     new Sentry.BrowserTracing({
       routingInstrumentation: Sentry.vueRouterInstrumentation(router),
     }),
-    new Sentry.Replay(),
+    Sentry.replayIntegration(),
   ],
 
   // Set tracesSampleRate to 1.0 to capture 100%
diff --git a/src/platform-includes/replay/privacy-configuration/javascript.mdx b/src/platform-includes/replay/privacy-configuration/javascript.mdx
@@ -2,13 +2,13 @@ If you're working on a static website that's free of personal identifiable or ot
 you can opt out of the default text masking and image blocking by configuring the `maskAllText` and `blockAllMedia` configuration options respectively:
 
 ```javascript
-new Sentry.Replay({
+Sentry.replayIntegration({
   maskAllText: false,
   blockAllMedia: false,
 });
 ```
 
-The following is a complete list of options that can be used in `new Replay({})`:
+The following is a complete list of options that can be used in `replayIntegration({})`:
 
 | key           | type                       | default                                        | description                                                                                                                                                                                       |
 | ------------- | -------------------------- | ---------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
diff --git a/src/platform-includes/session-replay/install/javascript.mdx b/src/platform-includes/session-replay/install/javascript.mdx
@@ -25,7 +25,7 @@ You can change it with:
     Sentry.init({
       replaysSessionSampleRate: 0.5,
       integrations: [
-        new Sentry.Replay({
+        Sentry.replayIntegration({
           maskAllText: true,
         }),
       ],
diff --git a/src/platform-includes/session-replay/setup/javascript.angular.mdx b/src/platform-includes/session-replay/setup/javascript.angular.mdx
@@ -13,7 +13,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -49,5 +49,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/angular-ivy");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.astro.mdx b/src/platform-includes/session-replay/setup/javascript.astro.mdx
@@ -26,7 +26,7 @@ Sentry.init({
   dsn: "___PUBLIC_DSN___",
   replaysSessionSampleRate: 0.1,
   replaysOnErrorSampleRate: 1.0,
-  integrations: [new Sentry.Replay()],
+  integrations: [Sentry.replayIntegration()],
 });
 ```
 
@@ -49,5 +49,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/astro");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.capacitor.mdx b/src/platform-includes/session-replay/setup/javascript.capacitor.mdx
@@ -22,7 +22,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Replay({
+    replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
diff --git a/src/platform-includes/session-replay/setup/javascript.electron.mdx b/src/platform-includes/session-replay/setup/javascript.electron.mdx
@@ -13,7 +13,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -43,5 +43,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/electron/renderer");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.ember.mdx b/src/platform-includes/session-replay/setup/javascript.ember.mdx
@@ -13,7 +13,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -43,5 +43,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/ember");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.gatsby.mdx b/src/platform-includes/session-replay/setup/javascript.gatsby.mdx
@@ -13,7 +13,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -48,5 +48,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/gatsby");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.mdx b/src/platform-includes/session-replay/setup/javascript.mdx
@@ -14,7 +14,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -44,5 +44,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/browser");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.nextjs.mdx b/src/platform-includes/session-replay/setup/javascript.nextjs.mdx
@@ -15,7 +15,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -50,5 +50,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/nextjs");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.react.mdx b/src/platform-includes/session-replay/setup/javascript.react.mdx
@@ -13,7 +13,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -48,5 +48,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/react");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.remix.mdx b/src/platform-includes/session-replay/setup/javascript.remix.mdx
@@ -15,7 +15,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -50,5 +50,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/remix");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.svelte.mdx b/src/platform-includes/session-replay/setup/javascript.svelte.mdx
@@ -13,7 +13,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -48,5 +48,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/svelte");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.sveltekit.mdx b/src/platform-includes/session-replay/setup/javascript.sveltekit.mdx
@@ -15,7 +15,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -50,5 +50,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/sveltekit");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platform-includes/session-replay/setup/javascript.vue.mdx b/src/platform-includes/session-replay/setup/javascript.vue.mdx
@@ -13,7 +13,7 @@ Sentry.init({
   replaysOnErrorSampleRate: 1.0,
 
   integrations: [
-    new Sentry.Replay({
+    Sentry.replayIntegration({
       // Additional SDK configuration goes in here, for example:
       maskAllText: true,
       blockAllMedia: true,
@@ -52,5 +52,5 @@ Sentry.init({
 
 // Sometime later
 const { Replay } = await import("@sentry/vue");
-Sentry.addIntegration(new Replay());
+Sentry.addIntegration(replayIntegration());
 ```
diff --git a/src/platforms/javascript/common/install/loader.mdx b/src/platforms/javascript/common/install/loader.mdx
@@ -227,7 +227,7 @@ Sentry.init({
     // If you use a bundle with performance monitoring enabled, add the BrowserTracing integration
     new Sentry.BrowserTracing(),
     // If you use a bundle with session replay enabled, add the SessionReplay integration
-    new Sentry.Replay(),
+    Sentry.replayIntegration(),
   ],
 
   // We recommend adjusting this value in production, or using tracesSampler
diff --git a/src/platforms/javascript/common/session-replay/configuration.mdx b/src/platforms/javascript/common/session-replay/configuration.mdx
@@ -20,7 +20,7 @@ The following options can be configured on the root level of your browser-based
 | replaysSessionSampleRate | `number` | `0`     | The sample rate for replays that begin recording immediately and last the entirety of the user's session. `1.0` collects all replays, and `0` collects none.                                                                                                      |
 | replaysOnErrorSampleRate | `number` | `0`     | The sample rate for replays that are recorded when an error happens. This type of replay will record up to a minute of events prior to the error and continue recording until the session ends. `1.0` captures all sessions with an error, and `0` captures none. |
 
-The following can be configured as integration options in `new Replay({})`:
+The following can be configured as integration options in `replayIntegration({})`:
 
 | Key                      | Type                                | Default     | Description                                                                                                                                                                  |
 | ------------------------ | ----------------------------------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -64,7 +64,7 @@ Refer to our <PlatformLink to="/session-replay/privacy/#network-request-and-resp
 Any URL matching the given pattern(s) will then be captured with additional details:
 
 ```javascript
-new Replay({
+replayIntegration({
   networkDetailAllowUrls: [window.location.origin],
 });
 ```
@@ -80,7 +80,7 @@ Requests to a URL matched by the configured patterns will be enhanced with the r
 If you want to capture additional headers, you'll have to configure them with the options `networkRequestHeaders` and `networkResponseHeaders`, for example:
 
 ```javascript
-new Replay({
+replayIntegration({
   networkDetailAllowUrls: [
     window.location.origin,
     "api.example.com",
@@ -119,7 +119,7 @@ Follow these steps in order to use a custom compression worker:
 3. Configure your custom worker script in Replay:
 
 ```javascript
-new Replay({
+replayIntegration({
   workerUrl: "/assets/worker.min.js",
 });
 ```
@@ -142,7 +142,7 @@ Since you are hosting this script yourself, you are responsible for keeping it u
 Session Replay works by recording incremental DOM changes that occur in your web application. Generally, these changes occur in small batches and cause minimal overhead. However, it can be easy to overlook cases that will cause a large amount of DOM mutations to happen in a single update. An example is a custom dropdown component that has an unbounded list of options to render. This can negatively impact performance without Session Replay and its effects will be magnified with Session Replay enabled. In order to avoid this scenario, Session Replay will stop recording if it detects a large number of mutations (default: 10,000), which can be configured by setting `mutationLimit`. Additionally, we provide breadcrumbs in the replay to warn you when a large number of mutations are detected (default: 750).
 
 ```javascript
-new Replay({
+replayIntegration({
   mutationBreadcrumbLimit: 1000,
   mutationLimit: 1500,
 });
diff --git a/src/platforms/javascript/common/session-replay/privacy.mdx b/src/platforms/javascript/common/session-replay/privacy.mdx
diff --git a/src/platforms/javascript/common/session-replay/troubleshooting.mdx b/src/platforms/javascript/common/session-replay/troubleshooting.mdx
diff --git a/src/platforms/javascript/common/session-replay/understanding-sessions.mdx b/src/platforms/javascript/common/session-replay/understanding-sessions.mdx
diff --git a/src/platforms/javascript/guides/astro/manual-setup.mdx b/src/platforms/javascript/guides/astro/manual-setup.mdx
diff --git a/src/platforms/javascript/guides/gatsby/index.mdx b/src/platforms/javascript/guides/gatsby/index.mdx
diff --git a/src/platforms/javascript/guides/nextjs/manual-setup.mdx b/src/platforms/javascript/guides/nextjs/manual-setup.mdx
diff --git a/src/platforms/javascript/guides/remix/manual-setup.mdx b/src/platforms/javascript/guides/remix/manual-setup.mdx
diff --git a/src/platforms/javascript/guides/sveltekit/manual-setup.mdx b/src/platforms/javascript/guides/sveltekit/manual-setup.mdx
