前端监控

1 背景

前端监控系统都需要监控什么？对于前端的监控主要分为三个方面

性能监控
异常监控
数据监控

三种监控可以覆盖大部分的场景，前端在加载时，资源的消耗，运行过程中产生的问题，需要排查的数据等等。

1.1 性能监控

监听前端的性能，主要包括监听网页或者说产品在用户端的体验。常见的性能监控数据包括：

不同用户，不同机型和不同系统下的首屏加载时间
- 白屏时间
- http等请求的响应时间
- 静态资源整体下载时间
- 页面渲染时间
- 页面交互动画完成时间

1.2 异常监控

Javascript的异常监控
样式丢失的异常监控

1.3 数据监控

监听用户的行为。常见的数据监控包括：

PV/UV: PV(page view)，即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数
用户在每一个页面的停留时间
用户通过什么入口来访问该网页
用户在相应的页面中触发的行为

2 现有解决方案

Sentry

Link github.com/getsentry/s…

feature

国外的监控平台，支持vue的npm包安装，方便快速
支持性能监控，可以快速识别JavaScript性能问题
支持错误监控，支持查看数据堆栈跟踪、sourceMap，以及源码的隐私性
问题的追溯，可以根据DOM事件、控制台日志和请求调用等context，进行可视化回放
交互，错误发生时，可以提示用户进行反馈，可以将用户的体验与数据进行比较。
支持私有化部署，需要自己搭建（有docker镜像可用）
需要将对应的域名在sentry上注册，需要外网，不方便且有数据暴露的风险

功能架构

参考

官方文档：docs.sentry.io/

fundebug

Link docs.fundebug.com/

feature

可以在文件中使用scrpit 引入；
自动捕获未处理的错误；
能够捕获3种不同的前端错误：JavaScript执行错误，资源加载错误和HTTP请求错误。
出错场景完全可视化重现，相当于"录屏"；
支持通过Source Map还原出错源代码
记录出错前的鼠标点击、HTTP请求、页面跳转、console打印等用户行为，帮助您复现BUG
支持收集try/catch捕获的错误；
兼容所有浏览器包括IE 6到 IE 11；
兼容所有前端开发框架，例如Vue.js，React，AngularJS，Angular 2，Angular 4，Ionic 1，Ionic 2，Cordova，GitBook等；
免费版本功能不够用，升级付费版本费用高。

Webfunny

Link www.webfunny.cn/webfunnyMon…

feature

docker私有化部署
1. 健康状态，PV/UV、报错、用户分布等。
2. 支持sourceMap源码定位。
3. 记录用户的所有行为
4. 连接线上任意用户，实时查看行为和缓存数据变化。
5. 分析页面和接口性能，加载耗时，成功率。
6. 自定义埋点
7. 价格较贵

参考

juejin.cn/post/702780…

bedJS

github.com/BetterJS/do…

FontJS、Bugly

对比

框架	特点	劣势	开源	网站
Sentry	商业版与开源版可以自行选择商业版优点：省事，只需要配置就好了，但是有限额开源版优点：本地部署，数据私有，商业版和开源版功能讲都差不多很多大小厂都在用，社区丰富，资源多，	阅读英文文档需要自己踩坑	是	github.com/getsentry/s… docs.sentry.io/
fundebug	国产，提供免费版	私有化部署价格离谱，一年30万起	否	docs.fundebug.com/
Webfunny	国产，支持本地部署，	免费版/分享版可用时间短	否	www.webfunny.cn/desMonitor
Badjs	支持本地部署，支持集群，支持docker，支持存储数据到mongodb	项目多年不维护文档最新更新是在5年前	是	github.com/BetterJS/do… badjs.mangoerp.com/

3 扩展

3.1 异常介绍

JavaScript的错误类型，ECMA-262 定义了 7 种错误类型，说明如下：

