bitburner-src/src/ui/React/ErrorBoundary.tsx

/**
 * React Component for a simple Error Boundary. The fallback UI for
 * this error boundary is simply a bordered text box
 */
import * as React from "react";

import { EventEmitter } from "../../utils/EventEmitter";

type IProps = {
  eventEmitterForReset?: EventEmitter;
  id?: string;
};

type IState = {
  errorInfo: string;
  hasError: boolean;
};

type IErrorInfo = {
  componentStack: string;
};

// TODO: Move this out to a css file
const styleMarkup = {
  border: "1px solid red",
  display: "inline-block",
  margin: "4px",
  padding: "4px",
};

export class ErrorBoundary extends React.Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      errorInfo: "",
      hasError: false,
    };
  }

  componentDidCatch(error: Error, info: IErrorInfo): void {
    console.error(`Caught error in React ErrorBoundary. Component stack:`);
    console.error(info.componentStack);
  }

  componentDidMount(): void {
    const cb = (): void => {
      this.setState({
        hasError: false,
      });
    };

    if (this.hasEventEmitter()) {
      (this.props.eventEmitterForReset as EventEmitter).addSubscriber({
        cb: cb,
        id: this.props.id as string,
      });
    }
  }

  componentWillUnmount(): void {
    if (this.hasEventEmitter()) {
      (this.props.eventEmitterForReset as EventEmitter).removeSubscriber(
        this.props.id as string,
      );
    }
  }

  hasEventEmitter(): boolean {
    return (
      this.props.eventEmitterForReset != null &&
      this.props.eventEmitterForReset instanceof EventEmitter &&
      this.props.id != null &&
      typeof this.props.id === "string"
    );
  }

  render(): React.ReactNode {
    if (this.state.hasError) {
      return (
        <div style={styleMarkup}>
          <p>
            {`Error rendering UI. This is (probably) a bug. Please report to game developer.`}
          </p>
          <p>{`In the meantime, try refreshing the game WITHOUT saving.`}</p>
          <p>{`Error info: ${this.state.errorInfo}`}</p>
        </div>
      );
    }

    return this.props.children;
  }

  static getDerivedStateFromError(error: Error): IState {
    return {
      errorInfo: error.message,
      hasError: true,
    };
  }
}