docs(js-integrations): Add snippet for dynamic loading (#10804)

* docs(js-integrations): Add snippet for dynamic loading

* clarify CDN

* Apply suggestions from code review

Co-authored-by: Liza Mock <liza.mock@sentry.io>

---------

Co-authored-by: Liza Mock <liza.mock@sentry.io>

docs/platforms/javascript/common/configuration/integrations/index.mdx

@@ -50,7 +50,19 @@ For all other cases, we recommend you use the `integrations` option.
 
 ## Lazy Loading Integrations
 
-You can lazy load pluggable integrations via `Sentry.lazyLoadIntegration()`. This will try to load the integration from the CDN, allowing you to add an integration without increasing the initial bundle size.
+Lazy-loading lets you add pluggable integrations without increasing the initial bundle size. You can do this in two ways:
+
+### 1. Dynamic Import (recommended)
+
+You can add the integration with a dynamic import using `import()`. This method loads the integration from the npm package. To avoid running into issues with `import()`, you should use a bundler that supports dynamic imports. If you're using a tool like Vite for your project, the bundling process is probably already set up.
+
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />
+
+### 2. Load from CDN with `lazyLoadIntegration()`
+
+You can also lazy-load pluggable integrations via `Sentry.lazyLoadIntegration()`. This will attempt to load the integration from the Sentry CDN.
+Note that this function will reject if it fails to load the integration from the Sentry CDN, which can happen if a user has an ad-blocker or if there's a network problem. You should always make sure that rejections are handled for this function in your application.
+
 
 ```javascript
 async function loadHttpClient() {
@@ -61,8 +73,6 @@ async function loadHttpClient() {
 }
 ```
 
-Note that this function will reject if it fails to load the integration from the CDN, which can happen e.g. if a user has an ad-blocker or if there is a network problem. You should always make sure to handle rejections for this function in your application.
-
 Lazy loading is available for the following integrations:
 
 - `replayIntegration`

platform-includes/configuration/integrations/lazy-loading-replay/javascript.angular.mdx

@@ -0,0 +1,11 @@
+```javascript {filename: main.ts} {3, 7-8}
+Sentry.init({
+ // Note, replayIntegration is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/angular").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.astro.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/astro").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.electron.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/electron/renderer").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.ember.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/ember").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.gatsby.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/gatsby").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/browser").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.nextjs.mdx

@@ -0,0 +1,11 @@
+```javascript {filename:sentry.client.config.ts}
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/nextjs").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.react.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/react").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.remix.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/remix").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.solid.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/solid").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.svelte.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/svelte").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.sveltekit.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/sveltekit").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/configuration/integrations/lazy-loading-replay/javascript.vue.mdx

@@ -0,0 +1,11 @@
+```javascript
+Sentry.init({
+ // Note, Replay is NOT instantiated below:
+ integrations: [],
+});
+
+// Sometime later
+import("@sentry/vue").then(lazyLoadedSentry => {
+ Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
+});
+```

platform-includes/session-replay/setup/javascript.angular.mdx

@@ -51,14 +51,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript {filename: main.ts} {3, 7-8}
-Sentry.init({
- // Note, replayIntegration is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/angular").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.astro.mdx

@@ -50,14 +50,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/astro").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.electron.mdx

@@ -43,14 +43,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/electron/renderer").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.ember.mdx

@@ -44,14 +44,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/ember").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.gatsby.mdx

@@ -49,14 +49,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/gatsby").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.mdx

@@ -44,14 +44,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/browser").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.nextjs.mdx

@@ -51,14 +51,4 @@ To learn more about session replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript {filename:sentry.client.config.ts}
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/nextjs").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.react.mdx

@@ -49,14 +49,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/react").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.remix.mdx

@@ -51,14 +51,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/remix").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.svelte.mdx

@@ -49,14 +49,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/svelte").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.sveltekit.mdx

@@ -51,14 +51,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/sveltekit").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

platform-includes/session-replay/setup/javascript.vue.mdx

@@ -53,14 +53,4 @@ To learn more about Session Replay privacy, [read our docs.](/platforms/javascri
 
 Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`:
 
-```javascript
-Sentry.init({
- // Note, Replay is NOT instantiated below:
- integrations: [],
-});
-
-// Sometime later
-import("@sentry/vue").then(lazyLoadedSentry => {
- Sentry.addIntegration(lazyLoadedSentry.replayIntegration());
-});
-```
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />