Echo: mechanism for collecting custom events lazily (#20365)

* Introduce Echo for collecting frontend metrics

* Update public/app/core/services/echo/Echo.ts

Co-Authored-By: Peter Holmberg <peterholmberg@users.noreply.github.com>

* Custom meta when adding event

* Rename consumer to backend

* Remove buffer from Echo

* Minor tweaks

* Update package.json

* Update public/app/app.ts

* Update public/app/app.ts

* Collect paint metrics when collecting tti. Remove echoBackendFactory

* Update yarn.lock

* Move Echo interfaces to runtime

* progress on meta and echo

* Collect meta analytics events

* Move MetaanalyticsBackend to enterprise repo

* Fixed unit tests

* Removed unused type from test

* Fixed issues with chunk loading (reverted index-template changes)

* Restored changes

* Fixed webpack prod

package.json

@@ -256,6 +256,7 @@
     "tether": "1.4.5",
     "tether-drop": "https://github.com/torkelo/drop/tarball/master",
     "tinycolor2": "1.4.1",
+    "tti-polyfill": "0.2.2",
     "xss": "1.0.3"
   },
   "resolutions": {

packages/grafana-runtime/src/index.ts

 export * from './services';
 export * from './config';
+export * from './types';
 export { loadPluginCss, SystemJS } from './utils/plugin';
+export { reportMetaAnalytics } from './utils/analytics';

packages/grafana-runtime/src/services/EchoSrv.ts

+interface SizeMeta {
+  width: number;
+  height: number;
+}
+
+export interface EchoMeta {
+  screenSize: SizeMeta;
+  windowSize: SizeMeta;
+  userAgent: string;
+  url?: string;
+  /**
+   * A unique browser session
+   */
+  sessionId: string;
+  userLogin: string;
+  userId: number;
+  userSignedIn: boolean;
+  ts: number;
+}
+
+export interface EchoBackend<T extends EchoEvent = any, O = any> {
+  options: O;
+  supportedEvents: EchoEventType[];
+  flush: () => void;
+  addEvent: (event: T) => void;
+}
+
+export interface EchoEvent<T extends EchoEventType = any, P = any> {
+  type: EchoEventType;
+  payload: P;
+  meta: EchoMeta;
+}
+
+export enum EchoEventType {
+  Performance = 'performance',
+  MetaAnalytics = 'meta-analytics',
+}
+
+export interface EchoSrv {
+  flush(): void;
+  addBackend(backend: EchoBackend): void;
+  addEvent<T extends EchoEvent>(event: Omit<T, 'meta'>, meta?: {}): void;
+}
+
+let singletonInstance: EchoSrv;
+
+export function setEchoSrv(instance: EchoSrv) {
+  singletonInstance = instance;
+}
+
+export function getEchoSrv(): EchoSrv {
+  return singletonInstance;
+}
+
+export const registerEchoBackend = (backend: EchoBackend) => {
+  getEchoSrv().addBackend(backend);
+};

packages/grafana-runtime/src/services/index.ts

@@ -2,3 +2,4 @@ export * from './backendSrv';
 export * from './AngularLoader';
 export * from './dataSourceSrv';
 export * from './LocationSrv';
+export * from './EchoSrv';

packages/grafana-runtime/src/types/analytics.ts

+import { EchoEvent, EchoEventType } from '../services/EchoSrv';
+
+export interface MetaAnalyticsEventPayload {
+  eventName: string;
+  dashboardId?: number;
+  dashboardUid?: string;
+  dashboardName?: string;
+  folderName?: string;
+  panelId?: number;
+  panelName?: string;
+  datasourceName: string;
+  datasourceId?: number;
+  error?: string;
+  duration: number;
+  dataSize?: number;
+}
+
+export interface MetaAnalyticsEvent extends EchoEvent<EchoEventType.MetaAnalytics, MetaAnalyticsEventPayload> {}

packages/grafana-runtime/src/types/index.ts

+export * from './analytics';

packages/grafana-runtime/src/utils/analytics.ts

+import { getEchoSrv, EchoEventType } from '../services/EchoSrv';
+import { MetaAnalyticsEvent, MetaAnalyticsEventPayload } from '../types/analytics';
+
+export const reportMetaAnalytics = (payload: MetaAnalyticsEventPayload) => {
+  getEchoSrv().addEvent<MetaAnalyticsEvent>({
+    type: EchoEventType.MetaAnalytics,
+    payload,
+  });
+};

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -187,7 +187,7 @@ $btn-drag-image: '../img/grab_dark.svg';
 
 $navbar-btn-gicon-brightness: brightness(0.5);
 
-$btn-active-box-shadow: 0px 0px 4px rgba(255,120,10,0.5);
+$btn-active-box-shadow: 0px 0px 4px rgba(255, 120, 10, 0.5);
 
 // Forms
 // -------------------------

public/app/app.ts

@@ -16,6 +16,8 @@ import 'vendor/angular-other/angular-strap';
 import $ from 'jquery';
 import angular from 'angular';
 import config from 'app/core/config';
+// @ts-ignore
+import ttiPolyfill from 'tti-polyfill';
 // @ts-ignore ignoring this for now, otherwise we would have to extend _ interface with move
 import _ from 'lodash';
 import { AppEvents, setMarkdownOptions, setLocale } from '@grafana/data';
@@ -34,6 +36,10 @@ _.move = (array: [], fromIndex: number, toIndex: number) => {
 import { coreModule, angularModules } from 'app/core/core_module';
 import { registerAngularDirectives } from 'app/core/core';
 import { setupAngularRoutes } from 'app/routes/routes';
+import { setEchoSrv, registerEchoBackend } from '@grafana/runtime';
+import { Echo } from './core/services/echo/Echo';
+import { reportPerformance } from './core/services/echo/EchoSrv';
+import { PerformanceBackend } from './core/services/echo/backends/PerformanceBackend';
 
 import 'app/routes/GrafanaCtrl';
 import 'app/features/all';
@@ -163,6 +169,26 @@ export class GrafanaApp {
       importPluginModule(modulePath);
     }
   }
+
+  initEchoSrv() {
+    setEchoSrv(new Echo({ debug: process.env.NODE_ENV === 'development' }));
+
+    ttiPolyfill.getFirstConsistentlyInteractive().then((tti: any) => {
+      // Collecting paint metrics first
+      const paintMetrics = performance.getEntriesByType('paint');
+
+      for (const metric of paintMetrics) {
+        reportPerformance(metric.name, Math.round(metric.startTime + metric.duration));
+      }
+      reportPerformance('tti', tti);
+    });
+
+    registerEchoBackend(new PerformanceBackend({}));
+
+    window.addEventListener('DOMContentLoaded', () => {
+      reportPerformance('dcl', Math.round(performance.now()));
+    });
+  }
 }
 
 export default new GrafanaApp();

