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,7 +14,15 @@ interface Props {
   error: Error | null;
 }
 
-export const ErrorLoadingChunk: FunctionComponent<Props> = ({ error }) => (
+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 />
@@ -30,6 +39,7 @@ export const ErrorLoadingChunk: FunctionComponent<Props> = ({ error }) => (
         {error && error.stack ? error.stack : null}
       </details>
     </div>
-);
+  );
+};
 
 ErrorLoadingChunk.displayName = 'ErrorLoadingChunk';