学习记录之vue+sentry 前端错误监控 以及sentry详细使用

Sentry?

开源的实时错误追踪工具,可以帮助开发人员实时监控和修复系统中的错。

注册及创建项目。

在官网注册完成后选择vue, 创建项目(这些网上都有就不详细讲了),创建项目之后会出现详细步骤

安装:

npm install --save @sentry/vue @sentry/tracing

配置:

​
import * as Sentry from "@sentry/vue";import { Integrations } from "@sentry/tracing";

Sentry.init({

  Vue,

  dsn: "xxxxxxx",  //这里的配置参数在sentry上创建完项目会自动给出

  integrations: [

    new Integrations.BrowserTracing({

      routingInstrumentation: Sentry.vueRouterInstrumentation(router),

      tracingOrigins: ["localhost", "my-site-url.com", /^\//],

    }),

  ],  tracesSampleRate: 1.0,});

​

然后就可以在sentry的issues中查看错误报告了

但是由于项目是webpack打包过的,在错误报告中不知道错误具体出现在哪个组件的哪一行,所以需要上传Sourcemap,怎么上传可以看这个https://www.cnblogs.com/qiezuimh/p/11440506.html,也可以自己去搜下

Sentry支持自动收集和手动收集两种错误收集方法,sentry提供的api中有手动上传,这篇文章详细介绍了sentry提供的api的用法,感兴趣可以看下https://zhuanlan.zhihu.com/p/205144885

重点来了  sentry各个模块的功能

1. Issuse————问题

问题页面显示有关应用程序中错误的信息

代码是webpack打包后的,所以错误日志无法定位具体出错代码的位置。想看到具体的报错信息,需要上传sourcemap文件。

 

2. Performance————性能 

通过性能监控,Sentry 跟踪应用程序性能,测量吞吐量和延迟等指标,并显示跨多个服务的错误影响。

在 Performance 列表我们可以看到不同接口的加载时长,TPM(每分钟平均事务数)、p50(表示 50% 的事务持续时间大于阈值)、p95(表示 5% 的事务持续时间大于阈值)等数据,可以按照响应时长进行排序,从而可以评估我们不同接口的性能,对响应比较慢的接口进行优化。


使用此页面上的信息,您可以通过服务(例如,前端到后端)追溯问题以识别性能不佳的代码。这让您可以回答诸如您的应用程序性能是变好还是变差、您的上一个版本的运行速度是否比以前的版本慢或哪些特定服务变慢等问题。然后您可以开始解决降低性能的代码。

安装依赖包:

npm install --save @sentry/tracing

配置采样率

  1. 使用tracesSampleRateSDK 配置中的选项为所有事务设置统一的采样率,设置为0和之间的数字1。(例如,要发送 20% 的交易,请设置tracesSampleRate为0.2。)
  2. 通过向tracesSamplerconfig 选项提供一个函数,根据事务本身和捕获它的上下文来控制采样率。

这两个选项是相互排斥的。如果两者都设置,tracesSampler则优先。

Sentry.init({

  Vue: Vue,

  dsn: "xxxx",

  integrations: [new Integrations.BrowserTracing()],

  tracesSampleRate: 0.2  //采样率

  tracesSampler: samplingContext => { ... }});

在进行测试时,设置tracesSampleRate为1.0,因为这可确保每笔交易都将发送到 Sentry。

3. Releases————发布(版本)

一个版本是你的代码部署到环境中的一个版本。当您通知 Sentry 发布时,您可以轻松识别新问题、回归、问题是否在下一个版本中得到解决,并应用源映射

每个版本都链接到一个项目。如果一个发布有多个项目,Sentry 将复制与每个项目相关的发布数据。数据将显示最近 24 小时内发布的采用情况。

4. Alerts————警报

可以创建新的警报规则并管理现有的规则。“警报规则”选项卡显示您现有的警报规则,以及它们的当前状态、项目、团队和创建日期。

Alert rules————警报规则(只要项目中的任何问题符合指定标准,就会触发问题警报

History————历史记录(找到类似的信息的度量警报的列表,当它被触发,多长时间是活跃的。)

可以创建两种类型的警报:

问题警报:当问题(一组错误事件)符合特定条件时触发。

指标警报:当错误或交易事件的宏观指标超过特定阈值时触发。

5. Discover————发现

Discover 通过构建和丰富您的错误数据,提供跨环境数据的可见性。您可以查询和解锁对整个系统健康状况的洞察,并在一个地方获得关键业务问题的答案。每个查询都保存为一张卡片,显示数据的汇总视图。带有哨兵头像的查询卡是预先构建的,无法移除。带有用户头像的查询卡表示已保存的查询。创建已保存查询的用户将在查询卡上显示他们的头像。保存的查询是通过组织中的任何人都可见和不作用域到用户的账户。

构建新查询

从发现主页,您可以通过三种方式构建查询。

        1.单击“构建新查询”

        2.单击现有已保存查询卡的省略号以“复制”

        3.进入任何现有查询

                点击右上角的“另存为...”

                输入显示名称,选择查询条件

                点击“保存”

6. Dashboards————仪表盘

仪表板是对整个组织中错误的各种数据可视化,包括错误图形、地理映射和浏览器列表。

仪表板允许您浏览跨多个项目的错误和性能数据,从而为您提供应用程序运行状况的广泛概览。仪表板由一个或多个小部件组成,每个小部件可视化一个或多个Discover 查询

默认仪表板包括以下小部件:

错误数:显示您的错误总数。

问题数量:显示您拥有的问题总数。

所有事件:显示所有错误、事务等。

受影响的用户:将已知用户与未知用户进行比较。

已处理与未处理:将已处理的错误与未处理的错误进行比较。

Errors by Country:显示错误频率的世界地图。

浏览器错误:按浏览器名称比较错误数。

 创建仪表盘

        单击“创建仪表板”会将您带到一个新的仪表板,您可以在其中立即开始添加小部件。当您创 建新仪表板或编辑现有仪表板时,小部件会略微变灰。从这里,您可以:

        重命名仪表板

        添加和删除小部件

        重新排列现有小部件

当您添加小部件或编辑现有小部件时,系统会提示您显示表格和可视化预览。从这里,您可以:

        重命名小部件

        更改查询

        提供图例别名

        更改 Y 轴

该表单包括以下字段:

        小部件名称:显示在每个小部件顶部的名称。

        可视化显示:选定的可视化类型

        查询:定义您要调查的内容的搜索参数。添加其他查询以比较项目、组织、版本等。每个查询都有一个图例别名,您可以命名以在任何时间序列图表中更轻松地查看。有关如何构建查询的更多信息,请查看我们为Discover Query Builder制定的一些规则。

        Y 轴:要映射的搜索参数的属性。默认情况下,count() 被选中。将此更改为持续时间会将 Y 轴更改为毫秒或秒。添加叠加层将添加另一组数据进行比较。例如,要反映 P50、P75 和 P90,您需要三个叠加层。如果单位冲突,图表将始终以第一行为基础。

公司项目要用到,由于英语不好所以记录下

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值