详解JavaScript错误捕获和上报流程

唐代斯 發表於 2019-11-21 14:27:00

<img src="https://img2018.cnblogs.com/blog/1060770/201911/1060770-20191121142132127-1774479657.jpg" alt="" width="951" height="396">
 
 
 
怎么捕获错误并且处理，是一门语言必备的知识。在JavaScript中也是如此。
那怎么捕获错误呢？初看好像很简单，try-catch就可以了嘛！但是有的时候我们发现情况却繁多复杂。
<ul>
<li>
Q1: 同步可以try-catch,但一个异步回调，比如setTimeOut里的函数还可以try-catch吗？
</li>
<li>
Q2: Promise的错误捕获怎么做？
</li>
<li>
Q3: async/await怎么捕获错误？
</li>
<li>
Q4: 我能够在全局环境下捕获错误并且处理吗？
</li>
<li>
Q5: React16有什么新的错误捕获方式吗？
</li>
<li>
Q6: 捕获之后怎么上报和处理？
</li>
</ul>
 
问题有点多，我们一个一个来。
 
<h2 id="4771-1574297407246">Q1. 同步代码里的错误捕获方式</h2>
在同步代码里，我们是最简单的，只要try-catch就完了 
<div class="para-text">
<div class="cnblogs_code">
<pre>function test1 () {
try {
throw Error ('callback err');
} catch (error) {
console.log ('test1:catch err successfully');
}
}
test1();</pre>
</div>
</div>
输出结果如下，显然是正常的
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE78585ab9e35576419b292c10e5cb4e55/39326" alt="" width="422" height="148" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE78585ab9e35576419b292c10e5cb4e55/39326">
<h2 id="8495-1574296915924">Q2. 普通的异步回调里的错误捕获方式（Promise时代以前）</h2>
上面的问题来了，我们还能通过直接的try-catch在异步回调外部捕获错误吗？我们试一试 
<div class="para-text">
<div class="cnblogs_code">
<pre>// 尝试在异步回调外部捕获错误的结果
function test2 () {
try {
setTimeout (function () {
 throw Error ('callback err');
});
} catch (error) {
console.log ('test2:catch err successfully');
}
}
test2(); </pre>
</div>
</div>
输出
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE9803ce00b68e21a311eedb423f5170ec/39338" alt="" width="448" height="162" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE9803ce00b68e21a311eedb423f5170ec/39338">
注意这里的Uncaught Error的文本，它告诉我们错误没有被成功捕捉。
为什么呢？因为try-catch的是属于同步代码，它执行的时候，setTimeOut内部的的匿名函数还没有执行呢。而内部的那个匿名函数执行的时候，try-catch早就执行完了。（ error的内心想法：哈哈，只要我跑的够慢，try-catch还是追不上我！）
但是我们简单想一想，诶我们把try-catch写到函数里面不就完事了嘛！
 
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE2a7cbbfed08e28cfc452db02ed7be8be/39344" alt="" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE2a7cbbfed08e28cfc452db02ed7be8be/39344"> 
<div class="para-text">
<div class="cnblogs_code">
<pre>function test2_1 () {
setTimeout (function () {
try {
 throw Error ('callback err');
} catch (error) {
 console.log ('test2_1:catch err successfully');
}
});
}
test2_1();</pre>
</div>
</div>
输出结果如下，告诉我们这方法可行
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE1320a2b1f88b38f446be8a59bfeb7c9a/39350" alt="" width="444" height="144" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE1320a2b1f88b38f446be8a59bfeb7c9a/39350">
 
总结下Promise时代以前，异步回调中捕获和处理错误的方法
<ul>
<li>
在异步回调内部编写try-catch去捕获和处理，不要在外部哦
</li>
<li>
很多异步操作会开放error事件，我们根据事件去操作就可以了
</li>
</ul>
<h2 id="9872-1574298940712">Q3. Promise里的错误捕获方式</h2>
可通过Promise.catch方法捕获
<div class="para-text">
<div class="cnblogs_code">
<pre>function test3 () {
new Promise ((resolve, reject) => {
throw Error ('promise error');
}).catch (err => {
console.log ('promise error');
});
}</pre>
</div>
</div>
输出结果
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE2d08e3ac2b8766f9f8c71e45c6eaa06b/39370" alt="" width="472" height="179" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE2d08e3ac2b8766f9f8c71e45c6eaa06b/39370">
>> reject方法调用和throw Error都可以通过Promise.catch方法捕获
<div class="para-text">
<div class="cnblogs_code">
<pre>function test4 () {
new Promise ((resolve, reject) => {
reject ('promise reject error');
}).catch (err => {
console.log (err);
});
} </pre>
</div>
</div>
输出结果
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE6e1b33f6c15ecb30e65eeced2163ba86/39380" alt="" width="431" height="169" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE6e1b33f6c15ecb30e65eeced2163ba86/39380">
 
