一、Sentry简介Sentry是一个开源的实时异常收集、跟踪、监控系统，几乎支持所有的语音和平台。这个系统由各种语言对应的SDK和庞大的数据后台服务组成。通过SentrySDK的配置，可以上报错误关联的版本信息和发布环境。同时，SentrySDK会自动捕获异常发生前的相关操作，方便后续异常跟踪。最后将异常数据上报给数据服务后，进行过滤，提取关键信息，汇总并展示在数据后台的web界面中。功能架构如下图所示。2.环境搭建2.1官方Sentry服务Sentry项目是开源的，但也提供付费版本，省去您自己搭建和维护Python服务的麻烦。如果自己搭建，灵活性比较高，可以做很多定制化开发。首先，我们打开并登录官网注册一个账号。2.2私有部署Sentry的管理后台是基于PythonDjango开发的。同时这个管理后台需要用到Postgres数据库（管理后台默认的数据库）、ClickHouse（存储数据特征的数据库）、relay、kafka、redis等一些基础服务，官方还是一共23个服务由哨兵维护。如果要独立部署和维护这23项服务，将是极其复杂和困难的。好在官方提供了基于docker镜像的一键部署实现getsentry/onpremise。因此，在私有化部署之前，我们需要在本地搭建好Docker和Python环境。需要说明的是，下面所有的私有化部署都是基于Linux系统环境。以下是安装需要的一些软硬件环境。Docker19.03.6+Docker-Compose1.28.0+4CPUCores8GBRAM20GBFreeDiskSpace2.3安装docker首先我们在cenos服务器上安装一些工具软件，安装命令如下。yuminstallyum-utilsdevice-mapper-persistent-datalvm2-y然后我们设置镜像源为阿里。yum-config-manager--add-repohttps://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo接下来我们使用yum命令安装docker。yuminstalldocker-cedocker-ce-clicontainerd.io-y然后，使用以下命令启动docker。systemctlstartdocker#设置启动systemctlenabledocker这里有个小提示：在后续部署过程中，需要拉取大量镜像，官方源拉取慢，可以修改docker镜像源.首先，登录阿里云官网，打开阿里云容器镜像服务。单击左侧菜单底部的MirrorAccelerator并选择Centos。2.3.1安装docker-compose接下来我们继续安装插件。首先我们需要安装docker-compose#使用国内源安装sudocurl-L"https://get.daocloud.io/docker/compose/releases/download/1.29.2/docker-compose-$(uname-s)-$(uname-m)"-o/usr/local/bin/docker-compose设置docker-compose执行权限。chmod+x/usr/local/bin/docker-compose创建另一个软链接。sudoln-s/usr/local/bin/docker-compose/usr/bin/docker-compose最后测试是否安装成功。$docker-compose--versiondocker-composeversion1.22.0,buildf46880fe2.4一键部署gitclonehttps://github.com/getsentry/onpremiseonpremise的根路径下有一个install.sh文件，就可以了需要执行这个脚本才能完成快速部署。脚本运行过程中，大致会经历以下操作：环境检查生成服务配置dockervolume数据卷创建（可以理解为创建docker运行的应用程序的数据存储路径）拉取升级基础镜像构建镜像服务初始化设置管理员账号（如果跳过这一步，可以手动创建）然后在onpremise项目中执行一键部署命令cdonpremise#直接运行./install.sh安装sentry及其依赖通过码头工人。/install.sh的安装过程如下图所示。设置管理员帐户（如果跳过此步骤，可以手动创建）。2.5启动工程执行后会提示创建完成，运行docker-composeup-d启动服务。查看服务运行状态使用命令docker-composeps。2.6访问项目所有服务启动成功后，就可以访问哨兵后台了。后台默认运行在服务器的9000端口，安装时设置登录账号密码。2.7设置语言和时区部署成功后，我们可以进行一些设置。点击头像【用户设置】-【账户详情】设置语言、时区等。3.Vue连接Sentry3.1创建Vue项目首先使用create命令创建Vue项目，如图以下。npmi@vue/cli-g#初始化vue2项目vuecreatevue2-sentry3.2接入哨兵首先在项目中安装哨兵插件。#使用npmnpminstall--save@sentry/vue@sentry/tracing然后在入口文件main.js中初始化sentry。从“vue”导入Vue；从“vue-router”导入路由器；从“@sentry/vue”导入*作为哨兵；从“@sentry/tracing”导入{Integrations}；Vue.use(Router)；constrouter=newRouter({//...});Sentry.init({Vue,dsn:"http://xdsdfafda21212@119.75.24.41:9000/2",集成:[newIntegrations.BrowserTracing({routingInstrumentation:Sentry.vueRouterInstrumentation(router),tracingOrigins:["localhost","my-site-url.com",/^//],}),],//不同的环境报不同的环境类//environment:process.env.ENVIRONMENT,//将tracesSampleRate设置为1.0以捕获100%//用于性能监控的事务。//我们建议在生产中调整此值//高流量应用程序可以控制报告百分比tracesSampleRate:1.0,release:process.env。SENTRY_VERSION||'0.0.1',//版本号，每次npmrunbuilduploads，修改版本号});//...newVue({router,render:h=>h(App),}).$mount("#app");接下来，我我们手动模拟一个异常，然后我们可以在哨兵控制台捕获错误。3.3上传sourceMap到哨兵为了查看具体错误内容，我们需要将sourceMap上传到哨兵平台。一般有两种上传方式：sentry-cli和sentry-webpack-plugin。什么是源地图？它是一个允许编译后的代码映射到原始源代码的文件；它是一个存储位置信息的信息文件。也就是说，转换后代码的每个位置都对应转换前的一个位置。在正式上传之前，我们需要在vue项目中集成webpack-plugin插件。安装命令如下：npmi@sentry/webpack-plugin-D接下来我们修改vue.config.js配置文件中的配置，如下例所示。constSentryCliPlugin=require('@sentry/webpack-plugin')module.exports={//打包生成sourcemap，打包后删除并上传到sentry，不要将sourcemao传到生产环境productionSourceMap:process.env.NODE_ENV!=='development',configureWebpack:config=>{if(process.env.NODE_ENV!=='development'){config.plugins.push(newSentryCliPlugin({include:'./dist/js',//仅上传jsignore:['node_modules','webpack.config.js'],ignoreFile:'.sentrycliignore',release:process.env.SENTRY_VERSION||'0.0.1',//版本号cleanArtifacts:true,urlPrefix:'~/js',//在线对应url资源的相对路径}),)}},}为了正常上报，我们需要在哨兵后台获取TOKEN。然后配置org组织名称。并在项目根目录下创建一个.sentryclirc文件，配置如下内容。#.sentryclirc[auth]token=填写控制台创建的TOKEN[defaults]url=https://sentry.io/org=sentryproject=vueurl：哨兵部署地址，默认为https://sentry。io/org:控制台查看组织名project:项目名token:生成token需要勾选project:write项目写权限。当我们再次执行npmrunbuild项目打包命令时，就可以将js下的sourcemap相关文件上传到sentry中了。对于已经正确上传source-map的项目，可以看到非常明确的错误位置。进入本地打包的dist，http-server-p6002启动一个模拟官方环境部署的服务访问，看看效果。需要注意的是，切记不要将sourcemap文件传输到生产环境，因为太大，不安全。在生产环节删除sourcemap一般有以下三种方式。//方法一"scripts":{"build":"vue-cli-servicebuild&&rimraf./dist/js/*.map"}//方法二单独生成map//vue.config.jsconfigureWebpack(config){config.output.sourceMapFilename('sourceMap/[name].[chunkhash].map.js')config.plugin('sentry').use(SentryCliPlugin,[{include:'./dist/sourceMap',//只上传jsignore:['node_modules'],configFile:'sentry.properties',release:process.env.SENTRY_VERSION||'0.0.1',//版本号，每次npmrunbuilduploads，版本号为modifiedcleanArtifacts:true,//上传前先清理}])}//方式三webpack插件清理$npmiwebpack-delete-sourcemaps-plugin-D//vue.config.jsconst{DeleteSourceMapsPlugin}=require('webpack-delete-sourcemaps-plugin')configureWebpack(config){config.plugin.push(newDeleteSourceMapsPlugin(),//cleanupsourcemap)}3.4性能分析除了捕获错误，Sentry还可以收集一些页面性能数据。在Sentry.init()中，newIntegrations.BrowserTracing()的作用是把浏览器页面加载和导航检测当成一个东西，抓取请求等性能指标。常见的性能数据指标如下：TPM：每分钟事务数；FCP：Firstcontentdrawing（浏览器第一次开始渲染dom的时间点）；LCP：maximumcontentrendering，代表加载视点时间最大的页面元素；FID：user'sfirstinputdelay，可以衡量用户第一次与网站交互的时间；CLS：cumulativelayoutshift，元素初始化到消失前的数据；TTFB：Timetofirstbyte，衡量用户浏览器接收到页面第一个字节的时间（可以判断慢是来自网络请求还是页面加载问题）；用户：uv号；USERMISERY：无法忍受响应时间的用户指标，由哨兵计算，阈值可动态修改；4.React接入哨兵我们使用umi项目接入哨兵进行演示。首先，我们创建一个基于umi的React项目。mkdirumi-sentry&&cdumi-sentryyarncreateumi然后，我们在项目中安装哨兵插件。npminstall--save@sentry/react@sentry/tracing4.1访问sentry首先我们在React项目的入口文件index.ts中初始化sentry，如下图。import*asSentryfrom"@sentry/react";import{BrowserTracing}from"@sentry/tracing";Sentry.init({dsn:"https://xdfa@o1334810.ingest.sentry.io/121",集成:[newBrowserTracing()],release:'0.0.1',tracesSampleRate:1.0,});接下来，我们手动触发异常，看能否正确上报给sentry。4.2上传sourcemap首先在根目录下创建一个配置文件.sentryclirc，然后配置如下选项。[auth]token=TOKEN控制台获取，TOKEN需要校验project:write写入权限[defaults]url=https://sentry.io///默认地址org=组织名称，控制台获取project=react//项目名称Next，让我们安装sourcemap配置上传插件。npmi@sentry/webpack-plugin-D然后在.umirc.ts文件中添加如下配置。constSentryPlugin=require('@sentry/webpack-plugin');导出默认值{devtool:process.env.NODE_ENV==='production'?'source-map':'eval',//opensourcemaochainWebpack(config,{webpack}){if(process.env.NODE_ENV==='production'){//sourcemap只有在prod时才会上传。如果不判断，项目中运行的package也会上传config.plugin("sentry").use(SentryPlugin,[{ignore:['node_modules'],include:'./dist',//上传dist文件的jsofthedistfileconfigFile:'./sentryclirc',//配置文件地址，这个必须有，我这里踩坑了，忘记写了，导致无法上传sourcemaprelease:'1.0.1',//版本号，自己定义的变量，整个版本号必须对应deleteAfterCompile:true,urlPrefix:'~/'//js代码路径前缀}])}},};执行打包上传sourcemap。进入dist文件，启动http-server本地服务，模拟上网效果。需要注意的是，执行npmrunbuild打包操作后，不要将sourcemap上传到生产环境，记得删除。5.其他用法5.1识别用户在上传的issues中，我们可以使用setUser方法来设置和读取本地存储的用户信息，例如。Sentry.setUser({id:'dfar12e31',//userIdcookie.get('userId')email:'test@qq.com',//cookie.get('email')username:'poetry',//cookie.get('username')})Vue.prototype.$Sentry=Sentry5.2错误边界Sentry支持定义错误边界，可以在组件报错时报告相关信息。使用Sentry.ErrorBoundary添加错误边界以定位组件上的错误。5.3rrweb错误复现使用rrweb，我们可以复现错误路径。首先，我们需要安装rrweb插件。npmi@sentry/rrwebrrweb-S然后，在入口文件中配置如下。从'@sentry/rrweb'导入SentryRRWeb;//app/main.jsSentry.init({Vue,dsn:"xxx",integrations:[newIntegrations.BrowserTracing({routingInstrumentation:Sentry.vueRouterInstrumentation(router),tracingOrigins:["localhost","my-site-url.com",/^//],}),newSentryRRWeb({checkoutEveryNms:10*1000,//每10秒重新创建一次快照checkoutEveryNth:200,//每200个事件重新创建快照maskAllInputs:false,//将所有输入内容记录为*}),],...});然后，我们可以在哨兵后台看到错误的json数据。5.4手动报警提示有时候，我们可以使用提醒等功能来帮助我们第一时间发现问题，可以设置的提醒选项有很多。
