<commit_before>import React, { FunctionComponent } from 'react';
import { Button, stylesFactory } from '@grafana/ui';
import { css } from '@emotion/css';

const getStyles = stylesFactory(() => {
  return css`
    width: 508px;
    margin: 128px auto;
  `;
});

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'}
      <br />
      {error && error.stack ? error.stack : null}
    </details>
  </div>
);

ErrorLoadingChunk.displayName = 'ErrorLoadingChunk';<commit_msg>Frontend: Auto reload page when chunk is not found (#33445)<commit_after>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`
    width: 508px;
    margin: 128px auto;
  `;
});

interface Props {
  error: Error | null;
}

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 />
      <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';
{'fraction_non_alphanumeric': 0.1558872305140962, 'fraction_numerical': 0.010364842454394693, 'mean_word_length': 3.3555956678700363, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4153081', 'n_tokens_mistral': 741, 'n_tokens_neox': 727, 'n_words': 192}