在前端开发中，我们经常会遇到意外错误导致应用崩溃的情况。这时候，如果没有合适的错误处理机制，用户体验将会非常差。为了避免这种情况的发生，我们可以使用 npm 包 react-error-boundary。
什么是 react-error-boundary？
react-error-boundary 是一个用于 React 的轻量级错误边界组件。当 React 组件中的错误没有被处理时，ErrorBoundary 组件会捕捉错误并渲染一个备用视图来代替崩溃的组件树。
如何使用 react-error-boundary？
1. 安装
使用 npm 安装 react-error-boundary。
npm install react-error-boundary
2. 引入
在需要使用 ErrorBoundary 的组件中引入 ErrorBoundary。
import ErrorBoundary from 'react-error-boundary';
3. 渲染
在需要使用 ErrorBoundary 的组件中，将其作为父组件包裹住可能会出错的子组件。
<ErrorBoundary> <MyComponent /> </ErrorBoundary>
4. 自定义备用视图
当发生错误时，ErrorBoundary 会渲染一个备用视图来代替崩溃的组件树。你可以自定义备用视图。
-- -------------------- ---- -------
------ ------------- ---- -----------------------
-------- --------------------- ------ ------------------ -- -
------ -
-----
------------- ---- -----------
----------------------
------- -------------------------------- --------------
------
--
-
-------------- ----------------------------------------
------------ --
----------------5. 处理错误
当错误发生时，可以通过 onError 回调函数来处理错误。
<ErrorBoundary onError={(error, info) => console.log(error, info)}>
<MyComponent />
</ErrorBoundary>react-error-boundary 的学习意义
使用 react-error-boundary 能够帮助我们处理意外错误，让应用更加健壮稳定，从而提升用户体验。并且 ErrorBoundary 还提供了自定义备用视图的功能，这样能够让应用更加具有可读性和友好性。
示例代码
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------- ---- -----------------------
-------- ------------- -
-- ----------
----- --- ---------------- ---- --------
------ ----------- -------------
-
-------- --------------------- ------ ------------------ -- -
------ -
-----
------------- ---- -----------
----------------------
------- -------------------------------- --------------
------
--
-
-------- ----- -
------ -
-------------- --------------------------------------- ---------------- ----- -- ------------------ -------
------------ --
----------------
--
-
-------------------- --- ---------------------------------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/195801