在React项目是如何捕获错误的?

news2024/11/15 23:49:09

文章目录

  • react中的错误介绍
  • 解决方案
  • 后言

react中的错误介绍

错误在我们日常编写代码是非常常见的
举个例子,在react项目中去编写组件内JavaScript代码错误会导致 React 的内部状态被破坏,导致整个应用崩溃,这是不应该出现的现象
作为一个框架,react也有自身对于错误的处理的解决方案

解决方案

为了解决出现的错误导致整个应用崩溃的问题,react16引用了错误边界新的概念

错误边界是一种 React 组件,这种组件可以捕获发生在其子组件树任何位置的 JavaScript 错误,并打印这些错误,同时展示降级 UI,而并不会渲染那些发生崩溃的子组件树

错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误

形成错误边界组件的两个条件:

  • 使用了 static getDerivedStateFromError()
  • 使用了 componentDidCatch()
    抛出错误后,请使用 static getDerivedStateFromError() 渲染备用 UI ,使用 componentDidCatch() 打印错误信息,如下:
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

然后就可以把自身组件的作为错误边界的子组件,如下:

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

下面这些情况无法捕获到异常:

  • 事件处理
  • 异步代码
  • 服务端渲染
  • 自身抛出来的错误
    在react 16版本之后,会把渲染期间发生的所有错误打印到控制台

除了错误信息和 JavaScript 栈外,React 16 还提供了组件栈追踪。现在你可以准确地查看发生在组件树内的错误信息:
在这里插入图片描述
可以看到在错误信息下方文字中存在一个组件栈,便于我们追踪错误

对于错误边界无法捕获的异常,如事件处理过程中发生问题并不会捕获到,是因为其不会在渲染期间触发,并不会导致渲染时候问题

这种情况可以使用js的try…catch…语法,如下:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { error: null };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    try {
      // 执行操作,如有错误则会抛出
    } catch (error) {
      this.setState({ error });
    }
  }

  render() {
    if (this.state.error) {
      return <h1>Caught an error.</h1>
    }
    return <button onClick={this.handleClick}>Click Me</button>
  }
}

除此之外还可以通过监听onerror事件

window.addEventListener('error', function(event) { ... })

还可以使用全局错误处理,React 16 之前,你可以通过注册 window 对象上的 error 事件来处理全局错误。React 16 后,推荐使用错误边界来捕获错误,因为全局错误处理可能会导致组件树状态不一致,而无法预测和修复错误。

后言

创作不易,要是本文章对广大读者有那么一点点帮助 不妨三连支持一下,您的鼓励就是博主创作的动力

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java基础 数据结构一【栈、队列】

什么是数据结构 数据结构是计算机科学中的一个重要概念&#xff0c;用于组织和存储数据以便有效地进行访问、操作和管理。它涉及了如何在计算机内存中组织数据&#xff0c;以便于在不同操作中进行查找、插入、删除等操作 数据结构可以看作是一种数据的组织方式&#xff0c;不…

[maven]关于pom文件中的<relativePath>标签

关于pom文件中的<relativePath>标签 为什么子工程要使用relativePath准确的找到父工程pom.xml.因为本质继承就是pom的继承。父工程pom文件被子工程复用了标签。&#xff08;可以说只要我在父工程定义了标签&#xff0c;子工程就可以没有&#xff0c;因为他继承过来了&…

Kotlin数据结构

数据结构基础 什么是数据结构 在计算机科学中&#xff0c;数据结构&#xff08;Data Structure&#xff09;是计算机中存储、组织数据的方式。数据结构是各种编程语言的基础。 一些使用场景 不同的数据结构适用于不同的应用场景。比如HashMap与ConcurrentHashMap&#xff0…

【太多网工对NAT还存在这4种误解!你是其中一个吗?】

NAT是解决公网地址不够用大家最熟悉的网络技术之一&#xff0c;而NAT最依赖的是NAT translation表项&#xff0c;至于NAT的概念和背景这里不再解释&#xff0c;网络上有很多关于此的类似介绍&#xff0c;自己搜索即可。下面主要是针对大家对NAT的一些误解进行分析。 1 误解一…

leetcode3. 无重复字符的最长子串(滑动窗口 - java)

滑动窗口 无重复字符的最长子串滑动窗口 上期经典 无重复字符的最长子串 难度 - 中等 3. 无重复字符的最长子串 给定一个字符串 s &#xff0c;请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: s “abcabcbb” 输出: 3 解释: 因为无重复字符的最长子串是 “abc…

0201hdfs集群部署-hadoop-大数据学习

文章目录 1 前言2 集群规划3 hadoop安装包上传与安装3.1 上传解压 4 hadoop配置5 从节点同步和环境变量配置6 创建用户7 集群启动8 问题集8.1 Invalid URI for NameNode address (check fs.defaultFS): file:/// has no authority. 结语 1 前言 下面我们配置下单namenode节点h…

基于Django的博客管理系统

1、克隆仓库https://gitee.com/lylinux/DjangoBlog.git 若失效&#xff1a;https://gitee.com/usutdzxy/DjangoBlog.git 2、环境安装 pip install -Ur requirements.txt3、修改djangoblog/setting.py 修改数据库配置&#xff0c;其他的步骤就按照官方文档。 DATABASES {def…

无涯教程-机器学习 - Jupyter Notebook函数