public/app/core/components/sidemenu/BottomNavLinks.test.tsx

@@ -21,6 +21,7 @@ const setup = (propOverrides?: object) => {
         orgCount: 2,
         orgRole: '',
         orgId: 1,
+        login: 'hello',
         orgName: 'Grafana',
         timezone: 'UTC',
         helpFlags1: 1,

public/app/core/services/context_srv.ts

@@ -9,6 +9,7 @@ export class User {
   orgRole: any;
   orgId: number;
   orgName: string;
+  login: string;
   orgCount: number;
   timezone: string;
   helpFlags1: number;

public/app/core/services/echo/Echo.ts

+import { EchoBackend, EchoMeta, EchoEvent, EchoSrv } from '@grafana/runtime';
+import { contextSrv } from '../context_srv';
+
+interface EchoConfig {
+  // How often should metrics be reported
+  flushInterval: number;
+  // Enables debug mode
+  debug: boolean;
+}
+
+/**
+ * Echo is a service for collecting events from Grafana client-app
+ * It collects events, distributes them across registered backend and flushes once per configured interval
+ * It's up to the registered backend to decide what to do with a given type of metric
+ */
+export class Echo implements EchoSrv {
+  private config: EchoConfig = {
+    flushInterval: 10000, // By default Echo flushes every 10s
+    debug: false,
+  };
+
+  private backends: EchoBackend[] = [];
+  // meta data added to every event collected
+
+  constructor(config?: Partial<EchoConfig>) {
+    this.config = {
+      ...this.config,
+      ...config,
+    };
+    setInterval(this.flush, this.config.flushInterval);
+  }
+
+  logDebug = (...msg: any) => {
+    if (this.config.debug) {
+      // tslint:disable-next-line
+      // console.debug('ECHO:', ...msg);
+    }
+  };
+
+  flush = () => {
+    for (const backend of this.backends) {
+      backend.flush();
+    }
+  };
+
+  addBackend = (backend: EchoBackend) => {
+    this.logDebug('Adding backend', backend);
+    this.backends.push(backend);
+  };
+
+  addEvent = <T extends EchoEvent>(event: Omit<T, 'meta'>, _meta?: {}) => {
+    const meta = this.getMeta();
+    const _event = {
+      ...event,
+      meta: {
+        ...meta,
+        ..._meta,
+      },
+    };
+
+    for (const backend of this.backends) {
+      if (backend.supportedEvents.length === 0 || backend.supportedEvents.indexOf(_event.type) > -1) {
+        backend.addEvent(_event);
+      }
+    }
+
+    this.logDebug('Adding event', _event);
+  };
+
+  getMeta = (): EchoMeta => {
+    return {
+      sessionId: '',
+      userId: contextSrv.user.id,
+      userLogin: contextSrv.user.login,
+      userSignedIn: contextSrv.user.isSignedIn,
+      screenSize: {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      },
+      windowSize: {
+        width: window.screen.width,
+        height: window.screen.height,
+      },
+      userAgent: window.navigator.userAgent,
+      ts: performance.now(),
+      url: window.location.href,
+    };
+  };
+}

public/app/core/services/echo/EchoSrv.ts

+import { getEchoSrv, EchoEventType } from '@grafana/runtime';
+import { PerformanceEvent } from './backends/PerformanceBackend';
+
+export const reportPerformance = (metric: string, value: number) => {
+  getEchoSrv().addEvent<PerformanceEvent>({
+    type: EchoEventType.Performance,
+    payload: {
+      metricName: metric,
+      duration: value,
+    },
+  });
+};

public/app/core/services/echo/backends/PerformanceBackend.ts

+import { EchoBackend, EchoEvent, EchoEventType } from '@grafana/runtime';
+
+export interface PerformanceEventPayload {
+  metricName: string;
+  duration: number;
+}
+
+export interface PerformanceEvent extends EchoEvent<EchoEventType.Performance, PerformanceEventPayload> {}
+
+export interface PerformanceBackendOptions {
+  url?: string;
+}
+
+/**
+ * Echo's performance metrics consumer
+ * Reports performance metrics to given url (TODO)
+ */
+export class PerformanceBackend implements EchoBackend<PerformanceEvent, PerformanceBackendOptions> {
+  private buffer: PerformanceEvent[] = [];
+  supportedEvents = [EchoEventType.Performance];
+
+  constructor(public options: PerformanceBackendOptions) {}
+
+  addEvent = (e: EchoEvent) => {
+    this.buffer.push(e);
+  };
+
+  flush = () => {
+    if (this.buffer.length === 0) {
+      return;
+    }
+
+    const result = {
+      metrics: this.buffer,
+    };
+
+    // Currently we don have API for sending the metrics hence loging to console in dev environment
+    if (process.env.NODE_ENV === 'development') {
+      console.log('PerformanceBackend flushing:', result);
+    }
+
+    this.buffer = [];
+
+    // TODO: Enable backend request when we have metrics API
+    // if (this.options.url) {
+    // getBackendSrv().post(this.options.url, result);
+    // }
+  };
+}

public/app/features/dashboard/state/PanelQueryRunner.test.ts

 import { PanelQueryRunner } from './PanelQueryRunner';
 import { PanelData, DataQueryRequest, dateTime, ScopedVars } from '@grafana/data';
-import { PanelModel } from './PanelModel';
+import { DashboardModel } from './index';
+import { setEchoSrv } from '@grafana/runtime';
+import { Echo } from '../../../core/services/echo/Echo';
 
 jest.mock('app/core/services/backend_srv');
 
-// Defined within setup functions
-const panelsForCurrentDashboardMock: { [key: number]: PanelModel } = {};
+const dashboardModel = new DashboardModel({
+  panels: [{ id: 1, type: 'graph' }],
+});
 
 jest.mock('app/features/dashboard/services/DashboardSrv', () => ({
   getDashboardSrv: () => {
     return {
-      getCurrent: () => {
-        return {
-          getPanelById: (id: number) => {
-            return panelsForCurrentDashboardMock[id];
-          },
-        };
-      },
+      getCurrent: () => dashboardModel,
     };
   },
 }));
@@ -68,6 +65,7 @@ function describeQueryRunnerScenario(description: string, scenarioFn: ScenarioFn
     };
 
     beforeEach(async () => {
+      setEchoSrv(new Echo());
       setupFn();
 
       const datasource: any = {
@@ -103,13 +101,6 @@ function describeQueryRunnerScenario(description: string, scenarioFn: ScenarioFn
         },
       });
 
-      panelsForCurrentDashboardMock[1] = {
-        id: 1,
-        getQueryRunner: () => {
-          return ctx.runner;
-        },
-      } as PanelModel;
-
       ctx.events = [];
       ctx.runner.run(args);
     });

public/app/features/dashboard/state/analyticsProcessor.ts

+import { getDashboardSrv } from '../services/DashboardSrv';
+
+import { PanelData, LoadingState, DataSourceApi } from '@grafana/data';
+
+import { reportMetaAnalytics, MetaAnalyticsEventPayload } from '@grafana/runtime';
+
+export function getAnalyticsProcessor(datasource: DataSourceApi) {
+  let done = false;
+
+  return (data: PanelData) => {
+    if (!data.request || done) {
+      return;
+    }
+
+    if (data.state !== LoadingState.Done && data.state !== LoadingState.Error) {
+      return;
+    }
+
+    const eventData: MetaAnalyticsEventPayload = {
+      datasourceName: datasource.name,
+      datasourceId: datasource.id,
+      panelId: data.request.panelId,
+      dashboardId: data.request.dashboardId,
+      // app: 'dashboard',
+      // count: 1,
+      dataSize: 0,
+      duration: data.request.endTime - data.request.startTime,
+      eventName: 'data-request',
+      // sessionId: '',
+    };
+
+    // enrich with dashboard info
+    const dashboard = getDashboardSrv().getCurrent();
+    if (dashboard) {
+      eventData.dashboardId = dashboard.id;
+      eventData.dashboardName = dashboard.title;
+      eventData.dashboardUid = dashboard.uid;
+      eventData.folderName = dashboard.meta.folderTitle;
+    }
+
+    if (data.series.length > 0) {
+      // estimate size
+      eventData.dataSize = data.series.length * data.series[0].length;
+    }
+
+    if (data.error) {
+      eventData.error = data.error.message;
+    }
+
+    reportMetaAnalytics(eventData);
+
+    // this done check is to make sure we do not double emit events in case
+    // there are multiple responses with done state
+    done = true;
+  };
+}

public/app/features/dashboard/state/runRequest.test.ts

@@ -10,9 +10,24 @@ import {
 import { Subscriber, Observable, Subscription } from 'rxjs';
 import { runRequest } from './runRequest';
 import { deepFreeze } from '../../../../test/core/redux/reducerTester';
+import { DashboardModel } from './DashboardModel';
+import { setEchoSrv } from '@grafana/runtime';
+import { Echo } from '../../../core/services/echo/Echo';
 
 jest.mock('app/core/services/backend_srv');
 
+const dashboardModel = new DashboardModel({
+  panels: [{ id: 1, type: 'graph' }],
+});
+
+jest.mock('app/features/dashboard/services/DashboardSrv', () => ({
+  getDashboardSrv: () => {
+    return {
+      getCurrent: () => dashboardModel,
+    };
+  },
+}));
+
 class ScenarioCtx {
   ds: DataSourceApi;
   request: DataQueryRequest;
@@ -84,6 +99,7 @@ function runRequestScenario(desc: string, fn: (ctx: ScenarioCtx) => void) {
     const ctx = new ScenarioCtx();
 
     beforeEach(() => {
+      setEchoSrv(new Echo());
       ctx.reset();
       return ctx.setupFn();
     });

public/app/features/dashboard/state/runRequest.ts

 // Libraries
 import { Observable, of, timer, merge, from } from 'rxjs';
 import { flatten, map as lodashMap, isArray, isString } from 'lodash';
-import { map, catchError, takeUntil, mapTo, share, finalize } from 'rxjs/operators';
+import { map, catchError, takeUntil, mapTo, share, finalize, tap } from 'rxjs/operators';
 // Utils & Services
 import { getBackendSrv } from 'app/core/services/backend_srv';
 // Types
@@ -18,6 +18,7 @@ import {
   DataFrame,
   guessFieldTypes,
 } from '@grafana/data';
+import { getAnalyticsProcessor } from './analyticsProcessor';
 import { ExpressionDatasourceID, expressionDatasource } from 'app/features/expressions/ExpressionDatasource';
 
 type MapOfResponsePackets = { [str: string]: DataQueryResponse };
@@ -119,6 +120,7 @@ export function runRequest(datasource: DataSourceApi, request: DataQueryRequest)
         error: processQueryError(err),
       })
     ),
+    tap(getAnalyticsProcessor(datasource)),
     // finalize is triggered when subscriber unsubscribes
     // This makes sure any still running network requests are cancelled
     finalize(cancelNetworkRequestsOnUnsubscribe(request)),

public/app/index.ts

 import app from './app';
+
+app.initEchoSrv();
 app.init();

public/app/routes/GrafanaCtrl.ts

@@ -141,7 +141,6 @@ export function grafanaAppDirective(
     controller: GrafanaCtrl,
     link: (scope: IRootScopeService & AppEventEmitter, elem: JQuery) => {
       const body = $('body');
-
       // see https://github.com/zenorocha/clipboard.js/issues/155
       $.fn.modal.Constructor.prototype.enforceFocus = () => {};
 

public/views/index-template.html

 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <script>
+      // https://github.com/GoogleChromeLabs/tti-polyfill
+      !(function() {
+        if ('PerformanceLongTaskTiming' in window) {
+          var g = (window.__tti = { e: [] });
+          g.o = new PerformanceObserver(function(l) {
+            g.e = g.e.concat(l.getEntries());
+          });
+          g.o.observe({ entryTypes: ['longtask'] });
+        }
+      })();
 
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <meta name="viewport" content="width=device-width">
-  <meta name="theme-color" content="#000">
+    </script>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+    <meta name="viewport" content="width=device-width" />
+    <meta name="theme-color" content="#000" />
 
     <title>Grafana</title>
 
     <base href="[[.AppSubUrl]]/" />
 
-  <link rel="preload" href="public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2" as="font" crossorigin />
-  <link rel="icon" type="image/png" href="public/img/fav32.png">
-  <link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28">
-  <link rel="apple-touch-icon" sizes="180x180" href="public/img/apple-touch-icon.png">
-
-  <link rel="stylesheet" href="public/build/grafana.[[ .Theme ]].<%= webpack.hash %>.css">
+    <link
+      rel="preload"
+      href="public/fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2"
+      as="font"
+      crossorigin
+    />
+    <link rel="icon" type="image/png" href="public/img/fav32.png" />
+    <link rel="mask-icon" href="public/img/grafana_mask_icon.svg" color="#F05A28" />
+    <link rel="apple-touch-icon" sizes="180x180" href="public/img/apple-touch-icon.png" />
 
-  <meta name="apple-mobile-web-app-capable" content="yes"/>
-  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
-  <meta name="msapplication-TileColor" content="#2b5797">
-  <meta name="msapplication-config" content="public/img/browserconfig.xml">
-</head>
+    <link rel="stylesheet" href="public/build/grafana.[[ .Theme ]].<%= webpack.hash %>.css" />
 
-<body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]">
+    <script>
+      performance.mark('css done blocking');
+    </script>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+    <meta name="msapplication-TileColor" content="#2b5797" />
+    <meta name="msapplication-config" content="public/img/browserconfig.xml" />
+  </head>
 
+  <body class="theme-[[ .Theme ]] [[.AppNameBodyClass]]">
     <style>
       .preloader {
         height: 100%;
@@ -39,7 +58,7 @@
         opacity: 0;
         animation-name: preloader-fade-in;
         animation-iteration-count: 1;
-      animation-duration: .9s;
+        animation-duration: 0.9s;
         animation-delay: 1.35s;
         animation-fill-mode: forwards;
       }
@@ -47,14 +66,14 @@
       .preloader__bounce {
         text-align: center;
         animation-name: preloader-bounce;
-      animation-duration: .9s;
+        animation-duration: 0.9s;
         animation-iteration-count: infinite;
       }
 
       .preloader__logo {
         display: inline-block;
         animation-name: preloader-squash;
-      animation-duration: .9s;
+        animation-duration: 0.9s;
         animation-iteration-count: infinite;
         width: 60px;
         height: 60px;
@@ -70,7 +89,7 @@
         font-family: Sans-serif;
         opacity: 0;
         animation-name: preloader-fade-in;
-      animation-duration: .9s;
+        animation-duration: 0.9s;
         animation-delay: 1.8s;
         animation-fill-mode: forwards;
       }
@@ -87,7 +106,7 @@
         0% {
           opacity: 0;
           /*animation-timing-function: linear;*/
-        animation-timing-function: cubic-bezier(0, 0, 0.5, 1)
+          animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
         }
         100% {
           opacity: 1;
@@ -98,37 +117,37 @@
         from,
         to {
           transform: translateY(0px);
-        animation-timing-function: cubic-bezier(0.3, 0.0, 0.1, 1)
+          animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
         }
         50% {
           transform: translateY(-50px);
-        animation-timing-function: cubic-bezier(.9, 0, .7, 1)
+          animation-timing-function: cubic-bezier(0.9, 0, 0.7, 1);
         }
       }
 
       @keyframes preloader-squash {
         0% {
-        transform: scaleX(1.3) scaleY(.8);
-        animation-timing-function: cubic-bezier(.3, 0, .1, 1);
+          transform: scaleX(1.3) scaleY(0.8);
+          animation-timing-function: cubic-bezier(0.3, 0, 0.1, 1);
           transform-origin: bottom center;
         }
         15% {
-        transform: scaleX(.75) scaleY(1.25);
-        animation-timing-function: cubic-bezier(0, 0, .7, .75);
+          transform: scaleX(0.75) scaleY(1.25);
+          animation-timing-function: cubic-bezier(0, 0, 0.7, 0.75);
           transform-origin: bottom center;
         }
         55% {
-        transform: scaleX(1.05) scaleY(.95);
-        animation-timing-function: cubic-bezier(.9, 0, 1, 1);
+          transform: scaleX(1.05) scaleY(0.95);
+          animation-timing-function: cubic-bezier(0.9, 0, 1, 1);
           transform-origin: top center;
         }
         95% {
-        transform: scaleX(.75) scaleY(1.25);
+          transform: scaleX(0.75) scaleY(1.25);
           animation-timing-function: cubic-bezier(0, 0, 0, 1);
           transform-origin: bottom center;
         }
         100% {
-        transform: scaleX(1.3) scaleY(.8);
+          transform: scaleX(1.3) scaleY(0.8);
           transform-origin: bottom center;
           animation-timing-function: cubic-bezier(0, 0, 0.7, 1);
         }
@@ -179,8 +198,11 @@
         </p>
         <p>
           1. This could be caused by your reverse proxy settings.<br /><br />
-        2. If you host grafana under subpath make sure your grafana.ini root_url setting includes subpath<br /> <br />
-        3. If you have a local dev build make sure you build frontend using: yarn start, yarn start:hot, or yarn build<br /> <br />
+          2. If you host grafana under subpath make sure your grafana.ini root_url setting includes subpath<br />
+          <br />
+          3. If you have a local dev build make sure you build frontend using: yarn start, yarn start:hot, or yarn
+          build<br />
+          <br />
           4. Sometimes restarting grafana-server can help<br />
         </p>
       </div>
@@ -253,25 +275,54 @@
     [[if .GoogleTagManagerId]]
     <!-- Google Tag Manager -->
     <script>
-			dataLayer = [{
-				'IsSignedIn': '[[.User.IsSignedIn]]',
-				'Email': '[[.User.Email]]',
-				'Name': '[[.User.Name]]',
-				'UserId': '[[.User.Id]]',
-				'OrgId': '[[.User.OrgId]]',
-				'OrgName': '[[.User.OrgName]]',
-			}];
+      dataLayer = [
+        {
+          IsSignedIn: '[[.User.IsSignedIn]]',
+          Email: '[[.User.Email]]',
+          Name: '[[.User.Name]]',
+          UserId: '[[.User.Id]]',
+          OrgId: '[[.User.OrgId]]',
+          OrgName: '[[.User.OrgName]]',
+        },
+      ];
     </script>
     <noscript>
-			<iframe src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]" height="0" width="0" style="display:none;visibility:hidden"></iframe>
+      <iframe
+        src="//www.googletagmanager.com/ns.html?id=[[.GoogleTagManagerId]]"
+        height="0"
+        width="0"
+        style="display:none;visibility:hidden"
+      ></iframe>
     </noscript>
-		<script>(function (w, d, s, l, i) {
-				w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0],
-					j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
-			})(window, document, 'script', 'dataLayer', '[[.GoogleTagManagerId]]');</script>
+    <script>
+      (function(w, d, s, l, i) {
+        w[l] = w[l] || [];
+        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+        var f = d.getElementsByTagName(s)[0],
+          j = d.createElement(s),
+          dl = l != 'dataLayer' ? '&l=' + l : '';
+        j.async = true;
+        j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl;
+        f.parentNode.insertBefore(j, f);
+      })(window, document, 'script', 'dataLayer', '[[.GoogleTagManagerId]]');
+    </script>
     <!-- End Google Tag Manager -->
     [[end]]
 
-</body>
-
+    <%
+    for (key in htmlWebpackPlugin.files.chunks) { %><%
+      if (htmlWebpackPlugin.files.jsIntegrity) { %>
+    <script
+      src="<%= htmlWebpackPlugin.files.chunks[key].entry %>"
+      type="text/javascript"
+      integrity="<%= htmlWebpackPlugin.files.jsIntegrity[htmlWebpackPlugin.files.js.indexOf(htmlWebpackPlugin.files.chunks[key].entry)] %>"
+      crossorigin="<%= webpackConfig.output.crossOriginLoading %>"></script><%
+      } else { %>
+    <script src="<%= htmlWebpackPlugin.files.chunks[key].entry %>" type="text/javascript"></script><%
+      } %><%
+    } %>
+    <script>
+      performance.mark('js done blocking');
+    </script>
+  </body>
 </html>

scripts/webpack/webpack.dev.js

@@ -81,7 +81,7 @@ module.exports = (env = {}) =>
       new HtmlWebpackPlugin({
         filename: path.resolve(__dirname, '../../public/views/index.html'),
         template: path.resolve(__dirname, '../../public/views/index-template.html'),
-        inject: 'body',
+        inject: false,
         chunksSortMode: 'none',
         excludeChunks: ['dark', 'light']
       }),

scripts/webpack/webpack.prod.js

@@ -77,7 +77,7 @@ module.exports = merge(common, {
     new HtmlWebpackPlugin({
       filename: path.resolve(__dirname, '../../public/views/index.html'),
       template: path.resolve(__dirname, '../../public/views/index-template.html'),
-      inject: 'body',
+      inject: false,
       excludeChunks: ['manifest', 'dark', 'light'],
       chunksSortMode: 'none'
     }),

yarn.lock

@@ -20371,6 +20371,11 @@ tsutils@^3.9.1:
   dependencies:
     tslib "^1.8.1"
 
+tti-polyfill@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/tti-polyfill/-/tti-polyfill-0.2.2.tgz#f7bbf71b13afa9edf60c8bb0d0c05f134e1513b9"
+  integrity sha512-URIoJxvsHThbQEJij29hIBUDHx9UNoBBCQVjy7L8PnzkqY8N6lsAI6h8JrT1Wt2lA0avus/DkuiJxd9qpfCpqw==
+
 tty-browserify@0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"