>> then方法中的失败回调和Promise.catch的关系
<ul>
<li>
如果前面的then方法没写失败回调，失败时后面的catch是会被调用的
</li>
<li>
如果前面的then方法写了失败回调，又没抛出，那么后面的catch就不会被调用了
</li>
</ul>
<div class="para-text">
<div class="cnblogs_code">
<pre>// 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');
});
}</pre>
</div>
</div>
输出分别为
<div class="para-text">
<pre>1.the error has not been swallowed up</pre>
<pre>2.无输出</pre>
</div>
<h2 id="2245-1574299571863">Q4.async/await里的错误捕获方式</h2>
对于async/await这种类型的异步，我们可以通过try-catch去解决
<div class="para-text">
<div class="cnblogs_code">
<pre>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();</pre>
</div>
<pre></pre>
</div>
输出结果如下
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE1e2d11f34994e5b85e60975109eb3f3e/39414" alt="" width="516" height="178" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE1e2d11f34994e5b85e60975109eb3f3e/39414">
 
>> 如果被await修饰的Promise因为reject调用而变化，它也是能被try-catch的
（我已经证明了这一点，但是这里位置不够，我写不下了）
<h2 id="7310-1574303869479">Q5.在全局环境下如何监听错误</h2>
window.onerror可以监听全局错误，但是很显然错误还是会抛出
<div class="para-text">
<div class="cnblogs_code">
<pre>window.onerror = function (err) {
console.log ('global error');
};
throw Error ('global error');</pre>
</div>
</div>
 
输出如下
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCEe6e93495ba82575b9e754d84ff13da3d/39432" alt="" width="493" height="212" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCEe6e93495ba82575b9e754d84ff13da3d/39432">
 
<h2 id="9737-1574304397295">Q6.在React16以上如何监听错误</h2>
>> componentDidCatch和getDerivedStateFromError钩子函数
<div class="para-text">
<div class="cnblogs_code">
<pre>class Bar extends React.Component {
// 监听组件错误
componentDidCatch(error, info) {
this.setState({ error, info });
}
// 更新 state 使下一次渲染能够显示降级后的 UI
static getDerivedStateFromError(error) {
return { hasError: true };
}
render() {
}
}</pre>
</div>
</div>
 
 
有错误，那肯定要上报啊！不上报就发现不了Bug这个样子。Sentry这位老哥就是个人才，日志记录又好看，每次见面就像回家一样
 
 
<h2>Sentry简单介绍</h2>
<blockquote>
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官网

</blockquote>
 
Sentry是一个日志上报系统，Sentry 是一个实时的日志记录和汇总处理的平台。专注于错误监控，发现和数据处理，可以让我们不再依赖于用户反馈才能发现和解决线上bug。让我们简单看一下Sentry支持哪些语言和平台吧<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE3333feb88211123c14c0f9282061fa80/39154" alt="" width="867" height="541" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE3333feb88211123c14c0f9282061fa80/39154">
 
在JavaScript领域，Sentry的支持也可以说是面面俱到
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCEd7672dae4bc250d4405764eb5c979c4c/39159" alt="" width="770" height="287" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCEd7672dae4bc250d4405764eb5c979c4c/39159">
 
<div class="cnblogs_code">
<pre>参考链接
https://docs.sentry.io/platforms/ </pre>
</div>
Sentry的功能简单说就是，你在代码中catch错误，然后调用Sentry的方法，然后Sentry就会自动帮你分析和整理错误日志，例如下面这张图截取自Sentry的网站中
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE378530ca50d2900f3695cc247043e49c/39219" alt="" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE378530ca50d2900f3695cc247043e49c/39219">
 
<h2 id="8624-1574232086142">在JavaScript中使用Sentry </h2>
1.首先呢，你当然要注册Sentry的账号
这个时候Sentry会自动给你分配一个唯一标示，这个标示在Sentry里叫做 dsn
2. 安卓模块并使用基础功能
安装@sentry/browser 
<div class="para-text">
<div class="cnblogs_code">
<pre>npm install @sentry/browser</pre>
</div>
</div>
 
