Error Boundaries 錯誤邊界

錯誤邊界是用於捕獲其子組件樹 JavaScript 異常，記錄錯誤並展現一個回退的 UI 的 React 組件，而不是整個組件樹的異常。錯誤邊界在渲染期間、生命週期方法內、以及整個組件樹構造函數內捕獲錯誤。

這樣若是某個組件發生崩潰，會被其直屬的異常邊界捕獲，從而保證剩餘的部分依然處於可用狀態。一樣的咱們也能夠在異常邊界中添加錯誤反饋等服務接口以及時反饋生產環境下的異常而且修復他們

優化異常堆棧

新版本的React優化了異常輸出，可以更清晰的跟蹤到出錯的位置。異常日誌輸出的內容將會比以前的React豐富不少，除了輸出JavaScript的異常信息，還會清晰的定位到錯誤出現的組件：

若是你的項目使用最新版本的 create-react-app 建立的，那麼這一項功能已經存在了。若是沒使用 Create React App，那麼能夠經過一個 Babel 的插件添加這個功能：

$ npm install --save-dev babel-plugin-transform-react-jsx-source

而後在對應的配置（.babelrc、webpack的plugins等）中添加：

{
  "plugins": ["transform-react-jsx-source"] }

切記這項功能僅僅用於開發或測試環境，切勿用於生產環境。某些瀏覽器可能不支持 Function.name  的屬性，可能沒法正確顯示組件名稱（例如全部版本的IE）。能夠經過使用一些 polyfill 來解決這個問題，好比這個 function-name工具 。

 

Note

Error boundaries do not catch errors for:

• Event handlers (learn more)
• Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
• Server side rendering
• Errors thrown in the error boundary itself (rather than its children)

Event handlers 事件處理函數觸發的錯誤 Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) 異步代碼 Server side rendering 服務端渲染 Errors thrown in the error boundary itself (rather than its children) 本身產生的錯誤

• 可捕獲到的子組件異常
  • constructor 構造函數異常
  • 生命週期異常
  • render 函數異常
• 不能捕獲到的異常
  • 事件處理異常
  • 異步任務異常
  • 服務端異常
  • ErrorBoundary 組件自身異常

 https://www.npmjs.com/package/react-error-boundaries