React 中的错误边界（Error Boundaries），如何使用它们捕获组件错误

大白话React 中的错误边界（Error Boundaries），如何使用它们捕获组件错误

在 React 里，错误边界就像是一个“小卫士”，专门负责在组件出现错误时挺身而出，避免整个应用因为一个小错误就崩溃掉。接下来我会详细介绍它，并且在代码里加上注释，让你轻松理解。

什么是错误边界？

想象一下，你有一个大型的 React 应用，里面有好多好多组件，就像一个热闹的城市里有各种各样的建筑。要是其中一个建筑出了问题（组件报错），要是没有防护措施，整个城市可能都会受到影响（应用崩溃）。而错误边界就像是给每个区域设置了一个“保护罩”，当某个区域的建筑出问题时，保护罩能把问题隔离起来，不让它影响到其他区域。

在 React 中，错误边界是一个特殊的组件，它可以捕获并处理在它的子组件树中发生的 JavaScript 错误，然后展示一个备用的 UI，而不是让整个应用崩溃。

如何创建一个错误边界组件？

下面是一个简单的错误边界组件示例，代码里我会加上详细的注释：

import React, { Component } from 'react';// 定义一个错误边界组件，继承自 React.Component
class ErrorBoundary extends Component {// 构造函数，初始化状态constructor(props) {super(props);// 定义一个 state 变量 hasError，用于标记是否发生错误this.state = { hasError: false };}// 静态方法，当子组件抛出错误时会被调用static getDerivedStateFromError(error) {// 更新 state 中的 hasError 为 true，表示发生了错误return { hasError: true };}// 当错误发生时会调用这个方法，可以在这里进行错误日志记录等操作componentDidCatch(error, errorInfo) {// 这里可以添加代码将错误信息发送到服务器进行日志记录console.log('错误信息:', error);console.log('错误详情:', errorInfo);}// 渲染方法render() {// 如果 hasError 为 true，说明发生了错误，渲染备用的 UIif (this.state.hasError) {return <div>哎呀，这里好像出了点问题，请稍后再试！</div>;}// 如果没有错误，正常渲染子组件return this.props.children;}
}export default ErrorBoundary;

如何使用错误边界组件？

现在我们已经有了一个错误边界组件，接下来看看怎么使用它。下面是一个简单的示例：

import React from 'react';
import ErrorBoundary from './ErrorBoundary';// 定义一个可能会出错的组件
const ProblematicComponent = () => {// 模拟一个错误，这里会抛出一个未定义变量的错误throw new Error('哎呀，我出错啦！');return <div>这是一个可能会出错的组件</div>;
};const App = () => {return (<div><h1>我的 React 应用</h1>{/* 使用错误边界组件包裹可能会出错的组件 */}<ErrorBoundary><ProblematicComponent /></ErrorBoundary></div>);
};export default App;

代码解释

  1. 错误边界组件 ErrorBoundary：
    • constructor：初始化 hasError 状态为 false，表示初始时没有错误。
    • getDerivedStateFromError：当子组件抛出错误时，这个静态方法会被调用，将 hasError 状态更新为 true。
    • componentDidCatch：在错误发生后调用，你可以在这里添加代码将错误信息发送到服务器进行日志记录。
    • render：根据 hasError 状态决定渲染备用 UI 还是正常渲染子组件。
  2. 使用错误边界组件：
    • ProblematicComponent：这是一个可能会出错的组件，我们在里面模拟了一个错误。
    • App 组件：使用 ErrorBoundary 组件包裹 ProblematicComponent，当 ProblematicComponent 抛出错误时，ErrorBoundary 会捕获错误并展示备用 UI。

通过使用错误边界，你可以让你的 React 应用更加健壮，即使部分组件出现错误，也不会影响整个应用的正常运行。

除了使用错误边界，还有其他方式处理React组件中的错误吗？

除了错误边界，在 React 组件里还有几种处理错误的方式，下面我会详细介绍。

1. 内联的 try...catch 语句

try...catch 语句是 JavaScript 里处理错误的基础手段，能在组件内部运用它来捕获并处理错误。不过这种方式只能处理同步代码里的错误，对于异步代码，需要搭配 async/await 或者 .then() 与 .catch() 来处理。

下面是一个简单示例：