在项目中初始化并使用
<div class="para-text">
<div class="cnblogs_code">
<pre>import * as Sentry from '@sentry/browser';

Sentry.init ({
dsn: 'xxxx',
});

try {
throw Error ('我是一个error');
} catch (err) {
// 捕捉错误
Sentry.captureException (err);
}</pre>
</div>
</div>
3.上传sourceMap以方便在线上平台阅读出错的源码
 
<div class="para-text">
<div class="cnblogs_code">
<pre>// 安装
$ 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'
})
]
}; </pre>
</div>
</div>
4. 为什么不是raven.js?
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE6bf5f06365f68e8dc45183a984806b92/39178" alt="" width="693" height="273" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE6bf5f06365f68e8dc45183a984806b92/39178">
 
<img src="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE74c5667ed074a557b233f7b7315bb770/39180" alt="" width="678" height="180" data-media-type="image" data-original="https://note.youdao.com/yws/public/resource/25271a3b5e7d0944c5891c67d3fc65c0/xmlnote/WEBRESOURCE74c5667ed074a557b233f7b7315bb770/39180">
<div class="cnblogs_code">
<pre>// 已经废弃，虽然你还是可以用
var Raven = require('raven-js');
Raven
.config('xxxxxxxxxxx_dsn')
.install();</pre>
</div>
 
<h2 id="7259-1574232567559">Sentry的核心功能总结</h2>
捕获错误
<div class="para-text">
<div class="cnblogs_code">
<pre>try {
aFunctionThatMightFail();
} catch (err) {
Sentry.captureException(err);
}</pre>
</div>
</div>
 
设置该错误发生的用户信息
下面每个选项都是可选的，但必须存在一个选项才能使Sentry SDK捕获用户： id 
<div class="para-text">
<div class="cnblogs_code">
<pre>Sentry.setUser({
id:"penghuwan12314"
email: "penghuwan@example.com",
username:"penghuwan",
ip_addressZ:'xxx.xxx.xxx.xxx'
});</pre>
</div>
</div>
 
设置额外数据
<div class="para-text">
<div class="cnblogs_code">
<pre>Sentry.setExtra("character_name", "Mighty Fighter");</pre>
</div>
<pre>设置作用域 </pre>
</div>
<div class="para-text">
<div class="cnblogs_code">
<pre>Sentry.withScope(function(scope) {
// 下面的set的效果只存在于函数的作用域内
scope.setFingerprint(['Database Connection Error']);
scope.setUser(someUser);
Sentry.captureException(err);
});
// 在这里，上面的setUser的设置效果会消失</pre>
</div>
</div>
 
设置错误的分组
整理日志信息，避免过度冗余 
<div class="para-text">
<div class="cnblogs_code">
<pre>Sentry.configureScope(function(scope) {
scope.setFingerprint(['my-view-function']);
});</pre>
</div>
</div>
 
设置错误的级别
在阅读日志时可以确定各个bug的紧急度，确定排查的优先书序
<div class="para-text">
<div class="cnblogs_code">
<pre>Sentry.captureMessage('this is a debug message', 'debug');
//fatal，error，warning，info，debug五个值
// fatal最严重,debug最轻</pre>
</div>
</div>
 
自动记录某些事件
例如下面的方法，会在每次屏幕调整时完成上报 
<div class="para-text">
<div class="cnblogs_code">
<pre>window.addEventListener('resize', function(event){
Sentry.addBreadcrumb({
category: 'ui',
message: 'New window size:' + window.innerWidth + 'x' + window.innerHeight,
level: 'info'
});
})</pre>
</div>
</div>
Sentry实践的运用
根据环境设置不同的dsn
<div class="para-text">
<div class="cnblogs_code">
<pre>let dsn;
if (env === 'test') {
dsn = '测试环境的dsn';
} else {
dsn =
 '正式环境的dsn';
}

Sentry.init ({
dsn
});</pre>
</div>
 
<pre> </pre>
</div>
 
 

</div>
<div id="MySignature" role="contentinfo">
我叫彭湖湾，请叫我胖湾 
来源：https://www.cnblogs.com/penghuwan/p/11905429.html

頁: [1]

琼殿技术论坛's Archiver

详解JavaScript错误捕获和上报流程