Error：普通异常，通常与 throw 语句和try/catch 语句一起使用，利用属性 name 可以声明或了解异常的类型，利用message 属性可以设置和读取异常的详细信息。
EvalError：Eval 函数执行异常。
SyntaxError：语法解析不合理，即语法错误。
RangeError：在数字超出合法范围时抛出，比如数组下标越界就会报这种错误。
ReferenceError：在读取不存在的变量时抛出，比如没定义变量 a，后面却使用这个变量 a，就会报这种错。
TypeError：当一个值的类型错误时抛出该异常，比如传递给函数的参数与预期的不符，就会报这种错误。
URIError：以一种错误的方式使用全局 URI 处理函数而产生的错误

3.2 监控流程

前端埋点 -> 数据上报(本地化indexDB) -> 加工汇总 -> 可视化展示 ->监控报警

3.3 数据发送方式

前端捕获异常分为全局捕获和单点捕获。全局捕获代码集中，易于管理；单点捕获作为补充，对某些特殊情况进行捕获，但分散，不利于管理，容易遗漏。在项目开发过程中，定义一个错误捕获模块，将项目所有的异常（全局异常和单点异常）都交给错误模块来统一处理，这就需要项目约定。

3.4.1 image方式

将监控信息作为image的scr属性上传至服务端

3.4.2 Beacon方式

Navigator.sendBeacon(url,data)

优点：不会占用资源，在浏览器空闲时间发送，不会对业务代码造成阻塞。

缺点：有兼容性问题

4 Sentry

4.1 部署与启动

Docker 19.03.6+ 和 Compose 1.24.1+

Compose 是用于配置和运行多 Docker 应用的工具，可以通过一个配置文件配置应用的所有服务，并一键创建和运行这些服务。

4.1.1 环境安装步骤

windows 安装 wsl
- wsl --install
- 安装过程中会让你提供Ubuntu 的账户和密码，这将是打开wsl后的账号和密码
测试wsl安装成功
- wsl -l
- 会出现 Ubuntu 的安装列表
docker
- 从官网下载windows的安装包，傻瓜式安装即可，
- 不用考虑Docker-Compose，因为Docker的desktop版本已经包含在内了
与系统关联
- 安装好后，启动docker，在setting中，有个 Resources（资源），在其中找到 WSL integration 选项，将 Enable integration with additional distros: 开启，选择 Ubuntu，让wsl可以找到docker
进入系统
- 在powershell中输入 wsl，进入系统
安装git
- sudo apt update
- sudo apt install git
- 运行下面的命令，打印 Git 版本，验证安装过程：
- git --version
拉取含有Docker镜像的源码
- cd到用户的根目录 cd ~/
- 创建 project文件夹，方便项目的管理 mkdir project
- 进入该文件夹，拉取代码
  - cd project
  - git clone https://github.com/getsentry/self-hosted.git
  - 切换到最新的tag分支上，不要在master分支上运行，不然在最后会跑不起来
- 进入到 self-hosted 文件夹内，执行 sudo ./install.sh
在运行过程中，会问你是否需要将一些数据上传至 sentry.io时候，考虑到项目涉及到敏感数据，不要上传，选择 n
在此后，还会继续问一下 Would you like to create a user account now?，是否需要创建一个Docker的用户，此时可以选择创建，
完成之后，执行提示的语句：docker compose up -d
再就可以在docker的container中看到 sentry 的容器了，启动容器，在http://127.0.0.1:9000/ 就可以看到我们启动的后台了

4.2 在Vue中使用

4.2.1 Install

`npm install --save @sentry/vue`

4.2.2 Vue 3

mian.ts

import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";

const app = createApp({
  // ...
});
const router = createRouter({
  // ...
});

