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()); -}); -``` +