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 相关文章推荐
$.ajax返回的JSON无法执行success的解决方法
Sep 09 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
javascript用户注册提示效果的简单实例
Aug 17 Javascript
jQuery EasyUI菜单与按钮详解
Jul 13 Javascript
深入理解js generator数据类型
Aug 16 Javascript
ionic实现带字的toggle滑动组件
Aug 27 Javascript
使用Promise链式调用解决多个异步回调的问题
Jan 15 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
Jun 04 Javascript
angular.js中解决跨域问题的三种方式
Jul 12 Javascript
React-Native 组件之 Modal的使用详解
Aug 08 Javascript
react结合bootstrap实现评论功能
May 30 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
全国中波电台频率表
2020/03/11 无线电
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
深入解析php中的foreach问题
2013/06/30 PHP
PHP生成数组再传给js的方法
2014/08/07 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
Maps Javascript
2007/01/22 Javascript
jquery HotKeys轻松搞定键盘事件代码
2008/08/30 Javascript
javascript 得到变量类型的函数
2010/05/19 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
2014/10/20 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
jQuery实现悬浮在右上角的网页客服效果代码
2015/10/24 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
BootStrap Table 后台数据绑定、特殊列处理、排序功能
2017/05/27 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
2017/10/17 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
vue组件入门知识全梳理
2020/09/21 Javascript
[03:12]TI9战队档案 - Virtus Pro
2019/08/20 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
python简单实现计算过期时间的方法
2015/06/09 Python
Python爬虫番外篇之Cookie和Session详解
2017/12/27 Python
matplotlib作图添加表格实例代码
2018/01/23 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
linux centos 7.x 安装 python3.x 替换 python2.x的过程解析
2020/12/14 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
Clearly澳大利亚:购买眼镜、太阳镜和隐形眼镜
2018/04/26 全球购物
财务会计人员岗位职责
2013/11/30 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
《只有一个地球》教学反思
2016/02/16 职场文书
NodeJs内存占用过高的排查实战记录
2021/05/10 NodeJs
苹果发布了MagSafe固件更新,可以不外接电源实现最高7.5W充电
2022/04/21 数码科技