怎么捕获错误而且处理,是一门语言必备的知识。在JavaScript中也是如此。javascript
那怎么捕获错误呢?初看好像很简单,try-catch就能够了嘛!可是有的时候咱们发现状况却繁多复杂。java
Q1: 同步能够try-catch,但一个异步回调,好比setTimeOut里的函数还能够try-catch吗?node
Q2: Promise的错误捕获怎么作?webpack
Q3: async/await怎么捕获错误?web
Q4: 我可以在全局环境下捕获错误而且处理吗?npm
Q5: React16有什么新的错误捕获方式吗?promise
Q6: 捕获以后怎么上报和处理?异步
问题有点多,咱们一个一个来。async
在同步代码里,咱们是最简单的,只要try-catch就完了 ide
function test1 () { try { throw Error ('callback err'); } catch (error) { console.log ('test1:catch err successfully'); } } test1();
输出结果以下,显然是正常的
上面的问题来了,咱们还能经过直接的try-catch在异步回调外部捕获错误吗?咱们试一试
// 尝试在异步回调外部捕获错误的结果 function test2 () { try { setTimeout (function () { throw Error ('callback err'); }); } catch (error) { console.log ('test2:catch err successfully'); } } test2();
输出
注意这里的Uncaught Error的文本,它告诉咱们错误没有被成功捕捉。
为何呢? 由于try-catch的是属于同步代码,它执行的时候,setTimeOut内部的的匿名函数尚未执行呢。而内部的那个匿名函数执行的时候,try-catch早就执行完了。( error的心里想法:哈哈,只要我跑的够慢,try-catch仍是追不上我!)
可是咱们简单想想,诶咱们把try-catch写到函数里面不就完事了嘛!
function test2_1 () { setTimeout (function () { try { throw Error ('callback err'); } catch (error) { console.log ('test2_1:catch err successfully'); } }); } test2_1();
输出结果以下,告诉咱们这方法可行
总结下Promise时代之前,异步回调中捕获和处理错误的方法
在异步回调内部编写try-catch去捕获和处理,不要在外部哦
不少异步操做会开放error事件,咱们根据事件去操做就能够了
可经过Promise.catch方法捕获
function test3 () { new Promise ((resolve, reject) => { throw Error ('promise error'); }).catch (err => { console.log ('promise error'); }); }
输出结果
>> reject方法调用和throw Error均可以经过Promise.catch方法捕获
function test4 () { new Promise ((resolve, reject) => { reject ('promise reject error'); }).catch (err => { console.log (err); }); }
输出结果
>> then方法中的失败回调和Promise.catch的关系
若是前面的then方法没写失败回调,失败时后面的catch是会被调用的
若是前面的then方法写了失败回调,又没抛出,那么后面的catch就不会被调用了
// then方法没写失败回调 function test5 () { new Promise ((resolve, reject) => { throw Error ('promise error'); }) .then (success => {}) .catch (err => { console.log ('the error has not been swallowed up'); }); } // then方法写了失败回调 function test5 () { new Promise ((resolve, reject) => { throw Error ('promise error'); }) .then (success => {},err => {}) .catch (err => { console.log ('the error has not been swallowed up'); }); }
输出分别为
1.the error has not been swallowed up
2.无输出
对于async/await这种类型的异步,咱们能够经过try-catch去解决
async function test6 () { try { await getErrorP (); } catch (error) { console.log ('async/await error with throw error'); } } function getErrorP () { return new Promise ((resolve, reject) => { throw Error ('promise error'); }); } test6();
输出结果以下
>> 若是被await修饰的Promise由于reject调用而变化,它也是能被try-catch的
(我已经证实了这一点,可是这里位置不够,我写不下了)
window.onerror能够监听全局错误,可是很显然错误仍是会抛出
window.onerror = function (err) { console.log ('global error'); }; throw Error ('global error');
输出以下
>> componentDidCatch和getDerivedStateFromError钩子函数
class Bar extends React.Component { // 监听组件错误 componentDidCatch(error, info) { this.setState({ error, info }); } // 更新 state 使下一次渲染可以显示降级后的 UI static getDerivedStateFromError(error) { return { hasError: true }; } render() { } }
有错误,那确定要上报啊!不上报就发现不了Bug这个样子。Sentry这位老哥就是我的才,日志记录又好看,每次见面就像回家同样
Sentry provides open-source and hosted error monitoring that helps all software
teams discover, triage, and prioritize errors in real-time.
One million developers at over fifty thousand companies already ship
better software faster with Sentry. Won’t you join them?
—— Sentry官网
Sentry是一个日志上报系统,Sentry 是一个实时的日志记录和汇总处理的平台。专一于错误监控,发现和数据处理,可让咱们再也不依赖于用户反馈才能发现和解决线上bug。让咱们简单看一下Sentry支持哪些语言和平台吧
在JavaScript领域,Sentry的支持也能够说是面面俱到
参考连接 https://docs.sentry.io/platforms/
Sentry的功能简单说就是,你在代码中catch错误,而后调用Sentry的方法,而后Sentry就会自动帮你分析和整理错误日志,例以下面这张图截取自Sentry的网站中
1.首先呢,你固然要注册Sentry的帐号
这个时候Sentry会自动给你分配一个惟一标示,这个标示在Sentry里叫作 dsn
2. 安卓模块并使用基础功能
安装@sentry/browser
npm install @sentry/browser
在项目中初始化并使用
import * as Sentry from '@sentry/browser'; Sentry.init ({ dsn: 'xxxx', }); try { throw Error ('我是一个error'); } catch (err) { // 捕捉错误 Sentry.captureException (err); }
3.上传sourceMap以方便在线上平台阅读出错的源码
// 安装 $ npm install --save-dev @sentry/webpack-plugin $ yarn add --dev @sentry/webpack-plugin // 配置webpack const SentryWebpackPlugin = require('@sentry/webpack-plugin'); module.exports = { // other configuration plugins: [ new SentryWebpackPlugin({ include: '.', ignoreFile: '.sentrycliignore', ignore: ['node_modules', 'webpack.config.js'], configFile: 'sentry.properties' }) ] };
4. 为何不是raven.js?
// 已经废弃,虽然你仍是能够用 var Raven = require('raven-js'); Raven .config('xxxxxxxxxxx_dsn') .install();
捕获错误
try { aFunctionThatMightFail(); } catch (err) { Sentry.captureException(err); }
设置该错误发生的用户信息
下面每一个选项都是可选的,但必须 存在一个选项 才能使Sentry SDK捕获用户: id
Sentry.setUser({ id:"penghuwan12314" email: "penghuwan@example.com", username:"penghuwan", ip_addressZ:'xxx.xxx.xxx.xxx' });
设置额外数据
Sentry.setExtra("character_name", "Mighty Fighter");
设置做用域
Sentry.withScope(function(scope) { // 下面的set的效果只存在于函数的做用域内 scope.setFingerprint(['Database Connection Error']); scope.setUser(someUser); Sentry.captureException(err); }); // 在这里,上面的setUser的设置效果会消失
设置错误的分组
整理日志信息,避免过分冗余
Sentry.configureScope(function(scope) { scope.setFingerprint(['my-view-function']); });
设置错误的级别
在阅读日志时能够肯定各个bug的紧急度,肯定排查的优先书序
Sentry.captureMessage('this is a debug message', 'debug'); //fatal,error,warning,info,debug五个值 // fatal最严重,debug最轻
自动记录某些事件
例以下面的方法,会在每次屏幕调整时完成上报
window.addEventListener('resize', function(event){ Sentry.addBreadcrumb({ category: 'ui', message: 'New window size:' + window.innerWidth + 'x' + window.innerHeight, level: 'info' }); })
Sentry实践的运用
根据环境设置不一样的dsn
let dsn; if (env === 'test') { dsn = '测试环境的dsn'; } else { dsn = '正式环境的dsn'; } Sentry.init ({ dsn });