ReactErrorBoundary.ts

import React, { ReactNode } from 'react';
import { Notifier } from '@airbrake/browser';

interface Props {
  fallbackUI?: ReactNode;
}
interface StateProps {
  hasError: boolean;
}

class ErrorBoundary extends React.Component<Props, StateProps> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
    this.airbrake = new Notifier({
      projectId: 1,
      projectKey: 'FIXME'
    });
  }

  static getDerivedStateFromError(error: Error): StateProps {
    // Update state so the next render will show the fallback UI.
    console.error(error);
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    // React already creates a console error, similar to the commented-out code below
    this.airbrake.notify({
      error: error,
      params: {
        info: errorInfo
      }
    });
    console.error(error, errorInfo.componentStack);
  }

  render(): ReactNode {
    if (this.state.hasError && this.props.fallbackUI) {
      return this.props.fallbackUI;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;