[转] vue前端异常监控sentry实践

申雅妃 發表於 2019-9-12 17:10:00

<h2>1. 监控原理</h2>
<h3>1.1 onerror</h3>
传统的前端监控原理分为异常捕获和异常上报。一般使用<code>onerror</code>捕获前端错误：
<pre class="prism-token tokenlanguage-js">window.onerror = (msg, url, line, col, error) => {
console.log('onerror')
// TODO
}</pre>
<h3>1.2 promise</h3>
但是<code>onerror</code>事件无法捕获到网络异常的错误(资源加载失败、图片显示异常等)，例如<code>img</code>标签下图片url 404 网络请求异常的时候，<code>onerror</code>无法捕获到异常，此时需要监听<code>unhandledrejection</code>。
<pre class="prism-token tokenlanguage-js">window.addEventListener('unhandledrejection', function(err) {
console.log(err)
})</pre>
<h3>1.3 上报</h3>
捕获的异常如何上报？常用的发送形式主要有两种:
<ol class="ol-level-0">
<li>通过 ajax 发送数据(xhr、jquery...)</li>
<li>动态创建 img 标签的形式</li>
</ol>
<pre class="prism-token tokenlanguage-js">function report(error) {
var reportUrl = 'http://xxxx/report'
new Image().src = reportUrl + '?error=' + error
}</pre>
<h3>1.4 使用sentry</h3>
sentry是一套开源的强大的前端异常监控上报工具，官网地址：https://sentry.io，官方提供了如何搭建sentry服务，此处略过安装流程，直接使用已有的服务。
<h3>1.5 与vue结合</h3>
针对vue，sentry官方推荐使用raven配合sentry进行异常捕获和上报。而在vue中，vue提供了错误捕获方法<code>vue error handler</code>，官方也推荐使用错误追踪服务 sentry 并通过<code>vue error handler</code>选项提供了官方支持。
<h2>2. 安装raven</h2>
raven是sentry官方针对vue推荐的插件，yarn安装raven-js即可。
<pre class="prism-token tokenlanguage-js">$ yarn add raven-js</pre>
<h2>3. 初始化sentry</h2>
初始化引入Vue、Raven、RavenVue即可，sentry能主动监听上报错误。
<pre class="prism-token tokenlanguage-js">import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
const dsn = 'https://<key1>@sentry.io/<key2>'
Raven.config(dsn).addPlugin(RavenVue, Vue).install()</pre>
<h2>4. 手动上报</h2>
对于一些其他信息，如提示日志等，无法自动捕获，需要手动进行上报。
<pre class="prism-token tokenlanguage-js">log (data = null, type = 'error', options = {}) {
// 添加面包屑
Raven.captureBreadcrumb({
message: data,
category: 'manual message'
})
// 异常上报
if (data instanceof Error) {
Raven.captureException(data, {
 level: type,
 logger: 'manual exception',
 tags: { options: options }
})
} else {
Raven.captureException('error', {
 level: type,
 logger: 'manual data',
 extra: {
 data: data,
 options: this.options,
 date: new Date()
 }
})
}
}</pre>
<h2>5. 封装异常上报类 Report.js</h2>
针对上述内容，封装异常上报类Report，使用单例模式，避免监控类重复实例化。
<pre class="prism-token tokenlanguage-js">/**
* by csxiaoyao
* 2019.03.17
* sunjianfeng@csxiaoyao.com
*/
import Raven from 'raven-js'
import RavenVue from 'raven-js/plugins/vue'
class Report {
static dsn = 'https://<key1>@sentry.io/<key2>'
constructor (Vue, options = {}) {
if (process.env.NODE_ENV === 'production') { // TODO }
this.Vue = Vue
this.options = options
}
/**
* 单例模式
*/
static getInstance (Vue, options) {
if (!(this.instance instanceof this)) {
 this.instance = new this(Vue, options)
 this.instance.install()
 this.instance.registerError()
}
return this.instance
}
/**
* init
*/
install () {
Raven.config(Report.dsn, {
 release: '1.0.0',
 environment: 'production'
 // whitelistUrls:
}).addPlugin(RavenVue, this.Vue).install()
// 记录用户信息
Raven.setUserContext({
 user: this.options.user || ''
})
// 设置全局tag标签
Raven.setTagsContext({ environment: this.options.env || '' })
}
/**
* 注册全局错误处理
*/
registerError () {
// 监听error
window.onerror = (msg, url, line, col, error) => {
 console.log('onerror')
 if (msg !== 'Script error.' && !url) {
 return true
 }
 setTimeout(() => {
 let data = {}
 col = col || (window.event && window.event.errorCharacter) || 0
 data.url = url
 data.line = line
 data.col = col
 data.error = error
 if (&& error.stack) {
 data.msg = error.stack.toString()
 }
 this.log(data)
 }, 0)
 return true
}
// 监听promise
window.addEventListener('unhandledrejection', err => {
 console.log('unhandledrejection')
 setTimeout(() => {
 this.log(JSON.stringify(err))
 }, 0)
})
}
/**
* 主动上报
* type: 'info','warning','error'
*/
log (data = null, type = 'error', options = {}) {
// 添加面包屑
Raven.captureBreadcrumb({
 message: data,
 category: 'manual message'
})
// 异常上报
if (data instanceof Error) {
 Raven.captureException(data, {
 level: type,
 logger: 'manual exception',
 tags: { options: options }
 })
} else {
 Raven.captureException('error', {
 level: type,
 logger: 'manual data',
 extra: {
 data: data,
 options: this.options,
 date: new Date()
 }
 })
}
}
}
export default Report</pre>
<h2>6. 调用 Report.js 类</h2>
<code>main.js</code>中引入Report类，并绑定实例化后的sentry实例到Vue上以便全局调用。
<pre class="prism-token tokenlanguage-js">import Report from '@/assets/Report'
let sentry = Report.getInstance(Vue, {})
Vue.prototype.$sentry = sentry // 设置全局变量</pre>
在其他的vue组件中手动上报日志。
<pre class="prism-token tokenlanguage-js">this.$sentry.log('test')</pre>
<h2>7. sourceMap</h2>
sentry针对压缩过的js文件提供了sourceMap分析，只需要上传版本对应的sourceMap，就可以在错误日志中查看对应的源码信息。详细方法见官方文档：https://docs.sentry.io/clients/javascript/sourcemaps/(https://docs.sentry.io/clients/javascript/sourcemaps/)
 
转自：https://cloud.tencent.com/developer/article/1404307
 
</audio> 
来源：https://www.cnblogs.com/chris-oil/p/11512923.html

頁: [1]

琼殿技术论坛's Archiver

[转] vue前端异常监控sentry实践