App.js

<App>
  <ErrorBoundary>
    <Routes />
  </ErrorBoundary>
</App>

ErrorBoundary.js

import React from "react";

// Catches rendering errors in child components and shows a generic error alert.
// This is sort of the on "unhandledException" of React, ideally the component would
// handle its own errors, but if that didn't happen then this will prevent the entire
// app from entering an invalid state.
export default class ErrorBoundary extends React.Component {
  state = { error: null };

  static getDerivedStateFromError(error) {
    return { error };
  }

  render() {
    const { error } = this.state;
    if (error) {
      return (
        <div>
          <p>Something went wrong.</p>
          <p>{error.message}</p>
          <button onClick={() => this.setState({ error: null })}>Close</button>
        </div>
      );
    }

    return this.props.children;
  }
}