Sentry.init({
  app,
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
  integrations: [
    new Sentry.BrowserTracing({
      routingInstrumentation: Sentry.vueRouterInstrumentation(router),
      tracePropagationTargets: ["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,
});

app.use(router);
app.mount("#app");

vite.config.ts

import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { sentryVitePlugin } from "@sentry/vite-plugin";

const sentry = (env) => {
  return process.env.NODE_ENV === 'production'  ?
    sentryVitePlugin({
      uploadSourceMaps: true,
      ignore: ["node_modules", "vite.config.ts"],
      org: "zbai",
      project: "vue-vite-test-1",
      url: 'http://127.0.0.1:9000/',
      authToken: env.VITE_SENTRY_AUTH_TOKEN,
      sourcemaps: {
        assets: "./dist/**",
      },
      release: env.VITE_SENTRY_RELEASE,
    }) : null
}
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd()); // 获取.env文件里定义的环境变量
  return {
    build: {
      sourcemap: true, 
    },
    plugins: [
      vue(),
      sentry(env),
    ],
  };
});

4.2.3 常用功能配置

4.2.3.1 开启 replay

// main.ts
 Sentry.init({
    app,
    dsn: "http://yourdsnCode@127.0.0.1:9000/2",
    environment: import.meta.env.VITE_SENTRY_ENV,
   	// 开始
    replaysSessionSampleRate: 0.1,
    replaysOnErrorSampleRate: 1.0,
    integrations: [
      new Sentry.Replay(),
      new Sentry.BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
        tracePropagationTargets: ["localhost", "my-site-url.com", /^\//],
      }),
    ],
    tracesSampleRate: 1.0,
    // 结束
});

4.2.3.2 使用环境变量

// main.ts
 Sentry.init({
    app,
    dsn: "http://yourdsnCode@127.0.0.1:9000/2",
   	// 开始
   	environment: import.meta.env.VITE_SENTRY_ENV,
    // 结束
});

4.2.3.3 开启 sourceMap上传

// vite.config.ts
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";
import { sentryVitePlugin } from "@sentry/vite-plugin";
const sentry = (env) => {
  return process.env.NODE_ENV === 'production'  ?
    sentryVitePlugin({
      uploadSourceMaps: true, // 是否上传
      ignore: ["node_modules", "vite.config.ts"],
      org: "zbai", // 组织的名称
      project: "vue-vite-test-1", // 项目的名称
      url: 'http://127.0.0.1:9000/', // 项目部署的服务端的地址
      authToken: env.VITE_SENTRY_AUTH_TOKEN, // token
      sourcemaps: { // sourceMap生成后所在的文件夹
        assets: "./dist/**",
      },
      release: env.VITE_SENTRY_RELEASE, // 版本
    }) : null
}

export default defineConfig(({ command, mode }) => {
  //参数mode为开放模式或生产模式
  //console.log(mode);  // development or product
  const env = loadEnv(mode, process.cwd()); // 获取.env文件里定义的环境变量
  return {
    build: {
      sourcemap: true, // Source map generation must be turned on
    },
    plugins: [
      vue(),
      sentry(env),
    ],
  };
});

4.3 模块

4.4.1 Issues --- 问题

问题页面显示应用中的错误和性能问题的信息。

可以通过属性进行过滤，如浏览器、设备、受影响的用户，或者一个错误是否未被处理，可以检查问题的细节。

4.4.2 Projects --- 项目

项目代表在Sentry中的服务或应用

当第一次开始使用Sentry时，可以为一个服务创建一个项目，并选择特定的语言或框架。可以根据需要添加更多的项目，

在显示 "问题流 "和 "发现 "视图时，顶层过滤栏默认考虑所参加的项目。这样，所看到的是与你的工作直接相关的信息。

项目与环境不同，环境是为了帮助分流问题，特别是在多阶段的发布过程中。

4.4.3 Performance Monitoring --- 性能监控

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

Sentry 捕获由事务和跨度组成的分布式跟踪，以测量单个服务和这些服务中的操作

性能页面是sentry.io的主要视图，可以在这里搜索或浏览事务数据。

