脚本宝典收集整理的这篇文章主要介绍了vue中如何使用sentry对错误日志进行监控，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

前言

之前看过一片前端错误日志的文章,但是没怎么在意,忘记是哪位大神写的了-.-! 知道前天跟公司后台哥们一说,说我们需要搭个前端的错误日志监控系统,然后他就把sentry的文档发过来了,他自己用python已经在公司服务器搭了一个sentry了,但是我在使用的过程中始终卡在了确认API_KEY这一步,所以自己就使用了gIThub的账号操作了一遍,便有了下文.

sentry官网
vue errorHandler 文档说明
官方文档传送门

创建一个sentry账号

使用github账号登陆,新建一个组织,然后新建项目.
注意:vue在brower下,当时我看文档的时候没注意,还是参考react来配置的,差点走了弯路.

项目新建好以后,跳转到一下界面,这时sentry已经生成了DSN,即sentry请求发送错误日志的链接.
拉到页尾去,使用Model来引入sentry;

安装插件

cnpm i raven-js -s

//  这事官方自动帮你生成的 import Vue From 'vue'; import Raven from 'raven-js'; import Ravenvue from 'raven-js/plugins/vue';  Raven     .config('https://396b17802b834246156166ed6defd99cb898@sentry.io/52513545')     .addPlugin(Ravenvue, Vue)     .install(); 

这是官方自动帮你生成的,但是目前无法捕捉vue中的错误日志,但是vue有个全局配置叫做
vue.config.errorHandler,我们就是使用他来发送vue的错误日志的

使用

由于我们项目一般都是分为测试环境和生产环境,因此有必要使用node.env来进行区分

    /main.js     import Vue from 'vue';     import Raven from 'raven-js';     import RavenVue from 'raven-js/plugins/vue';          const sentyDSN = PRocess.env.NODE_ENV === 'test' ?                                                  'https://生成的api-test':                                                 'https://生成的api-prod' process.env.NODE_ENV === 'test' && Raven.config(     sentyDSN,  //       {         environment: process.env.NODE_ENV     },     {         release:'staging@1.0.1'     }     )     .addPlugin(RavenVue, Vue)     .install() // 注意,一定记得区分开发环境,否则开发环境的错误也会被提交到sntry去,并且本地是不会显示错误信息的     if(process.env.NODE_ENV !== 'development' ){     Vue.config.errorHandler = function(err, vm, info) {         Raven.captureException(err)     } }  new Vue({     el: '#app',     router,     Store, //将store注册到vue实例中     template: '<App/>',     components: { App } })     

上述操作完成后,你可以自己抛出一个错误, 比如 我在index.vue中执行了this.testhhh(),由于此时并没有上source-map,因此只能看到出错的信息,无法定位到真正的错误所在;
所以需要上传source-map

这是我已经上传了sourcemap后的结果,是可以定位到具体的行号的.

点进去..... 可以看到具体的出错信息.

vue配合webpack,自动上传js,map文件到sentry错误日志系统

使用sentry-webpack-plugin,自动将生成的js map文件上传
sentry官网

source-map

参见 @游龙翔隼 Sentry前端部署拓展篇（sourcemap关联、issue关联、release控制)

webpack.prod.conf配置

安装 cnpm i @sentry/webpack-plugin -D

const SentryPlugin = require('@sentry/webpack-plugin') new SentryPlugin({         release: "staging@1.0.1",                           //发布的版本         include: path.join(__dirname,'../dist/static/js/'), //需要上传到sentry服务器的资源目录,会自动匹配js 以及map文件         ignore: ['node_modules', 'webpack.config.js'],  //  忽略文件目录,当然我们在inlcude中制定了文件路径,这个忽略目录可以不加         configFile :`${__dirname}/sentry.proPErties`,   //  使用了类似于java的properties配置文件,里面包含了 -o组织 -p项目 以及authtoken         urlPrefix : "~/static/js"           //  线上对应的url资源的相对路径 比如我的域名是 http://mydomin.COM/,静态资源都在 static文件夹里面,       }),

configfile:sentry.properties

# 生成的token auth.token=61fbcb5798db46f7970DFb7aacc30389b72828188dfb493a9955a3141693d18d # 默认的上传地址 defaults.url=https://sentry.io/ # 组织名 defaults.org=yunhe # 项目名 defaults.project=vue_test

一些说明

1. 暂未配置自动发送邮件的功能.
2. 通过webpack插件的形式进行source-map上传的话,比较花时间.可以手动进行;
3. webpack中的 上传的sourece-map通过realease来标注版本,这样在多版本的监控中可以对错误信息进行过滤.

参考文章

1. @游龙翔隼 Sentry前端部署拓展篇（sourcemap关联、issue关联、release控制)
2. 运维开发实践——基于Sentry搭建错误日志监控系统
3. sentry官网

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的vue中如何使用sentry对错误日志进行监控全部内容，希望文章能够帮你解决vue中如何使用sentry对错误日志进行监控所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。