vue项目前端错误收集之sentry教程详解


Posted in Javascript onMay 27, 2019

sentry简介

Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误。其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误。

sentry官网: https://sentry.io/

sentry安装

sentry 是一个开源的工具,可以自行搭建。

官方支持两种安装和运行 Sentry 服务器的方法, Docker 和 Python 。推荐使用 Docker 。

当然,对于刚开始接触 sentry 的同学,也可以直接使用官方提供的免费服务,但是有一些限制。

下面先来介绍一下利用官方的免费服务,在前端项目中如何使用 sentry 。

如何在项目中使用sentry

1.首先需要在 sentry 的官网注册一个账号。注册完选择新建一个项目, sentry 支持多种框架,在其中选择 vue 创建项目。我创建了一个名为test的项目。

vue项目前端错误收集之sentry教程详解 

 1. 创建项目页面会自动跳转到如何配置vue项目页面。接下来就按照指引在vue代码里引入 sentry 。可以通过 cdn 或者 npm 引入。我们采用 npm 引入。引入的时候需要给 init 函数传递一个 dsn 参数。这个参数唯一指定了我们刚才创建的项目,在创建项目的时候系统会自动生成。如果不传这个参数, sentry 不会发送错误。

// main.js
import * as Sentry from '@sentry/browser';
import * as Integrations from '@sentry/integrations';
// 在生产环境中让sentry报错
process.env.NODE_ENV === "production" && Sentry.init({
 dsn: 'https://1111a5bc59b54778b75f4e3a92f2e462@sentry.io/1447145',
 integrations: [
 new Integrations.Vue({
  Vue,
  attachProps: true,
 }),
 ],
});

在项目跟目录下增加.sentryclirc文件,其中的token可以在左上角头像里的api keys里面获取。

[auth]
token="your token"

[defaults]
url = https://sentry.io
org = "your org"
project = test

然后我们在代码里制造一个错误,就可以让 sentry 捕获了。本地如何模拟线上环境访问dist下的文件呢?需要装一个 http-server ,在dist文件夹下启动一个http服务就可以了。

npm i http-server 
cd dist
http-server -p 8888

注意:sentry捕获到的错误不会在打印在控制台中。

在network中可以看到, sentry 发送了一个错误请求,请求参数如下:

vue项目前端错误收集之sentry教程详解 

接下来我们就可以在后台看到刚才上传的错误信息,同时 sentry 也会给你的邮箱发送一封错误邮件。

错误信息查看

在后台找到我们的test项目,点击进去就能看到多了一条错误信息。

vue项目前端错误收集之sentry教程详解 

点击信息可以进入信息详情进行查看。

vue项目前端错误收集之sentry教程详解 

但是这个错误信息是压缩后的,不能定位到代码的实际位置。使用意义不大,因此需要上传 source-map 。

上传source-map

上传的方式有多种。可以通过 sentry-cli 通过命令行的方式来上传 source-map ,但是需要手动上传。也可以采用 webpack-plugin 这个插件,可以在 build 的同时自动上传 source-map 。本文采用自动上传策略。

项目配置:

// webpack.prod.conf
const SentryCliPlugin = require("@sentry/webpack-plugin");
plugins:[
 new SentryCliPlugin({
  include: "./dist",
  release: process.env.RELEASE_VERSION,
  configFile: "sentry.properties"
 })
]
// main.js
Sentry.init({
 dsn: "https://4ec86726f2ba40338f66837c6b959eed@sentry.io/1447158",
 integrations: [
  new Integrations.Vue({
   Vue,
   attachProps: true
  }),
  new Integrations.RewriteFrames()
 ],
 release: process.env.RELEASE_VERSION
});
// prod.env.js
"use strict";
const release = "test-1";
process.env.RELEASE_VERSION = release;
module.exports = {
 NODE_ENV: '"production"',
 RELEASE_VERSION: `"${release}"`
};

需要保证 plugins 和 Sentry.init 两个配置中的 release 版本号相同,这样的话 sentry 才能将 source-map 文件一一对应上。

修改完之后我们重新build一下项目,build的过程比较慢:

vue项目前端错误收集之sentry教程详解 

之后我们去后台可以看见在版本中多了一个 test-1 版本,也就是我们刚刚上传的版本。

vue项目前端错误收集之sentry教程详解 

点进去可以看见我们刚才上传的 source-map 文件。

vue项目前端错误收集之sentry教程详解 

这时我们重新触发一次错误,就可以看到具体的出错位置了。

vue项目前端错误收集之sentry教程详解 

sentry关联github

在设置->集成里面可以设置 sentry 关联各种服务,如 github、jira 等。关联上 github 后,可以直接为该异常创建issue。

vue项目前端错误收集之sentry教程详解 

这样在该异常的详情页就可以创建issue到 sentry 这个仓库了。

vue项目前端错误收集之sentry教程详解 

创建时可以选择仓库,名称,详情及指定给谁:

vue项目前端错误收集之sentry教程详解 