import React from 'react';const MyComponent = () => {try {// 模拟一个会抛出错误的操作const result = 1 / 0; // 这里会抛出除零错误return <div>结果: {result}</div>;} catch (error) {return <div>出错啦: {error.message}</div>;}
};export default MyComponent;

在这个示例里，try 块中的代码若抛出错误，catch 块就会捕获该错误，并且展示错误信息。

2. 使用 Promise 的 .catch() 方法处理异步错误

要是组件里有异步操作，像 fetch 请求或者 setTimeout 之类的，就可以使用 Promise 的 .catch() 方法来处理错误。

示例如下：

import React, { useEffect, useState } from 'react';const MyAsyncComponent = () => {const [data, setData] = useState(null);const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('网络请求失败');}const jsonData = await response.json();setData(jsonData);} catch (err) {setError(err.message);}};fetchData();}, []);if (error) {return <div>出错啦: {error}</div>;}if (data) {return <div>数据: {JSON.stringify(data)}</div>;}return <div>加载中...</div>;
};export default MyAsyncComponent;

在这个示例中，fetchData 函数是一个异步函数，使用 try...catch 来捕获 fetch 请求过程中可能出现的错误。若请求失败，就把错误信息存到 error 状态里，然后在组件中展示出来。

3. 全局错误处理

可以借助 window.onerror 或者 window.addEventListener('error') 来捕获全局的 JavaScript 错误。不过这种方式并非专门针对 React 组件的，它会捕获整个页面里的所有错误。

示例如下：

window.onerror = function (message, source, lineno, colno, error) {console.log('全局错误捕获:', message);// 可以在这里添加代码将错误信息发送到服务器进行日志记录return true; // 返回 true 可以阻止错误冒泡
};

在这个示例中，window.onerror 函数会在任何 JavaScript 错误发生时被调用，并且可以把错误信息记录下来。

4. 使用 React Error Event

React 17 及以上版本支持 React Error Event，这允许你在根组件中捕获所有未处理的错误。

示例如下：

import ReactDOM from 'react-dom/client';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode><App /></React.StrictMode>
);window.addEventListener('error', (event) => {console.log('React 错误捕获:', event.message);// 可以在这里添加代码将错误信息发送到服务器进行日志记录
});

在这个示例中，window.addEventListener('error') 会捕获所有未处理的 React 错误。

在React中使用错误边界有哪些注意事项？

在 React 中使用错误边界时，有以下这些注意事项：

1. 错误边界的适用范围

  • 只能捕获特定类型的错误：错误边界只能捕获其子组件树中发生的渲染期间、生命周期方法以及构造函数里的 JavaScript 错误，无法捕获以下几种错误：
    • 事件处理中的错误：在 React 里，事件处理函数不会在渲染期间执行，所以错误边界无法捕获这些错误。你可以使用 try...catch 语句来处理事件处理函数中的错误。例如：
