Frontend: Auto reload page when chunk is not found (#33445)

public/app/core/components/DynamicImports/ErrorLoadingChunk.tsx

@@ -1,6 +1,7 @@
 import React, { FunctionComponent } from 'react';
 import { Button, stylesFactory } from '@grafana/ui';
 import { css } from '@emotion/css';
+import { useUrlParams } from 'app/core/navigation/hooks';
 
 const getStyles = stylesFactory(() => {
   return css`
@@ -13,23 +14,32 @@ interface Props {
   error: Error | null;
 }
 
-export const ErrorLoadingChunk: FunctionComponent<Props> = ({ error }) => (
-  <div className={getStyles()}>
-    <h2>Unable to find application file</h2>
-    <br />
-    <h2 className="page-heading">Grafana has likely been updated. Please try reloading the page.</h2>
-    <br />
-    <div className="gf-form-group">
-      <Button size="md" variant="secondary" icon="repeat" onClick={() => window.location.reload()}>
-        Reload
-      </Button>
-    </div>
-    <details style={{ whiteSpace: 'pre-wrap' }}>
-      {error && error.message ? error.message : 'Unexpected error occurred'}
+export const ErrorLoadingChunk: FunctionComponent<Props> = ({ error }) => {
+  const [params, updateUrlParams] = useUrlParams();
+
+  if (!params.get('chunkNotFound')) {
+    updateUrlParams({ chunkNotFound: true }, true);
+    window.location.reload();
+  }
+
+  return (
+    <div className={getStyles()}>
+      <h2>Unable to find application file</h2>
       <br />
-      {error && error.stack ? error.stack : null}
-    </details>
-  </div>
-);
+      <h2 className="page-heading">Grafana has likely been updated. Please try reloading the page.</h2>
+      <br />
+      <div className="gf-form-group">
+        <Button size="md" variant="secondary" icon="repeat" onClick={() => window.location.reload()}>
+          Reload
+        </Button>
+      </div>
+      <details style={{ whiteSpace: 'pre-wrap' }}>
+        {error && error.message ? error.message : 'Unexpected error occurred'}
+        <br />
+        {error && error.stack ? error.stack : null}
+      </details>
+    </div>
+  );
+};
 
 ErrorLoadingChunk.displayName = 'ErrorLoadingChunk';