How to define the default error page in React?

Question

• React will display a page that reports the errors and stacks in development mode when catch error.
• I take a try to redefine UI of that page with componentDidCatch method of an error boundary component. But it's not as expected.
  1. My UI will be shown for a very short time, then React default UI will covered my page.
  2. React default UI is implemented in a <iframe> tag, which has fixed position and big-value z-index.
  3. I have to click the 'x' button, close the React default UI, and let my UI appear.

Is there some methods helping me forbid React default UI in development mode ?
Is there some methods helping me redefine the React default UI in development mode ?

Thanks a lot.

Answer 1

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch(). Use static getDerivedStateFromError() to render a fallback UI after an error has been thrown. Use componentDidCatch() to log error information.

import React from "react";

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

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

  componentDidCatch(error, errorInfo) {
    console.error({ error, errorInfo });

    // You can also log the error to an error reporting service
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

Then you can use it as a regular component:

<ErrorBoundary>
  <MyComponent />
</ErrorBoundary>

Error boundaries work like a JavaScript catch {} block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.

Note that error boundaries only catch errors in the components below them in the tree. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how the catch {} block works in JavaScript.