接入网站。众所周知，前端异常监控在实际生产环境中越来越重要。通过将前端异常监控系统接入网站，我们可以获得以下好处：收集页面错误信息，辅助定位代码错误位置，在用户报错前发现问题。这有助于提高在线系统的质量，减少在线失败的次数。意义重大。与等待用户反馈故障相比，通过接入异常监控系统，可以变被动为主动，缩短在线故障处理的流程和时间。前端异常监控方案badjsfundebugSentry上面有几种比较流行的异常监控方案，但是考虑到易用性，是否免费，项目是否开源，个人认为Sentry是一个很好的选择和部署服务器也很简单。当然服务端也可以直接使用Sentry提供的。网站客户端可以导入sentrysdk，插入代码初始化sentry，监控页面脚本异常。Sentry部分安装Dockersudoyumremovedockerdocker-commondocker-selinuxdocker-enginesudoyuminstall-yyum-utilsdevice-mapper-persistent-datalvm2sudoyum-config-manager--add-repohttps://download.docker.com/linux/centos/docker-ce.repoyum列表docker-ce--showduplicates|sort-rsudoyuminstalldocker-cesudosystemctlstartdockersudosystemctlenabledockerDocker安装Sentry拉取Sentry仓库gitclonehttps://github.com/getsentry/onpremise.git创建Sentry服务cdonpremise新建docker本地数据仓库dockervolumecreate--name=sentry-data&&dockervolumecreate--name=sentry-postgres&&dockervolumecreate--name=sentry-redis&&dockervolumecreate--name=sentry-zookeeper&&dockervolumecreate--name=sentry-kafka&&dockervolumecreate--name=sentry-clickhouse&&dockervolumecreate--name=sentry-symbolicator创建env配置文件cp-n.env.example.envCOMPOSE_PROJECT_NAME=sentry_onpremiseSENTRY_EVENT_RETENTION_DAYS=90#你可以r为SENTRY_BIND使用端口号或IP:PORT组合#Seehttps://docs.docker.com/compose/compose-file/#portsformoreSENTRY_BIND=9000SENTRY_IMAGE=getsentry/sentry:nightlySNUBA_IMAGE=getsentry/snuba:nightlyRELAY_IMAGE=getsentry/relay:nightlySYMBOLICATOR_IMAGE=getsentry/symbolicator:nightlyWAL2JSON_VERSION=latestBuildservicedocker-composebuild如果报错“-bash:docker-compose:commandnotfound”，需要先安装docker-compose：yum-yinstallepel-releaseyum-yinstallpython-pippipinstalldocker-compose生成秘钥docker-composerun--rmwebconfiggenerate-secret-key...Digest:sha256:de277fb0489fa674e28ce44a790840ece63dbacd696c990b95abdf0135ae5283Status:Downloadednewerimageforgetsent:#e9yv5(w@rabcq626y&n*fygk=tzah%d!*la!1l最后一行是生成的秘钥，将生成的秘钥添加到.env的SENTRY_SECRET_KEYCOMPOSE_PROJECT_NAME=sentry_onpremiseSENTRY_EVENT_RETENTION_DAYS=90SENTRY_SECRET_KEY="4ghk9%w2yk&*g#tze9ybah%d!*la!1l"#你可以使用端口号或SENTRY_BIND的IP:PORT组合#请参阅https://docs.docker.com/compose/compose-file/#ports了解更多SENTRY_BIND=9000SENTRY_IMAGE=getsentry/sentry:nightlySNUBA_IMAGE=getsentry/snuba:nightlyRELAY_IMAGE=getsentry/relay:nightlySYMBOLICATOR_IMAGE=getsentry/symbolicator:nightlyWAL2JSON_VERSION=latest创建数据库，创建超级管理员，作为登录sentry的账户，创建过程中按照提示一步步操作。/install.sh安装完成后，使用以下命令启动所有服务：docker-composeup-d然后在浏览器中打开：http://serverip:9000，就可以看到Sentry的服务器登录界面网站访问Sentry页面可以写一行测试异常代码来验证sentry是否可以接收到错误。正常收到的异常报告是这样的。这里虽然可以监控到脚本异常错误，但是我们平时发布到生产环境的代码被压缩得一头雾水，如果我们还想监控是哪一行代码导致了脚本错误，还需要上传sourcemaps到sentry服务器。Sentry上传sourcemapsSentry上传sourcemaps有两种方式，一种是通过webpack插件上传，另一种是通过sentrycli上传。两种方式的配置都不复杂。这取决于您的项目使用的构建工具。如果你的项目是用webpack打包的，使用webpack插件上传会更方便。如果你使用gulp等其他构建工具，那么使用sentrycli会更方便。webpack插件上传sourcemaps安装@sentry/webpack-plugin和clean-webpack-pluginnpminstall@sentry/webpack-pluginclean-webpack-plugin-DgetauthTokenAPIkeys->AuthTokens->CreateNewTokeninwebpack.config.js添加以下代码：constSentryWebpackPlugin=require("@sentry/webpack-plugin");const{CleanWebpackPlugin}=require('clean-webpack-plugin');module.exports={plugins:[newSentryWebpackPlugin({url:"http://192.168.4.60:9000/",authToken:"9d332444a2804384b38cce5d11664294c9eea7a41aea4e71ae2daaa4c9b5bd7f",org:"sentry",project:"pc-directory"本地sourcemap所在位置，包括：//访问路径，如果使用cdn，需要写完整的域名和路径urlPrefix:"http://src.test.com/statics/js/dist"}),],};sentrycliuploadsourcemapsinstallsentryclinpminstall@sentry/cli@16.7.1-D安装失败会报如下错误：Downloadingfromhttps://downloads.sentry-cdn.com/sentry-cli/1.67。1/sentry-cli-Windows-x86_64.exe错误：无法下载d来自https://downloads.sentry-cdn.com/sentry-cli/1.67.1/sentry-cli-Windows-x86_64.exe的sentry-cli二进制文件。错误码：ECONNRESET可以将拉取地址改为淘宝镜像地址：npmconfigsetsentrycli_cdnurlhttps://npm.taobao.org/mirrors/sentry-cli/配置代码打包时生成sourcemaps，我的项目是基于gulp打包的，所以使用gulp-sourcemaps插件生成sourcemaps：varsourcemaps=require('gulp-sourcemaps');//省略其他代码pump([gulp.src(path.join(build_path,paths.optimize+'/'+dir+'/'+versiondir+'/*.js')),sourcemaps.init(),babel(),concat(versiondir+'.js'),uglify(),sourcemaps.write('./'),gulp.dest(distPath)])//省略其他代码执行构建任务之后会同时在dist目录下生成sourcemap文件上传Sourcemaps到Sentry，首先在项目根目录新建一个.sentryclirc文件，代码如下：[defaults]url=http://192.168.4.60:9000/org=sentryproject=pc-web[auth]token=9d332444a2804384b38cce5d11664294c9eeb7a41aea94ab7af然后在5中生成打包的脚本添加上传sourcemaps的命令：gulpjs--envpro//productionpackagingsentry-clireleases-osentry-ppc-webnew0.0.1sentry-clireleasesfiles0.0.1upload-sourcemapsstatics/js/dist--url-prefixhttp://src.test.com/statics/js/dist这里要注意一点，就是sourcemaps的版本号(0.0.前面例子中的1）必须和网站初始化sentry时的release参数一致，否则sentry监听报错脚本无法定位到具体源码。我们来看看监控脚本报错的效果：结论至此，网站前端异常监控系统Sentry的接入就完成了。本文仅演示Sentry的最基本功能，其他更高级的用法计划在以后逐步介绍，包括网站404页面监控、界面性能监控等。