import React from 'react';const MyComponent = () => {const handleClick = () => {try {// 可能会出错的代码throw new Error('事件处理出错');} catch (error) {console.log('捕获到事件处理中的错误:', error.message);}};return (<button onClick={handleClick}>点击我</button>);
};export default MyComponent;

- **异步代码中的错误**：像 `setTimeout`、`Promise` 或者 `async/await` 这类异步操作中的错误，错误边界也无法捕获。你需要在异步代码里使用 `try...catch` 或者 `.catch()` 方法来处理错误。
- **服务端渲染时的错误**：错误边界在服务端渲染（SSR）时不会捕获错误，需要使用其他方法来处理 SSR 中的错误。

2. 错误边界组件的实现

  • 类组件的使用：截至 React 18，错误边界只能通过类组件来实现，因为 getDerivedStateFromError 和 componentDidCatch 这两个方法是类组件特有的。不过，未来 React 可能会提供函数组件实现错误边界的方式。例如：
import React, { Component } from 'react';class ErrorBoundary extends Component {constructor(props) {super(props);this.state = { hasError: false };}static getDerivedStateFromError(error) {return { hasError: true };}componentDidCatch(error, errorInfo) {console.log('错误信息:', error);console.log('错误详情:', errorInfo);}render() {if (this.state.hasError) {return <div>哎呀，这里好像出了点问题，请稍后再试！</div>;}return this.props.children;}
}export default ErrorBoundary;
  • 状态管理：在错误边界组件里，不要尝试在 componentDidCatch 方法中更新子组件的状态，因为此时子组件可能已经因为错误而无法正常更新状态了。通常，错误边界组件只更新自身的状态，用来展示备用 UI。

3. 错误边界的嵌套与位置

  • 嵌套错误边界：可以嵌套使用多个错误边界组件，内层的错误边界会先捕获错误，若内层错误边界无法处理，外层的错误边界会继续尝试捕获。不过，要避免过度嵌套错误边界，以免让代码变得复杂。
  • 合理放置错误边界：要根据应用的结构和需求，合理放置错误边界组件。一般来说，把错误边界放在可能会出错的组件外层，或者放在一些关键组件的外层，以防止错误影响到整个应用。

4. 错误日志与监控

  • 记录错误信息：在 componentDidCatch 方法中，要记录详细的错误信息，比如错误对象和错误信息，方便后续调试和定位问题。可以将错误信息发送到服务器进行日志记录，例如使用 fetch 请求将错误信息发送到后端。
  • 错误监控：结合第三方错误监控工具，像 Sentry、Bugsnag 等，来实时监控应用中的错误，及时发现和解决问题。

5. 开发与生产环境的差异

  • 开发环境：在开发环境中，错误边界可能会隐藏一些有用的错误信息，导致调试困难。可以在开发环境中暂时禁用错误边界，或者使用 React 的严格模式来帮助发现潜在的问题。
  • 生产环境：在生产环境中，错误边界是保证应用稳定性的重要手段，要确保错误边界组件能够正常工作，并且展示友好的错误信息给用户。

除了错误边界，还有哪些方式可以处理 React 组件中的错误？

除了错误边界，在 React 组件中处理错误还有以下几种常见方式：

1. 内联 try...catch 语句

在组件的函数体中使用 try...catch 语句来捕获同步代码块中的错误。它适合处理组件内部特定逻辑中可能出现的错误。

import React from 'react';const MyComponent = () => {try {// 模拟可能出错的操作，这里故意除零const result = 1 / 0; return <div>计算结果: {result}</div>;} catch (error) {return <div>出现错误: {error.message}</div>;}
};export default MyComponent;

这种方式能精确控制特定代码块的错误处理，但只适用于同步代码，对于异步操作需要额外处理。

2. Promise 的 .catch() 方法

当组件中使用异步操作（如 fetch 请求、Promise 等）时，可使用 .catch() 方法来捕获异步操作中的错误。

import React, { useEffect, useState } from 'react';const MyAsyncComponent = () => {const [data, setData] = useState(null);const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {try {const response = await fetch('https://api.example.com/data');if (!response.ok) {throw new Error('请求失败');}const jsonData = await response.json();setData(jsonData);} catch (err) {setError(err.message);}};fetchData();}, []);if (error) {return <div>错误: {error}</div>;}if (data) {return <div>数据: {JSON.stringify(data)}</div>;}return <div>加载中...</div>;
};export default MyAsyncComponent;

这里使用 try...catch 包裹异步操作，在 catch 块中处理请求可能出现的错误，将错误信息存储在状态里并显示给用户。

3. 全局错误处理

可以通过 window.onerror 和 window.addEventListener('error') 来捕获整个页面中的 JavaScript 错误，不过这并非专门针对 React 组件，但能捕获 React 组件之外的错误。

// 在入口文件中添加
window.onerror = function (message, source, lineno, colno, error) {console.log('全局错误捕获:', message);// 可添加代码将错误信息发送到服务器return true; 
};

或者使用 addEventListener：

window.addEventListener('error', (event) => {console.log('全局错误捕获:', event.message);// 可添加代码将错误信息发送到服务器
});

这种方式能捕获各种未被捕获的错误，但缺乏对错误来源的精确控制。

4. React Error Event（React 17 及以上）

在 React 17 及更高版本中，可以通过监听 window 的 error 事件来捕获未处理的 React 错误。

import ReactDOM from 'react-dom/client';
import App from './App';const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<React.StrictMode><App /></React.StrictMode>
);window.addEventListener('error', (event) => {console.log('React 错误捕获:', event.message);// 可添加代码将错误信息发送到服务器
});

此方法可以捕获未被其他方式处理的 React 错误，便于统一管理和监控。

5. 使用 useEffect 清理副作用时的错误处理

在 useEffect 的清理函数中可能会出现错误，可使用 try...catch 进行处理。

