我是 React 的新手。我想捕获所有未捕获的react和意外错误/警告，我想将错误记录到外部 api。我知道它可以通过 Try Catch 方法实现，但我计划在全局范围内使用它，以便其他开发人员无需每次都编写代码。
我试过window.onerror/addEventListener('error', function(e){}只捕获 Javascript 错误而不是react错误。
这类似于以下帖子如何处理异常？. 但是给出的解决方案不能满足我的需求。
有人可以帮我吗？
全局捕获 React 错误
IT技术
javascript
reactjs
error-handling
exception-handling
react-redux
2021-05-22 17:20:11
3个回答
文档参考：https : //reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
实现实例的真实案例：
// app.js
const MOUNT_NODE = document.getElementById('app');
const render = (messages) => {
ReactDOM.render(
<Provider store={store}>
<LanguageProvider messages={messages}>
<ConnectedRouter history={history}>
<ErrorBoundary>
<App />
</ErrorBoundary>
</ConnectedRouter>
</LanguageProvider>
</Provider>,
MOUNT_NODE
);
};
// ErrorBoundary component
export default class ErrorBoundary {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
// Display fallback UI
this.setState({ hasError: true });
}
render() {
if (this.state.hasError) {
return (
<div>
// error message
</div>
);
}
return this.props.children;
}
}需要注意的是，async像这样的方法中的错误async componentDidMount不会在error boundary.
https://developer.mozilla.org/en-US/docs/Web/API/Window/unhandledrejection_event
由于不是所有的错误都会被抓住，我们决定到香草JavaScript中使用window.onerror，并window.onunhandledrejection在我们的项目。
完整问答：
这将有所帮助：https : //reactjs.org/blog/2017/07/26/error-handling-in-react-16.html
基本上，在 React 16 及更高版本中，您可以componentDidCatch()在父组件中使用生命周期方法来记录所有未捕获的异常。