All files / Error ErrorBoundary.tsx

0% Statements 0/55
0% Branches 0/1
0% Functions 0/1
0% Lines 0/55

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 48 49 50 51 52 53 54 55 56                                                                                                               
import React, { Component } from "react";
import styled from "@emotion/styled";

const ErrorMessage = styled("div")`
  color: #ce1126;
  background-color: rgba(206, 17, 38, 0.05);
  padding: 0.5rem;
`;

interface ErrorBoundaryProps {
  children: any;
}

interface ErrorBoundaryState {
  error: any;
  errorInfo: any;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  state: ErrorBoundaryState = {
    error: null,
    errorInfo: null,
  };

  componentDidCatch(error, errorInfo) {
    // Catch errors in any components below and re-render with error message
    this.setState({
      error: error,
      errorInfo: errorInfo,
    });
  }

  render() {
    if (this.state.errorInfo) {
      // Error path
      const moduleName = this.state.errorInfo.componentStack.split("\n").reduce((result, curr) => {
        return !result && curr ? curr.trim() : result;
      });
      return (
        <ErrorMessage>
          <h2>An error occurred {moduleName}</h2>
          <details style={{ whiteSpace: "pre-wrap" }}>
            {this.state.error && this.state.error.toString()}
            <br />
            {this.state.errorInfo.componentStack}
          </details>
        </ErrorMessage>
      );
    }
    // Normally, just render children
    return this.props.children;
  }
}

export default ErrorBoundary;