github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/thanos/pages/errorBoundary/ErrorBoundary.tsx (about)

     1  import React, { ErrorInfo } from 'react';
     2  import { Container, UncontrolledCollapse, Button } from 'reactstrap';
     3  import styles from './ErrorBoundary.module.css';
     4  
     5  interface ErrorState {
     6    error: Error | null;
     7    errorInfo: ErrorInfo | null;
     8  }
     9  
    10  class ErrorBoundary extends React.Component<any, ErrorState> {
    11    constructor(props: any) {
    12      super(props);
    13      this.state = {
    14        error: null,
    15        errorInfo: null,
    16      };
    17    }
    18  
    19    componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    20      this.setState({
    21        error,
    22        errorInfo,
    23      });
    24    }
    25    render(): React.ReactNode {
    26      if (this.state.errorInfo) {
    27        return (
    28          <Container fluid className={styles.container}>
    29            <h1>Aaaah! Something went wrong.</h1>
    30            <h3>
    31              Please file an issue in the&nbsp;
    32              <a href="https://github.com/thanos-io/thanos/issues" target="_blank" rel="noreferrer noopener">
    33                Thanos issue tracker.
    34              </a>
    35            </h3>
    36            <Button color="link" id="error-details-toggler" className={styles.detailsBtn}>
    37              View error details.
    38            </Button>
    39            <UncontrolledCollapse toggler="#error-details-toggler" className={styles.errorDiv}>
    40              <span>{this.state.error && this.state.error.toString()}</span>
    41              {this.state.errorInfo.componentStack}
    42            </UncontrolledCollapse>
    43          </Container>
    44        );
    45      }
    46      return this.props.children;
    47    }
    48  }
    49  
    50  export default ErrorBoundary;