打开 github ,在 sentry 这个仓库下,发现多了一个issue,就是刚才我们创建的。

vue项目前端错误收集之sentry教程详解 

在我们向 github 提交 commit 的时候,如果加上了异常的id,例如这样:

vue项目前端错误收集之sentry教程详解 

git commit -m 'Fixes TEST-3'

这样在下次发版 build 的时候, sentry 会自动将该异常的状态从 unresolved 变成 resolved ,并会给出本次提交的 diff 地址。

vue项目前端错误收集之sentry教程详解 

搭建sentry服务

官方给出的有两种方法可以自行搭建sentry:

•python
•docker

推荐使用docker。下面来介绍一下通过docker如何搭建sentry。

首先需要下载docker

mac桌面版地址: https://hub.docker.com/editions/community/docker-ce-desktop-mac

其中已经集成了docker命令行、docker-compose等。

然后需要去github拉取 Sentry On-Premise ,这个是官方提供的通过docker安装sentry的仓库,里面介绍了如何一步一步搭建sentry。

创建服务步骤:

cd onpremise
// 创建本地数据库
docker volume create --name=sentry-data && docker volume create --name=sentry-postgres
// 创建环境配置文件
cp -n .env.example .env 
// 构建docker服务
docker-compose build
// 产生秘钥,将其作为SENTRY_SECRET_KEY加入到.env文件中
// 创建数据库,用交互式的提示生成管理员账号
docker-compose run --rm web upgrade
// 启动所有服务
docker-compose up -d

如果过程一切正常的话,现在访问localhost:9000就能看到sentry的登录页面了,用刚才生成的管理员账号密码登录即可。

vue项目前端错误收集之sentry教程详解 

以后的操作就跟上面介绍的一样了。

注意事项

1.利用本地搭建的sentry创建项目的时候,发现dsn那一栏是空的,系统并没有自动生成。需要自己拼接这个dsn。它由以下几部分组成,分别是协议、公钥、私钥、主机、路径(一般为空)、项目id。
'{PROTOCOL}://{PUBLIC_KEY}:{SECRET_KEY}@{HOST}/{PATH}{PROJECT_ID}'
//类似这样,把它放在sentry.init中的dsn即可

http://4cf10206ef27409bbb64f68b:a67a0eb5513e43ab883af3f3@localhost:9000/2

总结

以上所述是小编给大家介绍的vue项目前端错误收集之sentry教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
理解Javascript_01_理解内存分配原理分析
Oct 11 Javascript
JQuery下拉框应用示例介绍
Apr 23 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
JS弹出新窗口被拦截的解决方法
Aug 09 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
Sep 29 Javascript
javascript的几种写法总结
Sep 30 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
使用vue框架 Ajax获取数据列表并用BootStrap显示出来
Apr 24 Javascript
详解vue-cli + webpack 多页面实例应用
Apr 25 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
了解javascript中变量及函数的提升
May 27 #Javascript
基于vue实现一个禅道主页拖拽效果
May 27 #Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 #jQuery
初学node.js中实现删除用户路由
May 27 #Javascript
jquery实现动态创建form并提交的方法示例
May 27 #jQuery
jquery实现动态改变css样式的方法分析
May 27 #jQuery
Vue scrollBehavior 滚动行为实现后退页面显示在上次浏览的位置
May 27 #Javascript
You might like
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
PHP实现货币换算的方法
2014/11/29 PHP
form自动提交实例讲解
2017/07/10 PHP
图片按比例缩放函数
2006/06/26 Javascript
javascript中的有名函数和无名函数
2007/10/17 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
2014/12/20 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
2016/01/06 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
2016/05/11 Javascript
有关JavaScript中call()和apply() 的一些理解
2016/05/20 Javascript
jQuery中$.ajax()方法参数解析
2016/10/22 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
2017/01/03 Javascript
jquery实现手机端单店铺购物车结算删除功能
2017/02/22 Javascript
jQuery实现对网页节点的增删改查功能示例
2017/09/18 jQuery
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
vue项目前端错误收集之sentry教程详解
2019/05/27 Javascript
web.py在模板中输出美元符号的方法
2014/08/26 Python
python将字符串转换成数组的方法
2015/04/29 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
python书籍信息爬虫实例
2018/03/19 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
python简单区块链模拟详解
2019/07/03 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
h5网页水印SDK的实现代码示例
2019/02/19 HTML / CSS
NFL官方在线商店:NFLShop
2020/07/29 全球购物
当x.equals(y)等于true时,x.hashCode()与y.hashCode()可以不相等,这句话对不对
2015/05/02 面试题
法学毕业生自荐信
2013/11/13 职场文书
领导的自我鉴定
2013/12/28 职场文书
日本语毕业生自荐信
2014/02/01 职场文书
协议书的格式
2014/04/23 职场文书
校园绿化美化方案
2014/06/08 职场文书
雷锋式好少年事迹材料
2014/08/17 职场文书