前端监控主要分为两个方面，第一个是异常监控，另一个是性能监控。

异常监控

异常监控是指如果前端页面在生产环境出现错误时，要进行监听、记录，并定位错误的位置，方便解决。

监听主要监听两类错误，一个是同步错误，error，另一个是异步错误，unhandledrejection，同时也是异常监控的本质。

window.addEventListener('error', (err) => {
    report(normalize(err))
});

window.addEventListener('unhandledrejection', (rejection) => {
    report(normalize(rejection))
});

记录一般是将错误存储到数据库里。

定位错误的位置一般要用到Sourcemap，简单来说，Sourcemap 维护了混淆后的代码行列到原代码行列的映射关系，通过错误的堆栈信息获取混淆后的JS行列号，再进一步就能够获得对应的原始代码的行列号，结合源代码文件便可定位到真实的报错位置。在生产环境的Web客户端是不包含Sourcemap的，主要是为了不暴露业务逻辑、减少网络请求数量、压缩传输体积，而是将Sourcemap上传到异常监控的后端服务上，用于进行真实的报错位置解析。

Sourcemap 的解析和反解析过程涉及到 VLQ 编码，它是一种将代码映射关系进一步压缩为类base64编码的优化手段。

将错误信息上传到后端服务上之后，形成一条条记录之后，还需要进行对错误记录进行聚合分类，将具有相同特征的错误上报，归类为统一一种异常，方便处理。

一些重要的错误信息，需要有报警通知机制，方便及时解决问题。

性能监控

包括访问日志、一些重要的性能指标记录，用户行为分析（访问偏好）等等

访问日志可以通过服务器的请求响应日志来获取，一般可以得到每天有多少用户访问量，用户访问量随时间的变化，请求流量字节数、响应流量字节数等信息

性能指标可以通过web-vitals库来获取并上报，可以获取每一条请求响应的各个重要性能指标，分析性能瓶颈

通过登录用户信息或者浏览器指纹技术分析某个用户或某类用户访问了哪些页面、点击了哪些按钮，页面停留时间等等

前端监控开源方案

Sentry

用的比较广的一个方案了，同时也有付费的服务，感觉比较中大型项目

我曾经按照教程，在本地服务器，用docker搭建一遍，下一步，下一步，发现它用了Redis和PostgreSQL数据库，还有三个主服务，我觉得我应该配置得没错，我在本地连接我自己部署服务的上报地址，发现不好使，然后我去Sentry网站注册了一个账号，然后改成了这个账号的上报地址，发现居然好使，也不知道为什么😂，也不太想查原因了，毁灭吧，算了。但有一说一确实功能比较完善，想要的功能基本都有。

Logan

美团开源方案

Logan 项目地址：https://github.com/Meituan-Dianping/Logan

感觉比较适合中大型项目

heimdallr-sdk

个人开发者开源方案

项目地址：https://github.com/LuciferHuang/heimdallr-sdk

感觉比较适合小微型项目

Node.js+MySQL，这个我熟呀！

正在尝试中。。。