Jupyter笔记本基本上为开发基于Python的数据科学应用程序提供了一个交互式计算环境。它们以前称为ipython笔记本。以下是Jupyter笔记本的一些功能,使其成为Python ML生态系统的最佳组件之一- Jupyter笔记本可以逐步排列代码,图像,文本,输出等内容,从而逐步说明分析过程。 它有…

【js案例】滚动效果实现及简单动画函数抽离

目录 &#x1f31f;效果 &#x1f31f;实现思路 &#x1f31f;实现方法 HTML&CSS代码 初始化 滚动效果 完整JS代码 &#x1f31f;抽离动画函数 函数的简单使用 小案例一 小案例二 &#x1f31f;效果 &#x1f31f;实现思路 要实现自动滚动&#xff0c;无非就…

高等数学上册 第十章 重积分 第十一章 曲线积分与曲面积分 知识点总结

重积分 二重积分计算法&#xff1a; 直角坐标下&#xff1a;化为二次积分 { 如果图形是 X Y 型&#xff0c;则都可以&#xff0c;但要考虑哪个计算不定积分方便 如果图形既不是 X 也不是 Y 型&#xff0c;则要拆分 极坐标下&#xff1a; ∬ f ( x , y ) d x d y ∬ f ( ρ cos…

基于适应度相关算法优化的BP神经网络(预测应用) - 附代码

基于适应度相关算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于适应度相关算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.适应度相关优化BP神经网络2.1 BP神经网络参数设置2.2 适应度相关算法应用 4.测试结果&…

Python学习之一 基于交互式解释器的简单Python编程

在很奇葩的Deepin下Miniconda安装之旅 中完成了Deepin系统下的Miniconda安装&#xff0c;在使用Miniconda 中完成了Miniconda的使用。今天&#xff0c;将开始学习Python编程。 (一) 为Python编程学习创建虚拟环境 首先创建虚拟环境&#xff0c;选择Python3.7。 conda create…

用于C++律动运动的中央模式生成器

用于C律动运动的中央模式生成器 一、说明 本篇讲述关于生物模型的神经网络&#xff0c; 中央模式生成器的简单神经网络的一个例子是半中心振荡器&#xff1b;该系统分成两个组成&#xff0c;信号层和物理层。新概念仓本模型&#xff0c;以及龙格库塔法的方程解法&#xff0c;总…

6.跑一下Triton官方教程

1.模型部署 首先拉取官方示例代码 git clone --recursive https://github.com/triton-inference-server/tutorials.git cd tutorials/Conceptual_Guide/Part_1-model_deployment 1.下载文本检测模型 wget https://www.dropbox.com/s/r2ingd0l3zt8hxs/frozen_east_text_dete…

裸露土堆识别算法

裸露土堆识别算法首先利用图像处理技术&#xff0c;提取出图像中的土堆区域。裸露土堆识别算法首通过计算土堆中被绿色防尘网覆盖的比例&#xff0c;判断土堆是否裸露。若超过40%的土堆没有被绿色防尘网覆盖&#xff0c;则视为裸露土堆。当我们谈起计算机视觉时&#xff0c;首先…

React与Vue:两大前端巨头的深度对决

引言 在当今的前端开发领域&#xff0c;React和Vue无疑是两大巨头。它们各自有着独特的历史和哲学&#xff0c;但都为开发者提供了强大的工具来构建高效、响应式的web应用。这篇文章将深入探讨这两个框架的差异&#xff0c;帮助开发者更好地理解它们的优势和劣势。 React与Vu…

Python“牵手”唯品会商品列表数据,关键词搜索唯品会API接口数据,唯品会API接口申请指南

唯品会平台API接口是为开发电商类应用程序而设计的一套完整的、跨浏览器、跨平台的接口规范&#xff0c;唯品会API接口是指通过编程的方式&#xff0c;让开发者能够通过HTTP协议直接访问唯品会平台的数据&#xff0c;包括商品信息、店铺信息、物流信息等&#xff0c;从而实现唯…

2023最新任务悬赏平台源码uniapp+Thinkphp新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机

新款悬赏任务地推拉新充场游戏试玩源码众人帮威客兼职任务帮任务发布分销机制 后端是&#xff1a;thinkphpFastAdmin 前端是&#xff1a;uniapp 1.优化首页推荐店铺模块如有则会显示此模块没有则隐藏。 2修复首页公告&#xff0c;更改首页公告逻辑。&#xff08;后台添加有公…

大规模 IoT 边缘容器集群管理的几种架构-6-个人体验及推荐

前文回顾 大规模 IoT 边缘容器集群管理的几种架构-0-边缘容器及架构简介大规模 IoT 边缘容器集群管理的几种架构-1-RancherK3s大规模 IoT 边缘容器集群管理的几种架构-2-HashiCorp 解决方案 Nomad大规模 IoT 边缘容器集群管理的几种架构-3-Portainer大规模 IoT 边缘容器集群管…

(java) 进程调度

目录 进程 首先我们要了解一下什么是进程&#xff1f; 那如何管理进程&#xff1f; PCB中比较重要的属性 进程调度 为什么要进行进程调度&#xff1f; 状态 优先级 上下文 拓展介绍一下寄存器 记账信息 进程 首先我们要了解一下什么是进程&#xff1f; 简单来说…