vue-cli3项目+sentry前端异常监控工具

蛋仔
2,299 阅读3分钟

使用背景：用户遇到报错提示，测试一直无法复现，前端定位不到问题，无法解决，这时前端异常监控工具就发挥作用了。

使用步骤：

一、注册及创建项目

sentry官网

  • 注册账号

注册
注册界面

  • 注册成功后登陆到首页，先把后台字体改成中文比较容易看。

  • 创建项目 (以vue的项目为例)

  • 创建完后会出现详细的操作指引

  • 按照它的提示操作，在你的vue项目中安装 @sentry/browser 和 @sentry/integrations
  • 安装成功后在你本地项目的main.js文件中引入
import Vue from 'vue'
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';

Sentry.init({
  dsn: 'https://xxxx@sentry.io/517xx', // 上面图片你创建项目后获取到的
  integrations: [new Integrations.Vue({Vue, attachProps: true})],
});
Vue.prototype.Sentry = Sentry // 在捕获错误的界面需要用到Sentry

  • 到这一步，我们就已经配置好了vue项目和sentry的联系，来使用一下吧~

  • 在你的项目中创造个错误用 Sentry.captureException(e) 来捕获

  • @sentry/browser的使用详见npmjs.com

    mounted() { 
		this.err();
	},
	methods: {
		err() {
			try {
				const a = 1;
				a = 2;
			} catch (e) {
				Sentry.captureException(e);
			}
		}
	}

  • 使用

  • 执行vue项目，执行有报错的界面，这时错误已经上传到sentry后台了，并且你的邮箱也会收到错误提醒

  • 点击进入详情，但是你会发现这没有显示出报错的具体位置，对于我们并没有什么大帮助

  • 所以，为了让sentry能定位到我们报错的界面的具体位置，我们要进行下面的配置

二、sourcemap上传至sentry

@sentry/webpack-plugin的使用详见npmjs.com

  • 安装sentry-webpack-plugin

yarn add @sentry/webpack-plugin --dev

  • 配置 .sentryclirc 文件

  • vue的项目根目录下创建文件 .sentryclirc 并配置下面的代码
[auth]
token=token

[defaults]
url = https://sentry.io
org = org  
project = project
  • org组织名
    org组织名
  • 创建token

  • 创建sentry项目的版本号

  • 以上配置完，我们还需要创建sentry项目的版本号，在错误日志中就能看出是哪个版本的代码报错，在文件 .env.production中配置版本号test-1，这里的版本号必须和vue.config.js中配置的release版本号一致
ENV = 'production'
RELEASE_VERSION="test-1"

  • 配置vue.config.js

  • 先确保vue.config.js中的 productionSourceMap为true,表示允许生成map文件(理解为源码，便于定位报错位置)
const SentryCliPlugin = require('@sentry/webpack-plugin');
 module.exports = {
      // ... 其他代码
      productionSourceMap: true,
      // webpack-merge将合并其中代码
    configureWebpack: {
       // ... 其他代码
        plugins:[
        new SentryCliPlugin ({
         include: "./dist", // 作用的文件夹(打包好的文件夹)
         release: process.env.RELEASE_VERSION, // 版本号
         configFile: "sentry.properties",
         ignore: ['node_modules'] ,
         urlPrefix: "/vue-source-map-test"  // 线上项目的文件夹名
        })
       ]
        
    }
     
 }

urlPrefix:例如我线上地址是http://xxx.xxx.com/vue-source-map-test/页面名称,那么urlPrefix就为/vue-source-map-test，也就是线上ip或者域名后面开始到具体访问的界面前结束，这个区域的路径

  • 完成

  • 执行yarn build打包项目，在sentry系统你会看到在工件中有打包文件中的js和map文件

  • 上传打包好的dist到你的测试或线上服务器，打开访问地址执行报错界面，这时候你就可以看到效果啦~
  • 现在进入详情，你就能看到代码报错的具体位置^_^
avatar
文章
阅读
粉丝