All files / src/components DefaultErrorBoundary.tsx

100% Statements 17/17
100% Branches 6/6
100% Functions 6/6
100% Lines 15/15

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 42 43 44 45 46 47 481x               1x   8x 8x     1x 26x     1x 26x           1x 14x 6x       6x           27x             8x   1x  
import * as React from "react";
 
interface IState {
  hasError: boolean;
  error?: Error;
  errorInfo?: React.ErrorInfo;
}
 
export class DefaultErrorBoundary extends React.Component<{}, IState> {
  constructor(props: {}) {
    super(props);
    this.state = { hasError: false };
  }
 
  public static getDerivedStateFromError(error: Error): Partial<IState> {
    return { hasError: true, error };
  }
 
  public componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    this.setState({
      error,
      errorInfo
    });
  }
 
  public render(): React.ReactNode {
    if (this.state.hasError) {
      const componentStackLines = this.state.errorInfo
        ? this.state.errorInfo.componentStack.split("\n")
        : [];
 
      return (
        <div style={{ color: "red" }}>
          <h1>Something went wrong.</h1>
          <p>{`Error: ${this.state.error}`}</p>
          <p>{`ErrorInfo: ${JSON.stringify(this.state.errorInfo)}`}</p>
          <h2>Component Stack</h2>
          {componentStackLines.map((line, index) => (
            <p key={index}>{line}</p>
          ))}
        </div>
      );
    }
 
    return this.props.children;
  }
}