feat(loader): Allow to configure 'window.sentryOnLoad' (#58574)

Allow to configure a new `window.sentryOnLoad` callback, which can be
defined before the Loader Script is loaded, thus allowing to streamline
timing issues & prevent issues if e.g. the loader script was not loaded.

tests added here
getsentry/sentry-javascript#9331

Closes #58428

Author: mydea

scripts/build-js-loader.ts

@@ -42,7 +42,7 @@ async function run() {
   const {code: minifiedBase} = await minify(base, {
     ecma: 5,
     mangle: {
-      reserved: ['onLoad', 'forceLoad'],
+      reserved: ['onLoad', 'forceLoad', 'sentryOnLoad'],
     },
     format: {
       ecma: 5,

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

@@ -132,12 +132,20 @@
     }
     function setupSDK(SDK) {
         try {
+            // If defined, we call window.sentryOnLoad first
+            if (typeof _window.sentryOnLoad === 'function') {
+                _window.sentryOnLoad();
+                // Cleanup to allow garbage collection
+                _window.sentryOnLoad = undefined;
+            }
             // We have to make sure to call all callbacks first
             for (var i = 0; i < onLoadCallbacks.length; i++) {
                 if (typeof onLoadCallbacks[i] === 'function') {
                     onLoadCallbacks[i]();
                 }
             }
+            // Cleanup to allow garbage collection
+            onLoadCallbacks.splice(0);
             // First call all inits from the queue
             for (var i = 0; i < queue.length; i++) {
                 var item = queue[i];

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

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

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

@@ -189,12 +189,21 @@ declare const __LOADER__IS_LAZY__: any;
 
   function setupSDK(SDK) {
     try {
+      // If defined, we call window.sentryOnLoad first
+      if (typeof _window.sentryOnLoad === 'function') {
+        _window.sentryOnLoad();
+        // Cleanup to allow garbage collection
+        _window.sentryOnLoad = undefined;
+      }
+
       // We have to make sure to call all callbacks first
       for (let i = 0; i < onLoadCallbacks.length; i++) {
         if (typeof onLoadCallbacks[i] === 'function') {
           onLoadCallbacks[i]();
         }
       }
+      // Cleanup to allow garbage collection
+      onLoadCallbacks.splice(0);
 
       // First call all inits from the queue
       for (let i = 0; i < queue.length; i++) {
@@ -284,7 +293,12 @@ declare const __LOADER__IS_LAZY__: any;
   }
 })(
   window as Window &
-    typeof globalThis & {SENTRY_SDK_SOURCE?: string; Sentry?: any; __SENTRY__?: any},
+    typeof globalThis & {
+      SENTRY_SDK_SOURCE?: string;
+      Sentry?: any;
+      __SENTRY__?: any;
+      sentryOnLoad?: () => void;
+    },
   document,
   'error' as const,
   'unhandledrejection' as const,