New Component | ErrorBoundary

[aVileBroker]

Create an Error Boundary component which renders a default fallback UI which shows the error in a user-friendly way.

Props API:

• children: ReactNode
• fallbackUI (default to something simple and clean, no Card, etc)
• onError function

One thing to consider is how we can use the global analytics function from the context provider to wrap the onError function. (Error boundaries are all class components)
https://reactjs.org/docs/context.html

Here is a decent start:

import { Component } from "react";

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    if (this.props.onError) {
      this.props.onError(error, errorInfo);
    }
  }

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

    return this.props.children;
  }
}

export default ErrorBoundary;

[masonwoodford]

Are you looking for people to help out with this?