react 错误边界

注意点：

1. 类组件是可以和函数式组件混合写的！！！
2. getDerivedStateFromError是静态的，避免副作用，如果想将错误上报到服务器，则去componentDidCatch里去处理。
3. getDerivedStateFromError直接返回{ hasError: true, errorInfo: error }，即可修改当前错误边界组件的 state，从而达到控制显示内容的效果。
4. 错误边界不捕捉以下错误。

• 事件处理程序（了解更多
• 异步代码（例如 setTimeout 或 requestAnimationFrame 回调）。
• 服务器端的渲染
• 在错误边界本身（而不是其子女）中抛出的错误

import { Store } from 'antd/es/form/interface';
import React from 'react';function Bomb({ username }) {console.log('username', username);if (username === 'bomb') {throw new Error('💥 CABOOM 💥');}return <div>{`Hi ${username}`}</div>;
}import { Component } from 'react';class MyErrorBoundary extends Component {constructor(props: any) {super(props);this.state = {hasError: false,errorInfo: null,};}componentDidMount(): void {console.log('this.props', this.props);}componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {// 在这里可以做错误收集、打印、掉接口上报console.log('MyErrorBoundary   _________   componentDidCatch   error,errorInfo',error,errorInfo,);}static getDerivedStateFromError(error: Error) {console.log('MyErrorBoundary   _________   getDerivedStateFromError   error,errorInfo', error);return { hasError: true, errorInfo: error };}render() {const { hasError, errorInfo } = this.state;return (<div style={{ border: '2px solid pink' }}>这里是我自定义的错误边界{hasError ? (<div><h2>Something went wrong!!!!!</h2><pre style={{ color: 'pink' }}>{errorInfo.message}</pre></div>) : (this.props.children)}</div>);}
}function App() {const [username, setUsername] = React.useState('');const usernameRef = React.useRef(null);return (<div><label>{`Username (don't type "bomb"): `}<inputplaceholder={`type "bomb"`}value={username}onChange={(e) => setUsername(e.target.value)}ref={usernameRef}/></label><div><MyErrorBoundary><Bomb username={username} /></MyErrorBoundary></div></div>);
}export default App;