Vue项目集成前端异常监控工具Sentry（一）-前端集成

原创

于 2019-07-19 13:50:54 发布 · 2.9k 阅读

CC 4.0 BY-SA版权

本文介绍了如何在Vue CLI 2.0项目中集成Sentry前端异常监控工具。首先，注册Sentry账号并创建组织和项目，然后安装SDK并在main.js中初始化监控服务，确保只在非开发环境中运行。接着，为排除测试环境信息并上传source-map以准确定位错误位置，使用webpack插件自动上传map文件，并配置.sentryclirc文件。通过这些步骤，Sentry能捕获并上传运行时异常，便于在控制台查看错误详情。

项目是使用vue cli2.0版本搭建的，目录结构与3.0cli搭出来的不一样。仅学习使用可以使用vue cli官方提供的方法将版本降级。

npm install -g @vue/cli-init
vue init webpack my-project

一、集成Sentry

1.登录官网https://sentry.io/，注册账号，建立组织（organization）和项目（project）

2.安装sentry sdk

npm install @sentry/browser
npm install @sentry/integrations

3.在main.js中初始化监控服务,下面代码是官方直接提供的。

import Vue from 'vue'
import * as Sentry from '@sentry/browser'
import * as Integrations from '@sentry/integrations'

Sentry.init({
	dsn: 'https://d8b8b63d1d92443294261269bfa849a1@sentry.io/1501448',
	integrations: [new Integrations.Vue({Vue, attachProps: true})],
});

// dsn是官方提供的，每个项目的dsn都不相同，这里换成自己项目的

因为监控服务是通过Vue.config.errorHandler实现的，初始化后控制台将不再显示错误信息，因此不需要在开发环境使用。在初始化前判断是否是开发环境。