From 5be46b5de9d11080bb9dd2a6339523f48a4b782a Mon Sep 17 00:00:00 2001 From: Ben White Date: Thu, 19 Sep 2024 12:14:47 +0200 Subject: [PATCH 1/2] Update install-web.mdx --- .../docs/integrate/_snippets/install-web.mdx | 25 +++++++++++++------ 1 file changed, 17 insertions(+), 8 deletions(-) diff --git a/contents/docs/integrate/_snippets/install-web.mdx b/contents/docs/integrate/_snippets/install-web.mdx index 0d1a58046b9c..475184d45d59 100644 --- a/contents/docs/integrate/_snippets/install-web.mdx +++ b/contents/docs/integrate/_snippets/install-web.mdx @@ -38,19 +38,28 @@ If you're using React or Next.js, checkout our [React SDK](/docs/libraries/react #### Advanced option - bundle all required extensions -By default, the PostHog JS library will only load the core functionality, lazy-loading extensions such as Surveys or the Session Replay 'recorder' when needed. This can cause issues if you have a Content Security Policy (CSP) that blocks inline scripts or if you want to optimize your bundle at build time to ensure all dependencies are ready immediately. - -You can include all extensions in your bundle by importing them directly before initializing PostHog. In addition you can configure the SDK to never load extensions lazily. +By default, the PostHog JS library will only load the core functionality, lazy-loading extensions such as Surveys or the Session Replay 'recorder' when needed. This can cause issues if you have a Content Security Policy (CSP) that blocks inline scripts or if you want to optimize your bundle at build time to ensure all dependencies are ready immediately. In addition environments like the Chrome Extension store will reject code that loads remote code. To solve this issue we have multiple import options available. ```js-web +// No external code loading possible (this disables all extensions such as Replay, Surveys, Exceptions etc.) +import posthog from 'posthog-js/dist/module.no-external' + +// No external code loading possible but all external dependencies pre-bundled +import posthog from 'posthog-js/dist/module.full.no-external' + +// All external dependencies pre-bundled and with the ability to load external scripts (primarily useful is you use Site Apps) +import posthog from 'posthog-js/dist/module.full' + +// Finally you can also import specific extra dependencies import "posthog-js/dist/recorder" import "posthog-js/dist/surveys" import "posthog-js/dist/exception-autocapture" import "posthog-js/dist/tracing-headers" import "posthog-js/dist/web-vitals" -import posthog from 'posthog-js' +import posthog from 'posthog-js/dist/module.no-external' + +// All other posthog commands are the same as usual +posthog.init('', { api_host: '', person_profiles: 'identified_only' }) +``` -posthog.init('', { - api_host: '', - disable_external_dependency_loading: true // Optional - will ensure we never try to load extensions lazily -}) +> NOTE: You should ensure if using this option that you always import `posthog-js` from the same module, otherwise multiple bundles could get included. At this time `posthog-js/react` does not work with any module import other than the default. From fed78c1b90e79a64739dccca84e59f858785b929 Mon Sep 17 00:00:00 2001 From: Ben White Date: Thu, 19 Sep 2024 12:17:35 +0200 Subject: [PATCH 2/2] Update install-web.mdx --- contents/docs/integrate/_snippets/install-web.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/contents/docs/integrate/_snippets/install-web.mdx b/contents/docs/integrate/_snippets/install-web.mdx index 475184d45d59..44502e4271dc 100644 --- a/contents/docs/integrate/_snippets/install-web.mdx +++ b/contents/docs/integrate/_snippets/install-web.mdx @@ -40,6 +40,8 @@ If you're using React or Next.js, checkout our [React SDK](/docs/libraries/react By default, the PostHog JS library will only load the core functionality, lazy-loading extensions such as Surveys or the Session Replay 'recorder' when needed. This can cause issues if you have a Content Security Policy (CSP) that blocks inline scripts or if you want to optimize your bundle at build time to ensure all dependencies are ready immediately. In addition environments like the Chrome Extension store will reject code that loads remote code. To solve this issue we have multiple import options available. +> Please note - with any of the `no-external` options, the Toolbar will be unavailable as this is only possible as a runtime dependency loaded directly from `us.posthog.com` + ```js-web // No external code loading possible (this disables all extensions such as Replay, Surveys, Exceptions etc.) import posthog from 'posthog-js/dist/module.no-external'