常见监控方案

  • Sentry：一个开源的、实时的错误监控平台。功能全面、一站式解决方案、多端支持。强烈推荐！！！

  • Web-See：前端监控 SDK，可用来收集代码报错、性能数据、页面录屏、用户行为、白屏检测等个性化指标数据并上报。支持多种错误还原方式：定位源码、播放录屏、记录用户行为

  • WebTracing：一个基于 JavaScript 的埋点 SDK。为你的前端项目提供【 行为、性能、异常、请求、资源、路由、曝光、录屏 】监控手段

演示地址

项目实践

思路

  • 优先看 Web-See 文档

  • 使用 Vite + React 创建项目，复刻 Web-See-Vue-Demo

  • 不上报错误，把报错信息存储到 IndexDB 中，通过 idb-keyval 操作 IndexDB

  • 线上出现问题时，下载 IndexDB 中的数据，在后台管理平台中导入并查看问题

项目介绍

  • 从 项目地址 拉取示例代码，通过 pnpm install 安装依赖

  • 核心文件是 src/monitor，里面封装了写入数据到 IndexDB 的方法，以及下载数据到本地的方法

  • 由于 IndexDB 存储数据大小有限制，所以在写入数据时，会先判断 数据是否过期，再判断 数据是否超出大小限制，超出限制时，先删除最旧的数据，再写入新的数据

在项目中接入监控

  • 拷贝 src/monitor 文件夹到自己项目中，并修改相关配置

  • 在 src/main.tsx 中引入 src/monitor/index.ts

  • 安装所需依赖

    1
    2
    3
    4
    5
    6
    7
    # web-see 相关包
    pnpm i @websee/core
    pnpm i @websee/performance
    pnpm i @websee/recordscreen

    # idb-keyval
    pnpm i idb-keyval

  • 在控制台输入 await window.monitor.download() 导出数据

  • 在控制台输入 window.monitor.clear() 清空数据