Chore: Prevent loading error from showing too early (#41347)

public/app/app.ts

@@ -74,54 +74,59 @@ export class GrafanaApp {
     this.angularApp = new AngularApp();
   }
 
-  init() {
-    initEchoSrv();
-    addClassIfNoOverlayScrollbar();
-    setLocale(config.bootData.user.locale);
-    setWeekStart(config.bootData.user.weekStart);
-    setPanelRenderer(PanelRenderer);
-    setTimeZoneResolver(() => config.bootData.user.timezone);
-    // Important that extensions are initialized before store
-    initExtensions();
-    configureStore();
+  async init() {
+    try {
+      initEchoSrv();
+      addClassIfNoOverlayScrollbar();
+      setLocale(config.bootData.user.locale);
+      setWeekStart(config.bootData.user.weekStart);
+      setPanelRenderer(PanelRenderer);
+      setTimeZoneResolver(() => config.bootData.user.timezone);
+      // Important that extensions are initialized before store
+      initExtensions();
+      configureStore();
 
-    standardEditorsRegistry.setInit(getAllOptionEditors);
-    standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs);
-    standardTransformersRegistry.setInit(getStandardTransformers);
-    variableAdapters.setInit(getDefaultVariableAdapters);
-    monacoLanguageRegistry.setInit(getDefaultMonacoLanguages);
+      standardEditorsRegistry.setInit(getAllOptionEditors);
+      standardFieldConfigEditorRegistry.setInit(getStandardFieldConfigs);
+      standardTransformersRegistry.setInit(getStandardTransformers);
+      variableAdapters.setInit(getDefaultVariableAdapters);
+      monacoLanguageRegistry.setInit(getDefaultMonacoLanguages);
 
-    setQueryRunnerFactory(() => new QueryRunner());
-    setVariableQueryRunner(new VariableQueryRunner());
+      setQueryRunnerFactory(() => new QueryRunner());
+      setVariableQueryRunner(new VariableQueryRunner());
 
-    locationUtil.initialize({
-      config,
-      getTimeRangeForUrl: getTimeSrv().timeRangeForUrl,
-      getVariablesUrlParams: getVariablesUrlParams,
-    });
+      locationUtil.initialize({
+        config,
+        getTimeRangeForUrl: getTimeSrv().timeRangeForUrl,
+        getVariablesUrlParams: getVariablesUrlParams,
+      });
 
-    // intercept anchor clicks and forward it to custom history instead of relying on browser's history
-    document.addEventListener('click', interceptLinkClicks);
+      // intercept anchor clicks and forward it to custom history instead of relying on browser's history
+      document.addEventListener('click', interceptLinkClicks);
 
-    // disable tool tip animation
-    $.fn.tooltip.defaults.animation = false;
+      // disable tool tip animation
+      $.fn.tooltip.defaults.animation = false;
 
-    this.angularApp.init();
+      this.angularApp.init();
 
-    // Preload selected app plugins
-    const promises = [];
-    for (const modulePath of config.pluginsToPreload) {
-      promises.push(importPluginModule(modulePath));
-    }
+      // Preload selected app plugins
+      const promises: Array<Promise<any>> = [];
+      for (const modulePath of config.pluginsToPreload) {
+        promises.push(importPluginModule(modulePath));
+      }
+
+      await Promise.all(promises);
 
-    Promise.all(promises).then(() => {
       ReactDOM.render(
         React.createElement(AppWrapper, {
           app: this,
         }),
         document.getElementById('reactRoot')
       );
-    });
+    } catch (error: any) {
+      console.error('Failed to start Grafana', error);
+      window.__grafana_load_failed();
+    }
   }
 }
 

public/app/index.ts

@@ -1,9 +1,7 @@
 declare let __webpack_public_path__: string;
 declare let __webpack_nonce__: string;
 
-/**
- * Check if we are hosting files on cdn and set webpack public path
- */
+// Check if we are hosting files on cdn and set webpack public path
 if (window.public_cdn_path) {
   __webpack_public_path__ = window.public_cdn_path;
 }
@@ -16,5 +14,8 @@ if ((window as any).nonce) {
   __webpack_nonce__ = (window as any).nonce;
 }
 
+// This is an indication to the window.onLoad failure check that the app bundle has loaded.
+window.__grafana_app_bundle_loaded = true;
+
 import app from './app';
 app.init();

public/app/types/window.d.ts

@@ -1,6 +1,8 @@
 export declare global {
   interface Window {
+    __grafana_app_bundle_loaded: boolean;
     __grafana_public_path__: string;
+    __grafana_load_failed: () => void;
     public_cdn_path: string;
   }
 }

public/views/index-template.html

@@ -70,7 +70,7 @@
         height: 60px;
         background-repeat: no-repeat;
         background-size: contain;
-        background-image: url("[[.LoadingLogo]]");
+        background-image: url('[[.LoadingLogo]]');
       }
 
       .preloader__text {
@@ -246,29 +246,37 @@
     <div id="reactRoot"></div>
 
     <script nonce="[[.Nonce]]">
-        window.grafanaBootData = {
-          user: [[.User]],
-          settings: [[.Settings]],
-          navTree: [[.NavTree]],
-          themePaths: {
-            light: '[[.ContentDeliveryURL]]public/build/grafana.light.<%= compilation.hash %>.css',
-            dark: '[[.ContentDeliveryURL]]public/build/grafana.dark.<%= compilation.hash %>.css'
-          }
-        };
+      window.grafanaBootData = {
+        user: [[.User]],
+        settings: [[.Settings]],
+        navTree: [[.NavTree]],
+        themePaths: {
+          light: '[[.ContentDeliveryURL]]public/build/grafana.light.<%= compilation.hash %>.css',
+          dark: '[[.ContentDeliveryURL]]public/build/grafana.dark.<%= compilation.hash %>.css'
+        }
+      };
+
+      window.__grafana_load_failed = function() {
+        var preloader = document.getElementsByClassName("preloader");
+        if (preloader.length) {
+          preloader[0].className = "preloader preloader--done";
+        }
+      }
 
       // In case the js files fails to load the code below will show an info message.
-        window.onload = function() {
-          var preloader = document.getElementsByClassName("preloader");
-          if (preloader.length) {
-            preloader[0].className = "preloader preloader--done";
-          }
-        };
-        [[if .ContentDeliveryURL]]
-          window.public_cdn_path = '[[.ContentDeliveryURL]]public/build/';
-        [[end]]
-        [[if .Nonce]]
-          window.nonce = '[[.Nonce]]';
-        [[end]]
+      window.onload = function() {
+        if (window.__grafana_app_bundle_loaded) {
+          return;
+        }
+        window.__grafana_load_failed();
+      };
+
+      [[if .ContentDeliveryURL]]
+        window.public_cdn_path = '[[.ContentDeliveryURL]]public/build/';
+      [[end]]
+      [[if .Nonce]]
+        window.nonce = '[[.Nonce]]';
+      [[end]]
     </script>
 
     [[if .GoogleTagManagerId]]