一个事务代表了你想测量或跟踪的活动的一个单一实例，如页面加载、页面导航或一个异步任务。

页面显示的图表可以查看交易或趋势，还有一个表格

4.4.4 Session Replay --- 会话回放

会话回放会展示用户会话的类似视频的再现，可以看到在错误或性能问题发生之前、期间和之后发生了什么。

对问题获得更深入的调试背景，这样就可以更快地重现和解决问题，而不需要猜测。当回放每个会话时，可以看到与网络请求、DOM事件和控制台信息有关的每个用户互动。这实际上就像在生产用户会话中使用DevTools一样。

回放与Sentry产品的其他领域相结合，所以你可以看到用户体验是如何被错误和缓慢的事务影响的。与错误事件相关的回放会出现在问题详情页面，而那些显示缓慢交易的回放会出现在交易摘要页面。

4.4.5 Alerts --- 警报

警报提供了对代码的问题和对用户的影响的实时可见性。有几种类型的警报，可定制阈值和集成。

在sentry.io的警报页面，你可以创建新的警报规则并管理现有的规则。警报规则 "标签显示你现有的警报规则，以及它们的当前状态、项目、团队和创建日期。默认情况下，该列表是经过过滤的，因此只显示与你所在的团队相关的警报，以及与任何团队无关的警报。你可以使用过滤按钮来改变这一点。

4.4.6 Discover --- 发现

该功能只有在采用商业计划或试用计划时才可用，但 "所有活动 "的预建查询除外，该查询在团队计划或更高版本中可用。

发现功能通过建立和丰富错误数据，提供数据在不同环境中的可见性。

可以查询和解锁对整个系统健康状况的洞察力，并获得关键业务问题的答案

4.4.7 Dashboards --- 仪表盘

Sentry的仪表盘通过允许浏览多个项目的错误和性能数据，提供了一个关于应用程序健康状况的广泛概述。

仪表盘是由一个或多个小部件组成的，每个小部件都能显示一个或多个Discover查询。

同一视图中的所有部件都反映了日期时间范围过滤器中指示的日期范围，如果更新该日期范围，则同步更新。

也可以放大你可能想要调查的任何时间序列的可视化，所有的小工具都反映你放大的时间段。

4.4.8 Releases --- 版本

是代码的一个版本，部署在一个环境中。当通知了Sentry一个版本时，可以很容易地识别新的问题和回归情况，确定一个问题是否在下一个版本中得到解决，并应用sourceMap或其他映射文件。

发行版页面提供了发行版的可视化信息。展示了过去24小时内发布的采用情况，并提供了一个高层次的视图：

每个发布版本（没有哈希值的发布名称的简短版本）
- 相关的项目
  - 每个版本的采用阶段
    - 每个提交的作者
    - 无崩溃用户的百分比
    - 无崩溃会话的百分比

通知Sentry一个版本可以自动发现哪些提交与一个版本相关联，并在sentry.io中搜索时确定我们认为的 "最新版本"。

每个版本链接到一个或多个项目。如果一个版本有多个项目，Sentry将复制与每个项目有关的版本数据。

当完全配置好后，版本提供了重要的附加功能：

确定新版本中引入的问题和回归情况
- 预测哪个提交导致了一个问题，以及谁可能是责任人
  - 通过在提交信息中加入问题编号来解决问题
    - 当代码被部署时收到电子邮件通知

4.4.9 User Feedback --- 用户反馈

虽然事件数据收集应用程序中的错误信息，但获得任何额外的有用的反馈对于确定问题的根本原因是至关重要的。

Sentry提供了通过用户反馈来收集额外信息的能力。

4.4.10 Stats --- 统计数据

统计数据

统计数据页面有三个标签：使用情况、问题、健康状况。

"使用情况"选项卡显示了组织的事件和附件的使用情况，同时也提供了不同项目如何使用Sentry的高级概览

"问题"选项卡显示了分配给团队的问题以及他们是如何分流这些问题的，

