跨平台应用开发进阶(三十七)uni-app前端监控方案 Sentry 探究_uniapp sentry

总结

前端资料汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。

• 算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！
  喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

首先，项目中安装vue依赖包@sentry/vue 和 @sentry/tracing。

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

接下来，在main.js中引入Sentry。

import Vue from "vue";
import Router from "vue-router";
import \* as Sentry from "@sentry/vue";
import { BrowserTracing } from "@sentry/tracing";

Vue.use(Router);

const router = new Router({
  // ...
});

Sentry.init({
  Vue,
  dsn: "http://0c07f83dfadd40c3aee1b5fcba80fd88@localhost:9000/4503901696688128",
  integrations: [
    new BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracingOrigins: ["localhost", "my-site-url.com", /^\//],
    }),
  ],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

// ...

new Vue({
  router,
  render: h => h(App),
}).$mount("#app");

其中，dsn通过以下方式获取项目的链接：

在项目的首页点击 install 会进入当前图示页面

复制 sentry DSN 到前端配置中

引用 sentry ，注入配置到应用中：

这里是以 react 为例，我们在 react 的根组建的 componentDidCatch 上面捕获错误，并且上传到我们监控系统中。

这里的我们用 sentry DSN 配置我们的 sentry 并且初始化 sentry 项目。

到这里我们基本，已经完成了我们的前端错误监控日志系统了。

四、sentry 操作界面介绍

项目操作页面：

1、项目的查看选项

Issue ： 问题列表

overview ： 概况纵览

userfeedback ： 用户反馈

Resleases ： 版本列表信息

setting ： 项目设置

2、问题筛选

包括 ： 指派自己的 、 标记列表 、需要分类的 、 今天的 、 未处理的

设置为 解决 、 忽略 、 合并 、标记 、实时监控

sentry 的api介绍和使用

1、javascript SDK 引用与配置
　　现在有两种方法引用 sentry SDK :

直接引用：
　　最快的方法就是通过 script 标签引用我们的 sdk

1

然后就是配置了。

1
Sentry.init({ dsn: ‘https://@sentry.io/’ });

npm 包引用：
　　首先是用添加包 @sentry/browser@4.4.1

yarn add @sentry/browser@4.4.1
引用到项目中，并且配置
import * as Sentry from ‘@sentry/browser’ ;
Sentry.init({ dsn: ‘https://@sentry.io/’ });

2、捕获事件
主动捕获错误或者异常
sentry 常见的是错误捕获，可以根据平台的不同来捕获错误，并且可以传递不同的错误信息。

try {
aFunctionThatMightFail();
} catch (err) {
Sentry.captureException(err);
}
Sentry.captureException( new Error( 'test' ))

捕获消息
另一种常见操作是捕获裸信息。消息只是应该发送给Sentry的一些文本信息。

Sentry.captureMessage( 'Something went wrong' );

3、初始化配置

sentry SDK 可以通过很多方式进行配置。

主要配置初始化配置的函数为 init() 方法，通过向 init() 方法传递参数对象;

Sentry.init({
dsn: 'https://<key>@sentry.io/<project>' ,
maxBreadcrumbs: 50,
debug: true ,
})

常用参数：

• DSN ：项目地址，用于收集错误信息的 sentry 分配的地址
• debug ：是否开启 debug 模式，开启debug，就会把信息打印到控制台上面
• release ： 代码的版本号,可以确定当前的错误/异常属于哪一个发布的版本,可以应用到 sourcemaps 来映射源码。
• environment : 环境名称
• sampleRate : 是否开启随机发送事件给 sentry ，1为100%，0.1 为 10%几率发送事件
• attachStacktrace ： 是否开启堆栈跟踪，开启后跟着消息一起收集
• beforeSend : 发送前操作

4、sentry 的api

• captureException(exception) : 捕获一个 js 异常，传入一个 exception 对象或者类对象。
• captureMessage(message,level) : 捕获一条信息，传入信息内容和信息级别
• captureEvent(sentryEvent) : 捕获一个事件，sentryEvent 是手动创建的，自定义的
• addBreadcrumb(Breadcrumb) ： 添加一个面包屑，以供接下里的捕获
• configureScope((scope)=>{}) : 设置 context 信息到 scope 上面
• withScope((scope)=>{}) : 设置一个零时的 scope 信息到 context 上面

5、context 上下文信息

上下文信息包括 ：user 、 tags 、 level 、fingerprint 、 extra data

这些信息我们可以通过在 scope 上面设置来定义。

其中可以通过两种方法得到 scope 。

// 将 scope 配置到 context 上面
Sentry.configureScope((scope) => { }); <br>
// 创建一个零时到 scope ，配置到 context 上面
Sentry.withScope((scope) => { });

User

scope.setUser({
id: '1' ,
username: 'xiao' ,
ip_address: '127.0.0.1' ,
email: 'test.doe@example.com' ,
});

通过 setUser 来设置 User 信息。

其中 user 可以设置的信息包括 id 、 username 、 ip_address 、email

Tags
　　tags 是给事件定义不同的键/值对，可以在查找的时候更容易。

后台查找的时候，查找选项会多出来一个选项，就是通过 tags 来设置的。

scope.setTag( "page\_local" , "de-at" );

通过 setTag 来设置了一个page_local 的标签。

后台会多一个 page_local 选项。包括 de-at

level
　　通过这个来设置事件的严重性。

包括：fatal 、error 、 warning 、 info 、 debug 。( fatal : 严重，error 错误，error 为默认 )

scope.setLevel( 'warning' );

通过 setLevel 来设置。

Fingerprint
　　指纹，通过指纹把信息分到不同的组中

Extra Data
　　传入额外的信息。并不会创建索引(也就是不可以提供来检索)。

scope.setExtra( "character\_name" , "Mighty Fighter" );

通过 setExtra 来设置。

6、Breadcurumbs 面包屑　　
　　面包屑用于记录一系列当行为，当下一次发生错误事件上传当时候会随着一起上报。

浏览器 javascript sdk 将自动记录所有当位置更改。

Sentry.addBreadcrumb({
category: 'auth' ,
message: 'Authenticated user ' + user.email,
level: 'info'
});

我们可以通过 addBreadcrumb 来添加一次行为记录。

7、user Feedback
　　用户反馈，sentry 提供了一个客户反馈当窗口。

当错误发生当时候，可以弹出窗口收集一些信息，例如：

用户名

用户当邮件地址

发生的问题的描述等。

Sentry.showReportDialog();
　　通过 showReportDialog 来实现框架的弹出。
　　
sentry实现预警并且邮件提醒

邮件预警和邮件提醒是在生产环境中不可缺少的一部分，只有有效的提醒来能让我们最快的解决问题。

在项目中选择 setting --> alerts 进入邮件预警设置页面。

这里都是基本的邮件规则。

在 tabs 中的 rule 可以自定规则。

规则设置：

• An event is seen ： 一个事件发生的时候
• An issue is first seen ： 第一个发生错误的时候
• An issue changes state from resolved to unresolved ：问题从解决到未解决的时候
• An event’s tags match {key} {match} {value} ： 匹配到 tags 的键值对的时候发送
• An issue is seen more than {value} times in {interval} ：在固定时间内出现次数匹配的时候
• An issue is seen by more than {value} users in {interval} ：在固定时间内出现用户的次数匹配的时候
• An event’s {attribute} value {match} {value} ： 匹配到某一个事件的时候
• An event’s level is {match} {level} ： 事件级别匹配的时候

sentry 生产的 sourcemap 配置
　　介绍
　　现在开发很多时候，我们的代码都会利用构建工具对代码合并、压缩、混淆等。

在产生这些生产代码的时候，为了利于我们开发调试、bug修复会产生一个 sourcemap 。

sourecmap 的主要作用就是将我们的打包的代码前后最了一个关联。

这里，sentry 对生产的 sourcemap 有很好的处理，它可以很快的让我们确定代码的错误位置。

准备工作
首先我们需要添加 sentry 的命令行的管理工具 sentry-cli

npm i -g @sentry/cli<br> // 上面的不行就用下面的
npm install -g @sentry/cli --unsafe-perm

获取认证的 token
选择API后就可以生成token，记得勾选 project:write 权限。

最后

我可以将最近整理的前端面试题分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

篇幅有限，仅展示部分截图：