React Error Boundary

React Error Boundary

import * as React from 'react';
import {Component} from 'react';
import {createRoot} from 'react-dom/client';

function renderWithError() {
  throw new Error('error');
}

function A() {
  return <ErrorBoundary name="boundary-2">{renderWithError()}</ErrorBoundary>;
}

function App() {
  return (
    <ErrorBoundary name="boundary-1">
      <A />
    </ErrorBoundary>
  )
}


class ErrorBoundary extends Component<
  { name: string; children: React.ReactNode },
  { hasError: boolean }
> {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

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

  componentDidCatch() {
    console.log(this.props.name);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);

console: “boundary-1”

错误边界仅捕获树中位于其组件下的组件中的错误。错误边界无法捕获自身内部的错误，是由最近的错误边界组件捕获的，该组件的名称为“boundary-1”。

“boundary-2”嵌套在“boundary-1”中，因此“boundary-1”捕获“boundary-2”中触发的错误。