reactjs - 如何在React应用程序中全局捕获错误

Question

我有以下两个文件:

//index.js

ReactDOM.render(<App />, document.getElementById('root'));

和

// App.js
setTimeout(() => { throw new Error('An error')}, 3000)

class App extends Component {
  render() {return (<div>Hello</div>)}
}

我想在 App.js文件之外捕获此错误，可能是在 index.js中。我尝试使用 ErrorBoundries( https://reactjs.org/docs/error-boundaries.html)，但是很明显，它不会捕获组件生命周期之外的错误。

有人建议我使用 window.onerror错误处理程序。我对这种方法的担心是，即使外部库之一抛出错误，也会被触发。对此有何评论？

Answer 1

如果您试图在全局范围内捕获不包含第三方 Material 的错误，请不要使用throw自己的错误，只需使用一个函数并扔在那里

使用您的确切代码:

// utils.js
export default {
  throw: err => { throw new Error(err) }
}

// App.js
import utils from 'utils'

setTimeout(() => { utils.throw('An error') }, 3000)

class App extends Component {
  render() {return (<div>Hello</div>)}
}