前言作为程序员，每次自测全开发，还是会出现线上异常。如何快速发现或提前监控这些异常的发生？您需要错误监控系统吗？研究一个错误监控系统应该做到以下几点：当错误发生时，我们需要一些辅助信息来帮助我们更快地定位错误，比如JS错误类型，JS错误信息，JS错误堆栈，JS错误发生的位置以及相关地点的代码；JS错误发生概率、浏览器类型、版本号、设备型号等辅助信息。自主研发的技术解决方案。Fundebug、sentry、bat……由于我们前端不到10人，没有太多精力去搞基础设施的自研，一般掏钱的公司都舍不得花钱（你知道的），所以我们选择了更成熟的外国公司。计划哨兵[1]。Sentry有免费版、付费版和免费版。付费版和免费版其实差不多，免费版够我们用了，付费版他什么都能帮你搞定，你只需要安装sdk就可以了。sentry是一个实时事件记录和聚合平台。它专为监视错误和提取执行适当的事后分析操作所需的所有信息而设计，而无需使用标准用户反馈循环。Sentry是一个日志平台，分为客户端和服务端。客户端（目前客户端有Python、PHP、C#、Ruby等多种语言）嵌入在你的应用中间，程序向服务器发送异常。消息，服务器将消息记录到数据库中，并提供网页程序方便查看。Sentry使用python编写，源代码开源，性能优良，易于扩展。目前比较知名的用户有Disqus、Path、mozilla、Pinterest等。下图配置了多个功能项的功能项：,并且相同问题出现的次数将反映在末尾的数字中。然后管理员可以查看此问题并将其分配给其他成员。有些问题可以忽略或解决，然后它们就不会出现在你的列表中。还有自定义搜索：最多，上次，第一页等当前错误发生的url。浏览器名称、版本、ua。用户的设备信息，如小米MIMAX3android10.0ipxxx。用户的基本信息，比如name、userid等业务相关的，需要自己配置。如果页面有xhr信息，会显示请求信息响应状态码。划重点——遇到js错误时，会打印出调用栈、错误类型、错误发生文章。如果配置了sourcemap，可以清楚的定位到压缩和混淆前的那行代码。可视化内置各种维度的数据可视化。如果你不满意，它也提供了一些api，类似gitlab，github也会提供同样的api供二次开发使用。可以安装一些额外的报警插件，如钉钉机器人、邮件提醒等。安装部署安装方式PythonDocker这里使用docker来安装更简单的环境MIN_DOCKER_VERSION='1.10.0'//docker-vMIN_COMPOSE_VERSION='1.17.0'//docker-compose-vMIN_RAM=3072#MB//你的内存是至少3G一键生成官方在2019年提供了一键脚本生成方法，仓库在onpremise[2]。gitclonehttps://github.com/getsentry/onpremisecdonpremise./install.sh如果docker没有配置国内镜像，估计会很慢。让我提一下配置镜像。##有/etc/docker就忽略mkdir##没有/etc/docker/daemon.json就直接执行vim{"registry-mirrors":["https://mirror.ccs.tencentyun.com","http://registry.docker-cn.com","http://docker.mirrors.ustc.edu.cn","http://hub-mirror.c.163.com"],...}中间会有一个过程，让你配置管理员账号的密码，下载完成后执行。docker-comoseup-d配置好后，基本上整个安装过程应该不会出现什么大的问题。如果有问题，很可能是网络问题。手动安装准备docker-ceDocker-composeimagepulldockerpullsentrydockerpullredisdockerpullpostgresstartdockerrun-d--namesentry-redis--restart=alwaysredis###保证，异常自动拉起dockerrun-d--namesentry-postgres-ePOSTGRES_PASSWORD=secret-ePOSTGRES_USER=sentry--restart=alwayspostgres生成唯一秘钥dockerrun--rmsentryconfiggenerate-secret-key12345###打印出秘钥，最好复制这里接下来使用初始化创建admindockerrun-it--rm-eSENTRY_SECRET_KEY='12345'--linksentry-postgres:postgres--linksentry-redis:redissentry升级启动三个服务###web服务dockerrun-d-p9000:9000--namemy-sentry-eSENTRY_SECRET_KEY='12345'--linksentry-redis:redis--linksentry-postgres:postgres--restart=alwayssentry###cropn服务docker运行-d--namesentry-cron-eSENTRY_SECRET_KEY='12345'--linksentry-postgres:postgres--linksentry-redis:redissentryruncron###工作服务dockerrun-d--namesentry-worker-1-eSENTRY_SECRET_KEY='12345'--linksentry-postgres:postgres--linksentry-redis:redissentryrunworker开户密码为刚刚创建的管理员密码：配置后台地址，告警邮箱，其他功能：前端访问创建项目这里我们选择javascript项目名myapp，sentry后台有一个添加项目，然后在我们的前端项目中导入如下：//scriptimport//npmimport*asSentryfrom'@sentry/browser';import{Integrations}from'@sentry/tracing';Sentrydsnit:(',集成:[newIntegrations.BrowserTracing(),],tracesSampleRate:1.0,});这样整个过程就顺利了，可以用了。sourcemapupload众所周知，我们的线上代码是压缩过的，乱七八糟的。所以即使得到报错信息也只能靠猜测，所以需要配合souremap才能准确定位到报错信息。准备哨兵后端配置上传sourcemap的authToken，如下图勾选。下载webpack插件。npmi@sentry/webpack-plugin-D并在根目录中创建一个新的.sentryclirc。[defaults]###你的域名defaults.url='http://localhost:9000'###组织团队名默认为sentryorg=sentry###项目名project=myapp###在步骤1中创建[auth]token=1234配置插件。constSentryWebpackPlugin=require('@sentry/webpack-plugin');if(process.env.NODE_ENV!=='development'){//注意只在生产环境启用，否则npmrundev也会上传newSentryWebpackPlugin({release:Date.now(),//唯一标识，可以用其他的，比如hashinclude:'./build',//一些要上传的文件夹叫做distignoreFile:'.sentrycliignore',//不要忽略:['node_modules','config-overrides.js'],configFile:'.sentryclirc'//默认是同级的，如果不一样，需要使用节点路径模块来处理});}然后运行??npmrunbuild。创建优化的生产构建...>找到10个发布文件>分析10个源代码>重写源代码>添加源映射引用>捆绑10个文件以供上传>将发布文件上传到Sentry>文件上传完成恭喜，您的配置成功。其他常用API主动上报Sentry.captureMessage('Hello,world!');//上报信息Sentry.captureException(newError('再见'));//报告异常Sentry.captureEvent({//报告事件消息:'Manual',stacktrace:[//...],});配置用户信息Sentry.configureScope((scope)=>{scope.setUser({...data.userInfo,time:newDate().toLocaleString()});});其他邮件。钉钉机可以自己去下载一些插件配置。