"健康"选项卡则提供了团队的项目健康状况概览。

4.4.11 Settings --- 设置

账户、组织、文档、支持、API秘钥等设置选项

4.4 一些功能

性能

追溯 Vue的组件

在启用 component tracking 后，可以在 transactions 中看到代表组件生命周期事件和持续时间的跨度，可以做一些比如识别缓慢的初始化或频繁的更新，对应用程序的性能产生影响的一些判断。默认为false。

初始应用的负载检测

Vue SDK会在初始页面加载时跟踪你的应用程序（即其根组件）的渲染性能。这个操作在页面加载事务中由ui.vue.render span表示

生命周期监控

控制哪些生命周期钩子应该被跟踪。

组件渲染超时

配置超时时间，重新渲染时，会重新计时

常用参数

配置采样率

配置错误事件的采样率，范围在0.0到1.0之间。默认值是1.0，意味着100%的错误事件被发送。如果设置为0.1，只有10%的错误事件会被发送。事件是随机挑选的。

附加堆栈跟踪（attachStacktrace）

这个选项默认是关闭的，启用后，堆栈跟踪会自动附加到所有记录的消息上。堆栈跟踪总是附在异常上；但是，当这个选项被设置时，堆栈跟踪也会与消息一起发送。例如，这个选项意味着堆栈痕迹出现在所有日志消息的旁边。

忽略错误

匹配这些字符串或正则表达式的信息将在发送至Sentry之前被过滤掉。

支持钩子

beforeSend

用SDK特定的消息或错误事件对象来调用的，可以返回一个修改过的事件对象，或者返回null来跳过报告事件。

beforeSendTransaction

用SDK特定的交易事件对象来调用的，它可以返回一个修改过的交易事件对象，或者返回null来跳过报告该事件

beforeBreadcrumb

在面包屑被添加到作用域之前，该函数被调用，并带有SDK特定的面包屑对象。当该函数没有返回任何信息时，面包屑就会被丢弃。

HttpContext

HTTP请求信息，如URL、user-aHTTP请求信息，如URL、user-agent、referrer和其他标头附加到事件中。它使我们能够正确地对事件进行编目并标记特定的操作系统、浏览器和版本信息

Release

支持版本，需要配置

前端监控--多框架对比，本地化部署Sentry细节

前端监控

1 背景

1.1 性能监控

1.2 异常监控

1.3 数据监控

2 现有解决方案

Sentry

Link github.com/getsentry/s…

feature

功能架构

参考

fundebug

Link docs.fundebug.com/

feature

Webfunny

Link www.webfunny.cn/webfunnyMon…

feature

参考

bedJS

FontJS、Bugly

对比

3 扩展

3.1 异常介绍

3.2 监控流程

3.3 数据发送方式

3.4.1 image方式

3.4.2 Beacon方式

4 Sentry

4.1 部署与启动

4.1.1 环境安装步骤

4.2 在Vue中使用

4.2.1 Install

4.2.2 Vue 3

4.2.3 常用功能配置

4.2.3.1 开启 replay

4.2.3.2 使用环境变量

4.3 模块

4.4.1 Issues --- 问题

4.4.2 Projects --- 项目

4.4.3 Performance Monitoring --- 性能监控

4.4.4 Session Replay --- 会话回放

4.4.5 Alerts --- 警报

4.4.6 Discover --- 发现

4.4.7 Dashboards --- 仪表盘

4.4.8 Releases --- 版本

4.4.9 User Feedback --- 用户反馈

4.4.10 Stats --- 统计数据

4.4.11 Settings --- 设置

4.4 一些功能

性能

追溯 Vue的组件

初始应用的负载检测

生命周期监控

组件渲染超时

常用参数

配置采样率

附加堆栈跟踪（attachStacktrace）

忽略错误

支持钩子

beforeSend

beforeSendTransaction

beforeBreadcrumb

HttpContext