PageError

tcmts.share.PageError · #fii7aosk · class

What a page shows if it doesn't load (the server failed or refused it, or is unreachable): what went wrong and a way to try again, not a blank page. Going to another page tries that one.

import { at } from "#codebase/tcmts/share";
import { Component } from "react";
import type { ReactNode } from "react";
import { Button, Link } from "react-aria-components";

export class PageError extends Component<
  { at: string; children: ReactNode },
  { at: string; error: Error | undefined }
> {
  state = { at: this.props.at, error: undefined as Error | undefined };
  static getDerivedStateFromError(error: Error) {
    return { error };
  }
  static getDerivedStateFromProps(props: { at: string }, state: { at: string }) {
    return props.at === state.at ? null : { at: props.at, error: undefined };
  }
  render() {
    const { error } = this.state;
    if (!error) return this.props.children;
    return (
      <div className="narrow">
        <div className="notice bad">
          <b>This page didn't load.</b> {error.message}
        </div>
        <div className="actions">
          <Button className="btn" onPress={() => window.location.reload()}>
            Reload
          </Button>
          <Link className="btn" href={at("/")}>
            Front page
          </Link>
        </div>
      </div>
    );
  }
}

uses

used by