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

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的项目。

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 发送了一个错误请求,请求参数如下:

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

错误信息查看

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

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

但是这个错误信息是压缩后的,不能定位到代码的实际位置。使用意义不大,因此需要上传 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的过程比较慢:

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

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

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

sentry关联github

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

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

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

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

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

git commit -m 'Fixes TEST-3'

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

搭建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的登录页面了,用刚才生成的管理员账号密码登录即可。

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

注意事项

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教程详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案

    遇到的问题 使用webpack打包vue后,将打包好的文件,发布到Tomcat上,访问成功,但是刷新后页面报404错. 在网上查找了一下,原来是HTML5 History 模式引发的问题,具体为什么,vue官方已经给出了解释,你可以看https://router.vuejs.org/zh-cn/essentials/history-mode.html 但是看完问题又来了,官方给出的解决方案中没有说tomcat下,怎么决解. 解决方案 根据官方给出的解决方案原理 你要在服务端增加一个覆盖所有情况的

  • element 结合vue 在表单验证时有值却提示错误的解决办法

    绑定的值与规则指定的值一定要相同------- 第一步: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> 加上rules ref 第二部: <el-form-item label="活动名称" prop="na

  • vue :src 文件路径错误问题的解决方法

    首先先说明下vue-cli的assets和static的两个文件的区别,因为这对你理解后面的解决办法会有所帮助 assets:在项目编译的过程中会被webpack处理解析为模块依赖,只支持相对路径的形式,如< img src="./logo.png">和background:url(./logo.png),"./logo.png"是相对资源路径,将有webpack解析为模块依赖 static:在这个目录下文件不会被webpack处理,简单就是说存放第三方

  • vue-cli中打包图片路径错误的解决方法

    最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法,终于给摸索出来.将项目部署到服务器上分为两种:一种是直接部署到服务器的根目录,另外一种是部署到服务器的子目录下 1.我们首先来说部署到根目录下 就是比如:www.****.com 找到项目中config文件夹下的index.js文件 将文件中的assetsPublicPath: '/',改成如下方框这样. 这样的目的是将绝对路径改成相对路径 如果放在根目录下,这样就可以了 2.放在子目录下 如

  • 关于Vue背景图打包之后访问路径错误问题的解决

    案例环境 通过vue-cli脚手架创建的vue项目 在项目打包的时候遇到了背景图片路径出错的问题,经过谷歌一番,发现是在配置的时候对图片的限制大小过小造成的 首先,出错点在url-loader上面. // url-loader配置 // build/webpck.base.conf.js { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', query: { limit: 10000, name: utils.assetsP

  • vue中配置mint-ui报css错误问题的解决方法

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢? 因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在web

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

    sentry简介 Sentry 是一个开源的错误追踪工具,可以帮助开发人员实时监控和修复系统中的错误.其专注于错误监控以及提取一切事后处理所需的信息;支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web来展示输出错误. sentry官网: https://sentry.io/ sentry安装 sentry 是一个开源的工具,可以自行搭建. 官方支持两种安装和运行 Sentry 服务器的方法, Docker 和 Python .推荐使用 Docker .

  • vue从使用到源码实现教程详解

    搭建环境 项目github地址 项目中涉及了json-server模拟get请求,用了vue-router: 关于Vue生命周期以及vue-router钩子函数详解 生命周期 1.0版本 1.哪些生命周期接口 init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed 2.执行顺序 1. 不具有keep-alive 进入: init->create->beforeCompile->

  • vue项目中使用tinymce编辑器的步骤详解

    Tinymce富文本也是一款很流行编辑器 把文件放在static下,然后在index.html文件中引入这个文件 <script src="static/tinymce/tinymce.min.js"></script> <tinymce :height=200 ref="editor" v-model="editForm.fdcNote"></tinymce> 在其他子文件中引入这个 import

  • vue 项目常用加载器及配置详解

    本文介绍了vue 项目常用加载器及配置详解,分享给大家,具体如下: 1.安装sass: 1.1 由于sass-loader依赖于node-sass,所以在安装sass-loader的同时还需安装node-sass npm install --save-dev node-sass npm install --save-dev sass-loader 1.2 安装完成后修改 <style>标签: <style lang="scss"></style> 2

  • 在vue项目中引入highcharts图表的方法(详解)

    npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个chart.vue组件 <template> <div class="x-bar"> <div :id="id" :option="option"></div> </div> </templa

  • vue项目添加多页面配置的步骤详解

    公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读

  • vue项目打包部署_nginx代理访问方法详解

    我又来了,今天部署了下vue项目,使用nginx做了代理,这样可以解决跨域的问题,这里做一个简单讲解. 1.先看vue项目打包(我这里使用的是vscode开发工具) 这里是我的项目结构: 打包之前需要修改如下配置文件: 配置文件一:build>>utils.js (修改publicPath:"../../" , 这样写是处理打包后找不到静态文件的问题) 配置文件二:config>>index.js(修改assetsPublicPath:'./' ,修改目的是为了

  • Spring boot项目部署到云服务器小白教程详解

    本篇文章主要介绍了Spring boot项目部署到云服务器小白教程详解,分享给大家,具体如下: 测试地址:47.94.154.205:8084 一.Linux下应用Shell通过SSH连接云服务器 //ssh 用户名@公网IP ssh josiah@ip // 输入密码 二.开始搭建SpringBoot的运行环境 1.安装JDK并配置环境变量 1) 打开JDK官网 www.oracle.com 2) 找面最新对应的JDK版本,下载 这里要注意的一个问题是:云服务器下载JDK时一定要在本地去ora

  • Vue前端整合Element Ui的教程详解

    目录 Vue前端整合Element Ui 1.安装Element Ui组件库 2.测试Element Ui是否整合成功 Vue前端整合Element Ui 本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库,一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助网站快速成型. Element Ui组件官网 1.安装Element Ui组件库 WIN+

  • HBuilder导入vue项目并通过域名访问的过程详解

    目录 一.什么是node.js 二.node.js和npm关系 三.导入项目 通常运行vue项目需要安装Node.js.通过npm命令来安装vue组件和运行vue项目. 一.什么是node.js node.js不是一门语言,不是库,不是框架,只是一个javeScript运行时环境 简单的就是node.js可以解析和执行javeScript代码,以前只有浏览器可以解析执行JaveScript代码, 现到的javeScript可以完全脱离浏览器来运行,一切都归功于node.js. nodejs构建于

随机推荐