diff --git a/docs/platforms/javascript/common/configuration/integrations/index.mdx b/docs/platforms/javascript/common/configuration/integrations/index.mdx
index 92f73f6e08b13..0803567ec831e 100644
--- a/docs/platforms/javascript/common/configuration/integrations/index.mdx
+++ b/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.
+
+
+
+### 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`
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.angular.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.angular.mdx
new file mode 100644
index 0000000000000..7f6ed4a89c6f7
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.astro.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.astro.mdx
new file mode 100644
index 0000000000000..7bfbe6c914b1c
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.electron.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.electron.mdx
new file mode 100644
index 0000000000000..9ff541a35fd6b
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.ember.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.ember.mdx
new file mode 100644
index 0000000000000..d8033b2fa0cbb
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.gatsby.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.gatsby.mdx
new file mode 100644
index 0000000000000..1752fb034db9f
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.mdx
new file mode 100644
index 0000000000000..0eaa673856397
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.nextjs.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.nextjs.mdx
new file mode 100644
index 0000000000000..b0bd33ee026e8
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.react.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.react.mdx
new file mode 100644
index 0000000000000..9c2338b673ecb
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.remix.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.remix.mdx
new file mode 100644
index 0000000000000..caec03a0f7d69
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.solid.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.solid.mdx
new file mode 100644
index 0000000000000..954f6d1075e78
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.svelte.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.svelte.mdx
new file mode 100644
index 0000000000000..1858b568ba2e8
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.sveltekit.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.sveltekit.mdx
new file mode 100644
index 0000000000000..f4c451babd588
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/configuration/integrations/lazy-loading-replay/javascript.vue.mdx b/platform-includes/configuration/integrations/lazy-loading-replay/javascript.vue.mdx
new file mode 100644
index 0000000000000..45556ac522c2b
--- /dev/null
+++ b/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());
+});
+```
diff --git a/platform-includes/session-replay/setup/javascript.angular.mdx b/platform-includes/session-replay/setup/javascript.angular.mdx
index 4e66a5f6ad5f9..4511307e19f1d 100644
--- a/platform-includes/session-replay/setup/javascript.angular.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.astro.mdx b/platform-includes/session-replay/setup/javascript.astro.mdx
index 0f78bbd157a80..dff1b762d54bc 100644
--- a/platform-includes/session-replay/setup/javascript.astro.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.electron.mdx b/platform-includes/session-replay/setup/javascript.electron.mdx
index d8b3f42dd69d4..aad0de8ac2472 100644
--- a/platform-includes/session-replay/setup/javascript.electron.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.ember.mdx b/platform-includes/session-replay/setup/javascript.ember.mdx
index 0e91a40c3cb9f..5c15c2c7dece6 100644
--- a/platform-includes/session-replay/setup/javascript.ember.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.gatsby.mdx b/platform-includes/session-replay/setup/javascript.gatsby.mdx
index 3b07297ab15f4..06ab803189f0d 100644
--- a/platform-includes/session-replay/setup/javascript.gatsby.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.mdx b/platform-includes/session-replay/setup/javascript.mdx
index 800ee62f150cd..999c3de777f85 100644
--- a/platform-includes/session-replay/setup/javascript.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.nextjs.mdx b/platform-includes/session-replay/setup/javascript.nextjs.mdx
index 6ea387d542cd0..ecb087da00bd2 100644
--- a/platform-includes/session-replay/setup/javascript.nextjs.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.react.mdx b/platform-includes/session-replay/setup/javascript.react.mdx
index 9e11846e8cdd0..7568b7e6bc6de 100644
--- a/platform-includes/session-replay/setup/javascript.react.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.remix.mdx b/platform-includes/session-replay/setup/javascript.remix.mdx
index 10557883c8491..96c491a0c1c99 100644
--- a/platform-includes/session-replay/setup/javascript.remix.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.svelte.mdx b/platform-includes/session-replay/setup/javascript.svelte.mdx
index da7d9945d0756..26f6e7e630736 100644
--- a/platform-includes/session-replay/setup/javascript.svelte.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.sveltekit.mdx b/platform-includes/session-replay/setup/javascript.sveltekit.mdx
index b923b006418a1..3c4f13b827f26 100644
--- a/platform-includes/session-replay/setup/javascript.sveltekit.mdx
+++ b/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());
-});
-```
+
diff --git a/platform-includes/session-replay/setup/javascript.vue.mdx b/platform-includes/session-replay/setup/javascript.vue.mdx
index a65b68cfc0130..200126d210f71 100644
--- a/platform-includes/session-replay/setup/javascript.vue.mdx
+++ b/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());
-});
-```
+