feat: Update Loader script to be v8 compatible (#73831)

This updates the Loader Script to ensure we also check for an already
installed instance of the SDK under v8, where the global carrier
`window.__SENTRY__` has a different shape.

Part of getsentry/sentry-javascript#12187

* Tests for v8:
getsentry/sentry-javascript#12764
* Tests for v7:
getsentry/sentry-javascript#12765

scripts/build-js-loader.ts

@@ -69,7 +69,7 @@ async function run() {
 function replacePlaceholders(str: string): string {
   return str
     .replace('__LOADER__PUBLIC_KEY__', "'{{ publicKey|safe }}'")
-    .replace('__LOADER_SDK_URL__', "'{{ jsSdkUrl|safe }}'")
+    .replace('__LOADER__SDK_URL__', "'{{ jsSdkUrl|safe }}'")
     .replace('__LOADER__CONFIG__', '{{ config|to_json|safe }}')
     .replace('__LOADER__IS_LAZY__', '{{ isLazy|safe|lower }}');
 }

src/sentry/templates/sentry/js-sdk-loader.js.tmpl

@@ -135,6 +135,11 @@
     }
     function sdkIsLoaded() {
         var __sentry = _window.__SENTRY__;
+        // If this is set, it means a v8 SDK is already loaded
+        var version = typeof __sentry !== 'undefined' && __sentry.version;
+        if (version) {
+            return !!__sentry[version];
+        }
         // If there is a global __SENTRY__ that means that in any of the callbacks init() was already invoked
         return !!(!(typeof __sentry === 'undefined') &&
             __sentry.hub &&

src/sentry/templates/sentry/js-sdk-loader.min.js.tmpl

@@ -1 +1 @@
-{% load sentry_helpers %}!function(n,e,r,t,i,o,a,c,s){for(var u=s,f=0;f<document.scripts.length;f++)if(document.scripts[f].src.indexOf(o)>-1){u&&"no"===document.scripts[f].getAttribute("data-lazy")&&(u=!1);break}var p=[];function l(n){return"e"in n}function d(n){return"p"in n}function _(n){return"f"in n}var v=[];function y(n){u&&(l(n)||d(n)||_(n)&&n.f.indexOf("capture")>-1||_(n)&&n.f.indexOf("showReportDialog")>-1)&&m(),v.push(n)}function g(){y({e:[].slice.call(arguments)})}function h(n){y({p:n})}function E(){try{n.SENTRY_SDK_SOURCE="loader";var e=n[i],o=e.init;e.init=function(i){n.removeEventListener(r,g),n.removeEventListener(t,h);var a=c;for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(a[s]=i[s]);!function(n,e){var r=n.integrations||[];if(!Array.isArray(r))return;var t=r.map((function(n){return n.name}));n.tracesSampleRate&&-1===t.indexOf("BrowserTracing")&&(e.browserTracingIntegration?r.push(e.browserTracingIntegration({enableInp:!0})):e.BrowserTracing&&r.push(new e.BrowserTracing));(n.replaysSessionSampleRate||n.replaysOnErrorSampleRate)&&-1===t.indexOf("Replay")&&(e.replayIntegration?r.push(e.replayIntegration()):e.Replay&&r.push(new e.Replay));n.integrations=r}(a,e),o(a)},setTimeout((function(){return function(e){try{"function"==typeof n.sentryOnLoad&&(n.sentryOnLoad(),n.sentryOnLoad=void 0);for(var r=0;r<p.length;r++)"function"==typeof p[r]&&p[r]();p.splice(0);for(r=0;r<v.length;r++){_(o=v[r])&&"init"===o.f&&e.init.apply(e,o.a)}L()||e.init();var t=n.onerror,i=n.onunhandledrejection;for(r=0;r<v.length;r++){var o;if(_(o=v[r])){if("init"===o.f)continue;e[o.f].apply(e,o.a)}else l(o)&&t?t.apply(n,o.e):d(o)&&i&&i.apply(n,[o.p])}}catch(n){console.error(n)}}(e)}))}catch(n){console.error(n)}}var O=!1;function m(){if(!O){O=!0;var n=e.scripts[0],r=e.createElement("script");r.src=a,r.crossOrigin="anonymous",r.addEventListener("load",E,{once:!0,passive:!0}),n.parentNode.insertBefore(r,n)}}function L(){var e=n.__SENTRY__;return!(void 0===e||!e.hub||!e.hub.getClient())}n[i]=n[i]||{},n[i].onLoad=function(n){L()?n():p.push(n)},n[i].forceLoad=function(){setTimeout((function(){m()}))},["init","addBreadcrumb","captureMessage","captureException","captureEvent","configureScope","withScope","showReportDialog"].forEach((function(e){n[i][e]=function(){y({f:e,a:arguments})}})),n.addEventListener(r,g),n.addEventListener(t,h),u||setTimeout((function(){m()}))}(window,document,"error","unhandledrejection","Sentry",'{{ publicKey|safe }}','{{ jsSdkUrl|safe }}',{{ config|to_json|safe }},{{ isLazy|safe|lower }});
+{% load sentry_helpers %}!function(n,e,r,t,i,o,a,c,s){for(var u=s,f=0;f<document.scripts.length;f++)if(document.scripts[f].src.indexOf(o)>-1){u&&"no"===document.scripts[f].getAttribute("data-lazy")&&(u=!1);break}var p=[];function l(n){return"e"in n}function d(n){return"p"in n}function _(n){return"f"in n}var v=[];function y(n){u&&(l(n)||d(n)||_(n)&&n.f.indexOf("capture")>-1||_(n)&&n.f.indexOf("showReportDialog")>-1)&&m(),v.push(n)}function g(){y({e:[].slice.call(arguments)})}function h(n){y({p:n})}function E(){try{n.SENTRY_SDK_SOURCE="loader";var e=n[i],o=e.init;e.init=function(i){n.removeEventListener(r,g),n.removeEventListener(t,h);var a=c;for(var s in i)Object.prototype.hasOwnProperty.call(i,s)&&(a[s]=i[s]);!function(n,e){var r=n.integrations||[];if(!Array.isArray(r))return;var t=r.map((function(n){return n.name}));n.tracesSampleRate&&-1===t.indexOf("BrowserTracing")&&(e.browserTracingIntegration?r.push(e.browserTracingIntegration({enableInp:!0})):e.BrowserTracing&&r.push(new e.BrowserTracing));(n.replaysSessionSampleRate||n.replaysOnErrorSampleRate)&&-1===t.indexOf("Replay")&&(e.replayIntegration?r.push(e.replayIntegration()):e.Replay&&r.push(new e.Replay));n.integrations=r}(a,e),o(a)},setTimeout((function(){return function(e){try{"function"==typeof n.sentryOnLoad&&(n.sentryOnLoad(),n.sentryOnLoad=void 0);for(var r=0;r<p.length;r++)"function"==typeof p[r]&&p[r]();p.splice(0);for(r=0;r<v.length;r++){_(o=v[r])&&"init"===o.f&&e.init.apply(e,o.a)}L()||e.init();var t=n.onerror,i=n.onunhandledrejection;for(r=0;r<v.length;r++){var o;if(_(o=v[r])){if("init"===o.f)continue;e[o.f].apply(e,o.a)}else l(o)&&t?t.apply(n,o.e):d(o)&&i&&i.apply(n,[o.p])}}catch(n){console.error(n)}}(e)}))}catch(n){console.error(n)}}var O=!1;function m(){if(!O){O=!0;var n=e.scripts[0],r=e.createElement("script");r.src=a,r.crossOrigin="anonymous",r.addEventListener("load",E,{once:!0,passive:!0}),n.parentNode.insertBefore(r,n)}}function L(){var e=n.__SENTRY__,r=void 0!==e&&e.version;return r?!!e[r]:!(void 0===e||!e.hub||!e.hub.getClient())}n[i]=n[i]||{},n[i].onLoad=function(n){L()?n():p.push(n)},n[i].forceLoad=function(){setTimeout((function(){m()}))},["init","addBreadcrumb","captureMessage","captureException","captureEvent","configureScope","withScope","showReportDialog"].forEach((function(e){n[i][e]=function(){y({f:e,a:arguments})}})),n.addEventListener(r,g),n.addEventListener(t,h),u||setTimeout((function(){m()}))}(window,document,"error","unhandledrejection","Sentry",'{{ publicKey|safe }}','{{ jsSdkUrl|safe }}',{{ config|to_json|safe }},{{ isLazy|safe|lower }});

src/sentry/templates/sentry/js-sdk-loader.ts

@@ -1,5 +1,5 @@
 declare const __LOADER__PUBLIC_KEY__: any;
-declare const __LOADER_SDK_URL__: any;
+declare const __LOADER__SDK_URL__: any;
 declare const __LOADER__CONFIG__: any;
 declare const __LOADER__IS_LAZY__: any;
 
@@ -186,6 +186,13 @@ declare const __LOADER__IS_LAZY__: any;
 
   function sdkIsLoaded() {
     const __sentry = _window.__SENTRY__;
+
+    // If this is set, it means a v8 SDK is already loaded
+    const version = typeof __sentry !== 'undefined' && __sentry.version;
+    if (version) {
+      return !!__sentry[version];
+    }
+
     // If there is a global __SENTRY__ that means that in any of the callbacks init() was already invoked
     return !!(
       !(typeof __sentry === 'undefined') &&
@@ -311,7 +318,7 @@ declare const __LOADER__IS_LAZY__: any;
   'unhandledrejection' as const,
   'Sentry' as const,
   __LOADER__PUBLIC_KEY__,
-  __LOADER_SDK_URL__,
+  __LOADER__SDK_URL__,
   __LOADER__CONFIG__,
   __LOADER__IS_LAZY__
 );