React V16 錯誤處理(componentDidCatch 示例)

文章來源：ReactV16 Error Handler (componentDidCatch example) - A look at componentDidCatch and componentStack，React 交流群:：342685917

React 早就需要一個處理錯誤的解決方案。

在 React V15 中使用 handle_unstableError

從早期的 React 開發以來，一個小的組件拋出錯誤將會破壞整個應用程序，這種情況相當普遍。

最近在 github 上證實，React Core 決定實現一個內置的函數叫做 componentDidCatch！我（原作者）個人也在 2015 年 10 月 21 日做了一些投入，但是從 2014 年 11 月 3 日才開始正式跟蹤這個錯誤/解決方案！

我們再耐心等待 996 天！（譯者註：今天(2017-09-27) React 16 正式發布）

讓我們來看看吧!

React 16 將提供一個內置函數 componentDidCatch，如果 render() 函數拋出錯誤，則會觸發該函數。在下面的示例中，你可以點擊 「button will throw」 來拋出一個錯誤。

在線示例：CodeSandbox

https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html#behavior-in-react-15-and-earlier（中文：React 16 的異常/錯誤處理）

重要提示:

錯誤在渲染階段中被捕獲，但在事件處理程序中不會被捕獲。示例按鈕 「button will not throw」 將不會使用錯誤邊界，但錯誤信息仍將顯示在 javascript 控制台中。

我強烈建議您點擊此代碼並查看示例組件。下面是一個基本的 PotentialError 組件

class PotentialError extends React.Component { n constructor(props) { n super(props); n this.state = { error: false };n }n componentDidCatch(error, info) { n this.setState({ error, info });n }n render() {n if (this.state.error) {n return <h1>Error: {this.state.error.toString()}</h1>;n }n return this.props.children; n } n}n

然後在頂部或任何地方，你可以這樣使用它：

<PotentialError><AwesomeApp /></PotentialError>n

另一個令人敬畏的特性 componentDidCatch 是包含錯誤堆棧的 info 對象！

{this.state.info && this.state.info.componentStack}n

這將告訴你組件在哪裡失效！

讓我知道你正在使用錯誤邊界！

推薦閱讀：