在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) { ... })
参考文献
- https://zh-hans.reactjs.org/docs/error-boundaries.html
在react项目如何捕获错误的更多相关文章
- 启动react项目报如下错误
输入:npm run build:dll
- 从零开始搭建一个react项目
Nav logo 120 发现 关注 消息 4 搜索 从零开始搭建一个react项目 96 瘦人假噜噜 2017.04.23 23:29* 字数 6330 阅读 32892评论 31喜欢 36 项目地 ...
- 七天接手react项目-起步
七天接手react项目-起步 背景 假如七天后必须接手一个 react 项目(spug - 一个开源运维平台),而笔者只会 vue,之前没有接触过 react,此刻能做的就是立刻展开一个"7 ...
- 七天接手react项目 系列 —— react 路由
其他章节请看: 七天接手react项目 系列 react 路由 本篇首先讲解路由原理,接着以一个基础路由示例为起点讲述路由最基础的知识,然后讲解嵌套路由.路由传参,最后讲解路由组件和一般组件的区别,以 ...
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 如何在React项目中直接使用WebAssembly
前言 自从入坑WebAssembly以来,躺了很多坑,也浏览了很多资料,都没有看到很多能够直接在前端项目中使用WebAssembly的例子.即使有,我自己按照介绍的步骤一步一步来, 也会报各种错误,官 ...
- 创建react项目的几种方法
前言: 构建React项目的几种方式: 构建:create-react-app 快速脚手架 构建:generator-react-webpack 构建:webpack一步一步构建 1)构建:creat ...
- Webpack+React项目入门——入门及配置Webpack
一.入门Webpack 参考文章:<入门Webpack,看这篇就够了> 耐心看完这篇非常有帮助 二.React+Webpack环境配置 参考文章:<webpack+react项目初体 ...
- react项目开发中遇到的问题
前言 作为一个前端爱好者来说,都想在react上一试生手,那么在搭建react项目开发时,肯定会有这样或者那样的问题,尤其是对初学者来说,下面就个人在开发过程中遇到的问题总结一下,好在有google帮 ...
- 【Webpack2.X笔记】 配合react项目进行配置
前言: 本文是自己在工作中使用webpack进行react开发项目构建的一些经验总结,做以记录防范后续踩坑. 如果您还没有webpack相关基础,请先移步 入门Webpack,看这篇就够了 进行基础学 ...
随机推荐
- winform的TabContorl的TabPage动态添加滚动条
关键属性 AutoScrollMinSize private int minWidth = 800; private int minHeight = 600; List<Form> li ...
- Encodings: URL
原题链接:http://www.wechall.net/challenge/training/encodings/url/index.php 题目信息:你的任务就是解码下面的东西.... 这个完全没难 ...
- python进阶(28)import导入机制原理
前言 在Python中,一个.py文件代表一个Module.在Module中可以是任何的符合Python文件格式的Python脚本.了解Module导入机制大有用处. 1. Module组成 一个.p ...
- dp状态设计
迎接仪式 题目描述 LHX 教主要来 X 市指导 OI 学习工作了.为了迎接教主,在一条道路旁,一群"Orz 教主 er"穿着文化衫站在道路两旁迎接教主,每件文化衫上都印着大字.一 ...
- mongorestore target dump invalid CreateFile dump The system cannot find
问题 使用 mongorestore 指定 dump 文件夹,恢复数据报错. mongorestore target 'dump' invalid: CreateFile dump: The syst ...
- day27 CSS浮动、溢出 & js基本语法 & DOM文档流操作
接day26CSS=>CSS定位 overflow属性 值 描述 示例 visible 默认值,内容不会被修剪,会呈现在元素框之外 hidden 内容会被修剪,并且其余内容是不可见的 overf ...
- MySQL进阶实战1,数据类型与三范式
一.选择优化的数据类型 MySQL支持的数据类型非常多,选择正确的数据类型对于获得高性能至关重要. 1.更小的 一般情况下,应该尽量使用较小的数据类型,更小的数据类型通常更快,因为占用更少的磁盘.内存 ...
- 【每日一题】【小根堆&边出队边入队后续节点&注意判空】23. 合并K个升序链表-211128/220213
给你一个链表数组,每个链表都已经按升序排列. 请你将所有链表合并到一个升序链表中,返回合并后的链表. 答案1(参数是数组): /** * Definition for singly-linked li ...
- 持续发烧,聊聊Dart语言的并发处理,能挑战Go不?
前言 貌似关于Dart的文章没流量啊,就算在小编关怀上了首页,看得人还是很少的. 算了,今天持续发烧,再来写写如何使用 Dart 语言的并发操作.说起并发操作,玩 Go 的同学该笑了,这就是我们的看家 ...
- MySQL事务(四大特性)-存储过程
目录 一:事务 1.四大特性(ACID) 2.事物存在的必要性(真实比喻) 3.如何使用事务 4.开启事务-回滚-确认 二:事务案例实战 1.模拟消费 2.创建 3.插入数据 4.开启事务 5.修改操 ...