All files / client/src/components AppErrorFallback.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
 
 
 
 
 
 
 
 
633x
5x
 
 
 
 
 
 
 
 
 
 
2x
 
 
 
 
 
 
 
 
1x
 
 
 
 
 
 
1x
5x
 
 
import { ReactElement } from "react";
import { useTranslation } from "react-i18next";
import styled from "styled-components";
import { Button } from "client/components/Button";
import { ButtonStyle } from "client/components/componentStyles";
 
// Shown when the app itself fails before any of it is on screen, so it can lean
// on nothing the app sets up: no router, no store, no polled data. Only the
// theme and translations, both of which are ready before the app is loaded.
export const AppErrorFallback = (): ReactElement => {
  const { t } = useTranslation();
 
  return (
    <Container data-testid="app-error">
      <Heading>{t("appError.title")}</Heading>
      <p>{t("appError.description")}</p>
      <Button
        buttonStyle={ButtonStyle.PRIMARY}
        onClick={() => {
          // The lazy import is attempted again on the next load, so this is a
          // real retry rather than a repaint
          location.reload();
        }}
      >
        {t("appError.reload")}
      </Button>
    </Container>
  );
};
 
const Container = styled.div`
  margin: 0 auto;
  max-width: 500px;
  padding: 24px 16px;
  text-align: center;
`;
 
const Heading = styled.h1`
  font-size: ${(props) => props.theme.fontSizeLarge};
`;