Sentry前端异常监控
Published in:2023-06-28 | category: 前端 监控

前言

起初神创造天地,天地处于一片混沌状态,神说,要有光,于是便有了光。———《圣经》

概述

Sentry是一款国外的异常监控开源服务,名字翻译过来就是“哨兵”。
有没有感觉像《冰与火》里的守夜人,其实也差不多,把 bug 想成异鬼就行了。

对于任何一个项目而言,本地测试肯定做不到 100%覆盖,而且,我们也不能保证用户能按照我们的预期进行操作,其实对我而言,用户才是最好的测试者,但是我们不能奢求每个用户遇到问题时候都会主动向我们反馈。

故而,我们需要在项目出现异常时主动对其进行收集上报,分析原因和影响后制定下一步解决方案。

配置

1、首先访问官网https://sentry.io注册账号
2、创建项目
image.png

选择你用的前端框架
image.png

1
2
3
4
5
6
7
8
//下面是vue的安装方式,其他框架安装指示做就可以了
# Using yarn
yarn add @sentry/browser
yarn add @sentry/integrations

# Using npm
npm install @sentry/browser
npm install @sentry/integrations

注意下面的配置最好在 production 环境配置,否则会影响 debug

1
2
3
4
5
6
7
8
9
//main.js配置
import Vue from "vue";
import * as Sentry from "@sentry/browser";
import * as Integrations from "@sentry/integrations";

Sentry.init({
dsn: "https://214bbc6a0a66455d********51357ef6@sentry.io/1827364",
integrations: [new Integrations.Vue({ Vue, attachProps: true })],
});

结语

不同平台接入异常监控 Sentry SDK

接入 SDK 这个再单独写成文章。或者也可以参考接入文档
uniapp 接入 Sentry

最后奉上效果图
image.png

bug 复现步骤
image.png

Prev:
钓鱼网站
Next:
sentry - sourceMap