在vue官方文档看到这个推荐的错误追踪服务- sentry，去官网看了看觉得挺不错的，就准备用到项目里。
嗯，还有官方集成vue，那太棒了，结果官方文档在vue中的使用说明只有寥寥几行，仅仅说明了如何引入与集成，完全没说在组件中如何使用（可能是我英文水平太low，没看出来）。那么只得靠自己了，自己封装一下。
主要还是看文档，在JavaScript栏目下，如何使用已经说明的很清楚了，我要做的仅仅是封装一个插件，使其在组件内可以直接使用。不多bb，直接上代码。
let Log = function() {};
/**
* 写普通日志
* @param {String} title
* @param {String} context
* @param {String} level
* @param {Object} tags
*/
Log.writeNormalLog = function(title='',context='',level='info',tags={}) {
Raven.captureMessage(title,{level,tags,extra:{context}});
};
/**
* 写异常日志
* @param {String} title
* @param {String} context
* @param {String} level
* @param {Object} tags
*/
Log.writeExLog = function(ex,context='',level='info',tags={}) {
Raven.captureException(ex,{level,tags,extra:{context}});
};
Log.Level={
INFO:'info',
WARNING:'warning',
ERROR:'error'
};
export default {
/**
* Raven.js 日志记录插件
* Doc:https://docs.sentry.io/clients/javascript/usage/
* @param {*} Vue
* @param {Object} options
*/
install(Vue, options = {}) {
Raven.config("your dsn")
.addPlugin(RavenVue, Vue)
.install();
Raven.setUserContext({
user: options.user || ""
});
Raven.setTagsContext({ environment: options.env });
Object.defineProperties(Vue.prototype, {
$log: { value: Log, writable: true }
});
}
};
Log即为封装的日志记录方法，这里只是简单的使用了几个参数。
setUserContext 用来记录用户信息。
setTagsContext 设置全局tag标签，任何记录都会带上这个tag，这里记录了运行环境。
使用中发现一个问题，就是时区不正确，找了半天才发现在哪改
点击左下角的图标，选择账户(Account)，在外观(Appearance)中修改时区。
更新一下关于sourcemap的，一般生产环境都会压缩js，异常常常是1行3000列这种情况，这时通过sourcemap可以解决这个问题，这里不细说sourcemap。
想要在sentry上通过sourcemap显示具体信息就需要上传相关脚本的sourcemap，官方文档上表明有2种方法，我使用的sentry-cli来上传的。
具体流程
- 安装sentry-cli
$ npm install sentry-cli-binary -g - 登录sentry，这里需要用到token
$ sentry-cli login
关于token则是在如图左下角，点击API
创建一个token，记住要勾选 project:write 开启项目的写权限 - 创建一个release
$ sentry-cli releases -o MY_ORG -p MY_PROJECT new NAME -
$ sentry-cli releases -o MY_ORG -p MY_PROJECT files NAME upload-sourcemaps --url-prefix URL_PREFIX DIR
MY_ORG 为组织名称，可以使用简称，在组织设置里查看。
MY_PROJECT 为项目名称
NAME 为自定义的release名称
URL_PREFIX 为url前缀，一般是js所在目录地址
DIR 为需要上传文件所在目录
这是文档中的例子：$ sentry-cli releases -o MY_ORG -p MY_PROJECT files 2da95dfb052f477380608d59d32b4ab9 upload-sourcemaps --url-prefix https://mydomain.invalid/static path/to/assets 上传完后的sourcemap地址为 https://mydomain.invalid/static/xxxxxx.js.map
上传完成后只要地址正确就OK了
官方提示
- Make sure that the URL prefix is correct for your files. This is easy to get wrong.
- Make sure you upload the matching sourcemaps for your minimized files.
- Make sure that your minified files you have on your servers actually have references to your files.
