Keycloak

1
import {
2
  Button,
3
  Modal,
4
  ModalVariant,
5
  Page,
6
  Text,
7
  TextContent,
8
  TextVariants,
9
} from "@patternfly/react-core";
10
import { useTranslation } from "react-i18next";
11
import { isRouteErrorResponse, useRouteError } from "react-router-dom";
12

13
export const ErrorPage = () => {
14
  const { t } = useTranslation();
15
  const error = useRouteError();
16
  const errorMessage = getErrorMessage(error);
17

18
  function onRetry() {
19
    location.href = location.origin + location.pathname;
20
  }
21

22
  return (
23
    <Page>
24
      <Modal
25
        variant={ModalVariant.small}
26
        title={t("somethingWentWrong")}
27
        titleIconVariant="danger"
28
        showClose={false}
29
        isOpen
30
        actions={[
31
          <Button key="tryAgain" variant="primary" onClick={onRetry}>
32
            {t("tryAgain")}
33
          </Button>,
34
        ]}
35
      >
36
        <TextContent>
37
          <Text>{t("somethingWentWrongDescription")}</Text>
38
          {errorMessage && (
39
            <Text component={TextVariants.small}>{errorMessage}</Text>
40
          )}
41
        </TextContent>
42
      </Modal>
43
    </Page>
44
  );
45
};
46

47
function getErrorMessage(error: unknown): string | null {
48
  if (typeof error === "string") {
49
    return error;
50
  }
51

52
  if (isRouteErrorResponse(error)) {
53
    return error.statusText;
54
  }
55

56
  if (error instanceof Error) {
57
    return error.message;
58
  }
59

60
  return null;
61
}
62