-
ErrorBoundary组件
- 在
react16
版本之后,增加了ErrorBoundary
组件
- 监听所有
下级组件
报错,可降级展示UI
- 只监听组件渲染时报错,不监听
DOM
事件错误、异步错误
ErrorBoundary
没有办法监听到点击按钮时候的在click
的时候报错
- 只能监听组件从一开始渲染到渲染成功这段时间报错,渲染成功后在怎么操作产生的错误就不管了
- 可用
try catch
或者window.onerror
(二选一)
- 只在
production
环境生效(需要打包之后查看效果),dev
会直接抛出错误
-
总结
ErrorBoundary
监听组件渲染报错
- 事件报错使用
try catch
或window.onerror
- 异步报错使用
window.onerror
// ErrorBoundary.js
import React from 'react'
class ErrorBoundary extends React.Component {
constructor(props) {
super(props)
this.state = {
error: null // 存储当前的报错信息
}
}
static getDerivedStateFromError(error) {
// 更新 state 使下一次渲染能够显示降级后的 UI
console.info('getDerivedStateFromError...', error)
return { error } // return的信息会等于this.state的信息
}
componentDidCatch(error, errorInfo) {
// 统计上报错误信息
console.info('componentDidCatch...', error, errorInfo)
}
render() {
if (this.state.error) {
// 提示错误
return <h1>报错了</h1>
}
// 没有错误,就渲染子组件
return this.props.children
}
}
// index.js 中使用
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import ErrorBoundary from './ErrorBoundary'
ReactDOM.render(
<React.StrictMode>
<ErrorBoundary>
<App />
</ErrorBoundary>
</React.StrictMode>,
document.getElementById('root')
);