import React, { useEffect } from 'react';const MyEffectComponent = () => {useEffect(() => {const cleanup = () => {try {// 模拟清理时可能出错的操作throw new Error('清理出错');} catch (error) {console.log('清理副作用时出错:', error.message);}};return cleanup;}, []);return <div>组件内容</div>;
};export default MyEffectComponent;

这样能保证在组件卸载时，清理副作用的过程中出现的错误可以被捕获和处理。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/75687.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据库DBA认证，选哪个认证合适？

数据库DBA认证，选哪个认证合适？

从 Oracle、MySQL 到 云数据库&#xff0c;结合市场认可度、考试难度及职业回报&#xff0c;为你精选高性价比认证。 一、企业级数据库认证&#xff08;传统场景&#xff09; 1. Oracle认证 认证等级考试代码核心内容费用适合人群OCA1Z0-082SQL基础、数据库安装与配置$245零基…
阅读更多...
力扣刷题-热题100题-第24题（c++、python）

力扣刷题-热题100题-第24题（c++、python）

234. 回文链表 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/palindrome-linked-list/description/?envTypestudy-plan-v2&envIdtop-100-liked 常规法 数组是连续的存储空间&#xff0c;可以根据索引到达任意位置&#xff0c;链表只能一个个的顺…
阅读更多...
调用通义千问实现语音合成并将合成的音频通过扬声器播放

调用通义千问实现语音合成并将合成的音频通过扬声器播放

1. 作者介绍 郭建东&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2024级研究生 研究方向&#xff1a;机器视觉与人工智能 电子邮件&#xff1a;1229963266qq.com 高金年&#xff0c;男&#xff0c;西安工程大学电子信息学院&#xff0c;2024级研究生&…
阅读更多...
Ubuntu软件包离线下载安装

Ubuntu软件包离线下载安装

1、下载软件包tcpd&#xff0c;并在/var/cache/apt/archives目录中查看。 rooteducoder:~# apt-get install -d tcpd Reading package lists... Done Building dependency tree Reading state information... Done The following NEW packages will be installed:tcpd …
阅读更多...
您的数据是如何出现在暗网上的？

您的数据是如何出现在暗网上的？

暗网是互联网上的一个隐秘角落&#xff0c;人们可以在那里保持匿名。暗网经常与深网混淆&#xff0c;但它们并不完全相同。 深网是指网络上所有未被搜索引擎索引的内容。这包括电子邮件帐户、私人数据库和付费服务等。这并不违法&#xff0c;只是无法通过简单的 Google 搜索找…
阅读更多...
原型模式及其应用

原型模式及其应用

引言 原型模式&#xff08;Prototype Pattern&#xff09;是一种创建型设计模式&#xff0c;它允许通过复制现有对象来创建新对象&#xff0c;而无需通过构造函数来创建。这种模式通过克隆现有对象来创建新对象&#xff0c;从而避免了复杂的初始化过程。本文将探讨原型模式的好…
阅读更多...
thinkphp漏洞再现

thinkphp漏洞再现

Thinkphp5x远程命令执行及getshell 1、开环境 2、使用工具攻击 开启工具 输入地址&#xff0c;点击漏洞检测 存在漏洞之后&#xff0c;选择漏洞&#xff0c;执行命令 3、也可以执行远程命令 执行命令 ?sindex/think\app/invokefunction&functioncall_user_func_array&…
阅读更多...
Day16 -实例：Web利用邮箱被动绕过CDN拿真实ip

Day16 -实例：Web利用邮箱被动绕过CDN拿真实ip

本想测试一下全局ping&#xff0c;刚好注册的时候收到了邮件&#xff0c;刚好去做一下复现。 原理&#xff1a;主动让对方站点给我们发邮件&#xff08;注册、修改密码、订阅推送等&#xff09;我们查看邮件原文&#xff0c;原文里存在真实的邮件站点ip 特点&#xff1a;邮件…
阅读更多...
vue3 数据监听（watch、watchEffect）

vue3 数据监听（watch、watchEffect）

1、watch 1.1基本使用 作用&#xff1a;数据监听 语法&#xff1a; watch(监听的数据, (改变后的数据, 改变前的数据) > { console.log(newVal, oldVal); }) 注意点&#xff1a;watch写法上支持一个或者多个监听源&#xff0c;这些监听源必须只能是getter/effect函数…
阅读更多...
网盘解析工具更新，解决了一些bug

网盘解析工具更新，解决了一些bug

解析工具v1.2.1版本更新&#xff0c;本次是小版本更新&#xff0c;修复了一些bug。 之前小伙伴反应的网盘进入文件后不能返回上一级&#xff0c;现在这个bug修复了&#xff0c;已经可以点击了。 点击资源后会回到资源那一级目录&#xff0c;操作上是方便了不少。 增加了检查自…
阅读更多...
推荐1款简洁、小巧的实用收音机软件,支持手机和电脑

推荐1款简洁、小巧的实用收音机软件,支持手机和电脑

聊一聊 没想到现在还有人喜欢听广播。 我一直以为听广播必须要用那种小广播机才可以。 原来手机或电脑上也是可以的。 今天给大家分享一款可以在电脑和手机上听广播的软件。 软件介绍 龙卷风收音机 电台广播收音机分电脑和手机两个版本。 电脑端无需安装&#xff0c;下载…
阅读更多...
六十天前端强化训练之第三十一天之Webpack 基础配置 大师级讲解（接下来几天给大家讲讲工具链与工程化）

六十天前端强化训练之第三十一天之Webpack 基础配置 大师级讲解（接下来几天给大家讲讲工具链与工程化）

欢迎来到编程星辰海的博客讲解 看完可以给一个免费的三连吗&#xff0c;谢谢大佬&#xff01; 目录 一、Webpack 核心概念解析 二、实战&#xff1a;多资源打包配置&#xff08;含完整代码&#xff09; 三、配置深度解析&#xff08;重点部分说明&#xff09; 四、效果演示…
阅读更多...
机器学习——Bagging、随机森林

机器学习——Bagging、随机森林

相比于Boosting的集成学习框架&#xff0c;Bagging(Bootstrap Sampling&#xff0c;自助聚集法&#xff0c;又称为自助采样)作为一种自助聚集且并行化的集成学习方法&#xff0c;其通过组合多个基学习器的预测结果来提高模型的稳定性和泛化能力。其中随机森林是Bagging学习框架…
阅读更多...
【蓝桥杯】每日练习 Day13

【蓝桥杯】每日练习 Day13

前言 今天做了不少题&#xff0c;但是感觉都太水了&#xff0c;深思熟虑之下主播决定拿出两道相对不那么水的题来说一下&#xff08;其实还是很水&#xff09;。 两道问题&#xff0c;一道是日期问题&#xff08;模拟&#xff09;&#xff0c;一道是区间合并问题。 日期差值 …
阅读更多...
HTML输出流

HTML输出流

HTML 输出流 JavaScript 中**「直接写入 HTML 输出流」**的核心是通过 document.write() 方法向浏览器渲染过程中的数据流动态插入内容。以下是详细解释&#xff1a; 一、HTML 输出流的概念 1. 动态渲染过程 HTML 文档的加载是自上而下逐行解析的。当浏览器遇到 <script&…
阅读更多...
理解文字识别：一文读懂OCR商业化产品的算法逻辑

理解文字识别：一文读懂OCR商业化产品的算法逻辑

文字识别是一项“历久弥新”的技术。早在上世纪初&#xff0c;工程师们就开始尝试使用当时有限的硬件设备扫描并识别微缩胶片、纸张上的字符。随着时代和技术的发展&#xff0c;人们在日常生活中使用的电子设备不断更新换代&#xff0c;文字识别的需求成为一项必备的技术基础&a…
阅读更多...
开源模型应用落地-语音转文本-whisper模型-AIGC应用探索（五）

开源模型应用落地-语音转文本-whisper模型-AIGC应用探索（五）

一、前言 在上一节中&#xff0c;学习了如何使用vLLM来部署Whisper-large-v3-turbo模型。不过&#xff0c;在实际使用时&#xff0c;模型一次只能处理30秒的音频。今天&#xff0c;将结合实际业务&#xff0c;介绍如何处理一段完整的音频&#xff0c;并生成相应的字幕文件。 相…
阅读更多...
“十五五”时期航空弹药发展环境分析

“十五五”时期航空弹药发展环境分析

1&#xff0e;“十五五”时期航空弹药发展环境分析 &#xff08;标题&#xff1a;小二号宋体居中&#xff09; 一、建言背景介绍 &#xff08;一级标题&#xff1a;黑体三号&#xff0c;首行空两格&#xff09; 航空弹药作为现代战争的核心装备&#xff0c;其发展水平直接关乎…
阅读更多...
IDEA批量替换项目下所有文件中的特定内容

IDEA批量替换项目下所有文件中的特定内容

文章目录 1. 问题引入2. 批量替换项目下所有文件中的特定内容2.1 右键项目的根目录&#xff0c;点击在文件中替换2.2 输入要替换的内容 3. 解决替换一整行文本后出现空行的问题4. 增加筛选条件提高匹配的精确度 更多 IDEA 的使用技巧可以查看 IDEA 专栏&#xff1a; IDEA 1. 问…
阅读更多...
蓝桥杯 临时抱佛脚 之 二分答案法与相关题目

蓝桥杯 临时抱佛脚 之 二分答案法与相关题目

二分答案法&#xff08;利用二分法查找区间的左右端点&#xff09; &#xff08;1&#xff09;估计 最终答案可能得范围 是什么 &#xff08;2&#xff09;分析 问题的答案 和 给定条件 之间的单调性&#xff0c;大部分时候只需要用到 自然智慧 &#xff08;3&#xff09;建…
阅读更多...
最新文章

Copyright @ 2022~2023