工作多年，发现大家总会遇到这种特殊场景：用户反映某个功能异常。为了找出问题所在，我们尝试在本地重现异常，结果一无所获。另一方面，前端代码的运行环境，如PC浏览器、手机浏览器等，复杂且不可控。这意味着代码中可能会出现各种不可预知的错误。在这种情况下，如果我们想要有一个完整的前端异常监控系统，首先我们需要关注的是如何及时捕获异常，如何准确定位异常和错误的位置，以及收集异常后如何及时通知相关部门。人员？选择解决方案让我们来看看常见的前端监控解决方案。方案一：自研。具体工作主要是：自己重写Window对象中的onerror和onunhandledrejection方法，收集错误信息，通过服务器接口上传，编写服务器文件，使用Sourcemap文件还原源码排查问题。此外，还可以搭建异常信息查看平台。因此，自行开发的方法存在明显的缺陷，需要付出很大的努力。当然，自研也有便于扩展的优点，比如在前端监控中加入性能监控功能，方便后续页面的性能优化。方案二：使用成熟的第三方工具，如Sentry。这种方式不需要大量开发，只要接入配置足够即可。对于这两种方案，如果你没有那么多精力去研究，可以选择使用第三方工具。在成熟的第三方工具中，我推荐大家使用Sentry。因为Sentry是一个开源的bug跟踪工具，可以帮助我们实时监控和修复系统bug。此外，Sentry支持通过Sourcemap文件还原JS错误调用栈，收集到异常后还可以通过Telegram或邮件实时通知。还有一点很重要，Sentry允许我们在自己的服务器上构建私有服务，这意味着我们可以免费使用Sentry的强大功能，避免源代码泄露的风险。下图可以直观的展示Sentinel收集异常信息的效果。如何及时捕获异常？部署哨兵的第一步无疑是部署哨兵。由于官方推荐使用Docker进行部署，操作也比较简单，所以这里以Docker为例，介绍如何从零开始搭建Sentry服务。首先，我们安装Docker和Docker-Compose。安装完成后，启动Docker，拉取sentry-onpremise仓库代码，这是Sentry官方提供的安装程序，然后启动里面的安装脚本。同时，它会指导您创建管理员会员帐户并最终启动哨兵服务。相关命令可以参考这段代码：gitclonehttps://github.com/getsentry/onpremisecdonpremise./install.sh$docker-composeup-d如果启动过程没问题，在浏览器输入http://ip:9000进入哨兵登录页面，然后使用刚刚创建的管理员用户名和密码登录系统。前端项目接入经过刚才的一些操作，我们的哨兵服务器就完成了。接下来，我们可以在应用中集成哨兵客户端SDK，在前端代码中实时报错。Sentry非常强大，支持各种前端框架，如Vue、Angular、React等。我们都知道Vue是一个流行的前端轻量级框架，具有轻量级、高性能、组件化等优点。下面我就以Vue项目为例进行详细介绍。创建项目首先，我们点击哨兵页面左侧导航栏中的第一项Projects，然后点击页面右上角的CreateProject按钮。然后在Browser下选择Vue，再次点击CreateProject创建项目。接下来，你会看到Sentry给出的Vue项目的配置指南，它会一步步引导你完成项目的配置。然后我们继续看指南。首先通过npm在项目中安装Sentry依赖的两个npm包，即@sentry/browser和@sentry/integrations，然后在main.js中导入。然后，使用Sentry.init来初始化和配置Sentry。配置时，教程中已经提供了初始化代码，我们直接复制粘贴到main.js即可。最后我们点击向导底部的确认按钮，然后会自动跳转到本项目的Issue错误页面。这里需要特别注意的是，DSN地址是和项目一一对应的，不能随意更改。import*asSentryfrom'@sentry/browser'import{VueasVueIntegration}from'@sentry/integrations'Sentry.init({dsn:'https://xxxxxxxxxxxxxxxxx@sentry.in.cn/2',集成：[newVueIntegration({Vue,attachProps:true})]})检查现在，在Issue错误页面，我们看到只有一个空白表单，没有任何任务异常信息。让我们创建一个JS错误报告并查看Sentry的运行情况。首先，我们在App.vue创建的方法中添加一行代码：this.test()，调用一个当前组件不存在的方法，强制产生JS错误。通过ChromeDevTools中的Network可以看到每次刷新页面都会发送一个Sentry相关的Post请求，即Sentry收集异常信息。此时进入Issue报错页面，发现Sentry已经显示了捕获到的异常：我们知道Sentry将每一次异常上报都看作一个Event，每一个Event都有一个Fingerprint。指纹默认由哨兵的分组算法生成。具有相同指纹的事件会自动合并为一期。具体的生成逻辑可以查看官方文档：https://docs.sentry.io/product/data-management-settings/event-grouping/通过问题列表，我们可以得到如下信息：异常类型，异常名称、触发位置、最近触发时间、首次触发时间等。点击进入问题详情页面，在页面中间区域可以看到最新Event的具体信息，比如用户IP地址，浏览器信息、系统信息、异??常调用栈信息等，如何准确定位异常错误的位置？现在，我们看到哨兵已经捕获了异常调用堆栈信息。但是由于网上的代码是经过压缩和混淆处理的，要知道是哪一行代码报错，只能全局搜索关键字，然后根据压缩代码的上下文来定位。那么如何查明错误信息呢？首先我们在Sentry后台配置AuthToken，这是配置和上传Sourcemap的必要参数。那么如何创建这个Token呢？我们点击页面左上角的用户名，在下拉菜单中找到UserSettings，点击进入用户设置界面，然后点击AuthTokens菜单选项新建一个Token。接下来，我们在构建和编译代码时启用Sourcemap配置，然后在根目录中新建一个.sentryclirc文件。最后在项目中下载并安装Webpack插件@sentry/webpack-plugin，在打包配置文件中添加上传Sourcemap到Sentry的配置。具体配置请参考这段代码：[auth]token=xxxxxxxxxxxx[defaults]project=xiaoan-weborg=sentryurl=https://sentry.xxxxx.com/viewraw这里的Release属性对应代码版本。Sentry在收集异常信息时，会同步收集用户的代码版本信息。有了这些信息，我们就可以知道是哪个版本导致了新问题。需要注意的是，UrlPrefix属性的取值并不是固定的，而是与项目的静态资源访问路径有关。constSentryWebpackPlugin=require('@sentry/webpack-plugin')constcommitHash=require('child_process').execSync('gitrev-parseHEAD').toString();newSentryWebpackPlugin({包括：path.resolve(__dirname,'../dist/static/js/'),ignoreFile:'.sentrycliignore',忽略:['node_modules','webpack.config.js'],release:commitHash,urlPrefix:'~/static/js'//https://ip.com/static/js/app.js})配置完成后，Sentry可以根据上传的Sourcemap恢复代码位置：收集异常后如何及时通知相关人员？当哨兵捕捉到异常时，我们希望它能实时通知开发者。在这种情况下，哨兵提供了邮件通知功能，只需在哨兵配置文件中添加相关配置即可。由于查看邮件可能不够及时，如果你的团队使用Telegram进行协同工作，你可以尝试使用第三方Telegram插件，可以上网搜索使用方法。结语以上就是今天的全部内容，希望大家喜欢，如果觉得有用，记得点赞，关注我，分享给你的朋友，说不定能帮到他。最后，感谢阅读，祝编程愉快！
