React使用錯誤邊界(Error Boundaries)捕捉Components錯誤範例。
簡介
React對於Components的錯誤可使用「錯誤邊界」來捕捉。錯誤邊界是一個Component並有定義生命週期方法中的static getDerivedStateFromError()
或componentDidCatch()
。當component在render時其child components發生錯誤時會呼叫這些方法。
注意錯誤邊界僅用來處理Component的錯誤,至於事件處理(Event handler)、非同步程式碼、server side rendering及錯誤邊界Component本身的錯誤無法用錯誤邊界捕捉及處理。
下面把App
component中實作static getDerivedStateFromError()
及componentDidCatch()
成為錯誤邊界。當chile component Hello
render錯誤時會被呼叫並透過更新status.hasError
返回自訂的錯誤結果。
App.js
import React from 'react'
import './App.css';
const names = ["John", "Mary"]
const Hello = props => {
return <h1>Hello, {names[3].toLowerCase()}!</h1> // TypeError: Cannot read property 'toLowerCase' of undefined
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {hasError: false}
}
static getDerivedStateFromError(error) {
return { hasError: true }; // return a value to update state
}
componentDidCatch(error, info) {
console.log(`Cause:${error}\nStacktace:${info.componentStack}`)
}
render() {
if (this.state.hasError) {
return <h1>Error!!</h1>
}
return <Hello/>
}
}
export default App;
當chile component Hello
錯誤發生時顯示如下(在dev模式會被React的錯誤訊息頁面蓋過去,可以按Esc關閉)。
console顯示訊息。
參考github。
沒有留言:
張貼留言