react-error-boundary#FallbackProps TypeScript Examples

function ErrorFallback({ resetErrorBoundary, error }: FallbackProps) {
  return (
    <ScreenWrapper>
      <ScrollView>
        <MyHeader>App Crashed:</MyHeader>
        <MyText style={{ marginVertical: 40, fontSize: 16 }}>
          {error?.message}
        </MyText>
        <MyButton
          style={{ marginBottom: 20 }}
          secondary
          onPress={() => Clipboard.setString(error?.stack || "")}
        >
          copy stacktrace to clipboard
        </MyButton>
        <MyButton
          style={{ marginBottom: 20 }}
          secondary
          onPress={() =>
            Linking.openURL("https://github.com/benawad/vsinder/issues")
          }
        >
          report a bug
        </MyButton>
        <MyButton onPress={resetErrorBoundary}>reload app</MyButton>
      </ScrollView>
    </ScreenWrapper>
  );
}

ErrorFallback = ({ error }: FallbackProps) => (
  <Wrapper>
    <Description>
      <h1>Oopsie!</h1>
      <Error>
        {error.name}: {error.message}
      </Error>
      <p>
        Seems like something is broken :(
        <br />
        You can try fixing this by clearing your settings and reloading the
        page.
        <br />
        <strong>But be aware that this will delete your settings!!!</strong>
      </p>
      <p>Use these Buttons to delete broken localstorage items.</p>
      <DeleteButtons />
    </Description>
    <strong>
      This is your localstorage, maybe you want to back it up or use it for
      diagnostics?
    </strong>
    <pre>{JSON.stringify(getLSContent(), null, 2)}</pre>
  </Wrapper>
)

ErrorPage: React.FC<FallbackProps> = ({ error }) => {
  const { t } = useTranslation();

  return (
    <Box color="white">
      <Box bg="red.600" width="100%" p={4}>
        <Heading>{t("Whoops! Looks like something went wrong!")}</Heading>
        <Text>
          {t(
            "You can either reload the page, or report this error to us on our"
          )}{" "}
          <Link isExternal href="https://github.com/Rari-Capital/rari-dApp">
            <u>GitHub</u>
            <ExternalLinkIcon mx="2px" />
          </Link>
        </Text>
      </Box>

      <Code colorScheme="red">{error.toString()}</Code>
    </Box>
  );
}

function ErrorFallback({ resetErrorBoundary, error }: FallbackProps) {
  return (
    <ScreenWrapper>
      <ScrollView>
        <MyHeader>App Crashed:</MyHeader>
        <MyText style={{ marginVertical: 40, fontSize: 16 }}>
          {error?.message}
        </MyText>
        <MyButton
          style={{ marginBottom: 20 }}
          secondary
          onPress={() => Clipboard.setString(error?.stack || "")}
        >
          copy stacktrace to clipboard
        </MyButton>
        <MyButton onPress={resetErrorBoundary}>reload app</MyButton>
      </ScrollView>
    </ScreenWrapper>
  );
}

function FallbackPage({ error, resetErrorBoundary }: FallbackProps) {
  return (
    <div className="main-content-container p-5">
      <div className="page-header mb-4">
        <PageTitle
          title="Error"
          subtitle="This should not have happened"
          className="text-sm-left my-3"
        />
      </div>
      <div className="page-header mb-4">
        <div>
          <p>Something went wrong:</p>
          <pre>
            <code className="text-warning">{error!.message}</code>
          </pre>
        </div>
      </div>
      <div className="page-header">
        <div>
          <Button onClick={resetErrorBoundary}>Try again</Button>
        </div>
      </div>
    </div>
  )
}

ErrorFallback = ({
  error,
  resetErrorBoundary,
}: FallbackProps): JSX.Element => {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  );
}

function AppError({ error }: FallbackProps) {
  return (
    <FullPageCentered>
      <Alert severity="error">
        <AlertTitle>Something went wrong</AlertTitle>
        <pre>{error.stack}</pre>
      </Alert>
    </FullPageCentered>
  );
}

getErrorFallbackComponent = ({ title }: WithErrorBoundaryProps) => {
  const FallbackComponent = ({ resetErrorBoundary }: FallbackProps) => {
    const content = 'There was an internal error';
    const primaryAction = [
      <Button
        onClick={resetErrorBoundary}
        variant={ButtonVariant.link}
        isInline
        key="reset-error-boundary"
      >
        try again
      </Button>,
    ];
    return <ErrorState {...{ content, primaryAction, title }}></ErrorState>;
  };
  return FallbackComponent;
}

function withErrorHandler<P extends object>(Component: FC<P>, Fallback: FC<FallbackProps>) {
  function ComponentWithErrorHandling(props: P) {
    return (
      <ErrorBoundary FallbackComponent={Fallback}>
        <Component {...(props as P)} />
      </ErrorBoundary>
    );
  }

  ComponentWithErrorHandling.displayName = `WithErrorHandling${getDisplayName(
    Component as FC<unknown>,
  )}`;

  return ComponentWithErrorHandling;
}

ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) => (
  <div>
    <pre>{error.stack}</pre>
    <button onClick={resetErrorBoundary}>Reset</button>
  </div>
)

SettingsFallback: React.FC<FallbackProps> = () => {
  return <MessageBar severity="error" message="Error parsing Settings" />
}

export function ErrorFallback({ error }: FallbackProps) {
  return <ErrorPage error={error} />
}