vue 项目实战 Sentry 笔记 |
您所在的位置：网站首页 › 163实战 › vue 项目实战 Sentry 笔记 |
vue 项目实战 Sentry 笔记
|
一、事情是从这里开始的：
最近开发的功能排期紧张。发版后的线上报了几个问题，手动定位线上问题比较困难和麻烦。 于是要在项目中部署一套监控系统，选择了比较流行的 Sentry 方案。 二、Sentry 安装相关Sentry 是一套开源的实时的异常收集、追踪、监控系统。它支持多种语言的项目，比较容易配置，且支持后续的错误分级，性能监控等服务，除了部署服务，对前端开发人员较为友好。 本次开发基于 docker 环境部署，如果对 docker 了解比较少，可以过一下第三节的简介，有个基本的印象。 Sentry 安装流程 1、前置准备建议 4u8g 以上的 Linux 服务器来执行（最低需要4g），考虑到后期扩展，环境大一点会方便。 windows 和 mac 系统可以安装对应的虚拟机来执行。 2、环境准备Sentry 的管理后台是基于 Python Django 开发的。这个管理后台由背后的 23 个服务支撑运行。Sentry 提供用 docker-compose 来帮助我们一键部署； 所以我们需要在服务器上预置 docker 和 docker-compose 环境。此处用的 centos7 自带的 yum 包管理工具下载安装 docker。 注意事项国内服务器连接不上 github，无法通过 curl 直接下载 docker-compose 同样可以本地下载完成之后，scp或者xftp发送到服务器，笔者安装了py3和pip3 developer.aliyun.com/article/640… 加 stackoverflow.com/questions/6… 3、开始下载 git clone https://github.com/getsentry/onpremise 复制代码因为国内网站可能访问不到 github，此次可以自己先下载下来，然后通过 scp 指令，xftp 工具或者搜一个国内的代码源下载（不一定最新） 4、安装安装前建议配置 docker 的镜像源，如163的 docker 镜像源，之前用的阿里云的源拉取 debian 的镜像网络超时了 cd onpremise ./install.sh 复制代码执行 install.sh 是执行安装服务启动相关流程 过程中会提示注册管理员，此处可以注册，也可以后续注册； // 后续注册管理员流程 docker-compose run --rm web createuser --superuser 复制代码 5、启动项目执行在 docker-compose 启动服务 docker-compose up -d 复制代码 三、项目接入 Sentry 1、进入平台（Sentry 用的9000端口） 2、创建项目这里提供了 vue2 和 vue3 的部署流程 生成 source-map 转化后的代码最后加一行注释 //# sourceMappingURL=http://example.com/path/to/your/sourcemap.map 复制代码 6、上传 source-map sentry-cli 手动上传服务器上面通过安装 @sentry-cli install -g --unsafe-perm=true --allow-root @sentry/cli sentry-cli -h // 先通过sentry-cli登录 sentry-cli --url http://127.0.0.1:9000 login // 然后输入token，Settings -> Account -> API -> Auth Tokens // 然后~/.sentryclirc 文件会被创建，上传时候先判断项目根目录有没有此配置，若没有，则读取~/.sentryclirc // 通过下面的命令可以上传sourcemap文件到sentry服务器 sentry-cli releases files 0.0.1 upload-sourcemaps --url-prefix '~/' './build' 复制代码 通过 webpack 插件上传 source-map 下载插件 yarn add @sentry/webpack-plugin -D 配置 webpack 插件 configureWebpack: config => { // console.log('process.env.NODE_ENV is',process.env.NODE_ENV) if (process.env.NODE_ENV !== 'development') { config.devtool = 'source-map' config.plugins.push( new SentryCliPlugin({ urlPrefix: '~/', include: './dist', ignore: ['node_modules'], release: 'x.x.x', token: xxx, org:xxx, project:xxx, url:xxx }), ) } }, 复制代码 自动上传脚本，通过 yarn build，可以自动上传 source-map正确上传过 source-map 的项目，可以看到很清晰的报错位置 注意事项：当本地调试的时候，用 yarn dev 来调试 source-map 功能，如不能正确对应。需要将 dist 目录放在服务器下，如在 dist 目录下启动 http-server 服务来使用 此外还可以通过 BreadCrumbs 功能查看，报错前发生了什么操作 Sentry.init() 中，new Integrations.BrowserTracing() 的功能是将浏览器页面加载和导航检测作为事物，并捕获请求，指标和错误。 TPM: 每分钟事务数 FCP：首次内容绘制（浏览器第第一次开始渲染 dom 的时间点） LCP：最大内容渲染，代表 viewpoint 中最大页面元素的加载时间 FID：用户首次输入延迟，可以衡量用户首次与网站交互的时间 CLS：累计布局偏移，一个元素初始时和消失前的数据 TTFB：首字节时间，测量用户浏览器接收页面的第一个字节的时间（可以判断缓慢来自网络请求还是页面加载问题） USER：uv 数字 USER MISERY: 对响应时间难以忍受的用户指标，由 sentry 计算出来，阈值可以动态修改 四、进阶用法 1、识别用户在上传的 issues 里面，我们可以借助 setUser 方法，设置读取存在本地的用户信息。（此信息需要持久化存储，否则刷新会消失） Sentry 可以手动捕获所有异常，但是无法对这些异常进行分级 Sentry 内置了一些错误等级，我们手动上报的时候，可以添加错误等级，以供后续分类 定义错误边界，当组件报错的时候，可以上报相关信息 使用 Sentry.ErrorBoundary。加了错误边界，可以把错误定位到组件上面。 4、rrweb 重播安装 @sentry/rrweb rrweb yarn add @sentry/rrweb rrweb import SentryRRWeb from '@sentry/rrweb'; Sentry.init({ Vue, dsn: "xxx", integrations: [ new Integrations.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ["localhost", "my-site-url.com", /^//], }), new SentryRRWeb({ checkoutEveryNms: 10 * 1000, // 每10秒重新制作快照 checkoutEveryNth: 200, // 每 200 个 event 重新制作快照 maskAllInputs: false, // 将所有输入内容记录为 * }), ], tracesSampleRate: 1.0, release: 'x.x.x', logErrors: true }); 复制代码在报错后，可以录屏播放错误发生的情况 设置报警规则，当我们某些情况，如 issues，performance 超过我们设置的阈值，会触发 alert。 我们可以通过提醒等功能来帮助我们即时发现问题。 虚拟化技术是将计算机物理资源进行抽象，转化为虚拟的计算机资源的一种技术； 通过这个技术，可以屏蔽计算机硬件差异，快速适配不同物理机，虚拟化技术就是通过自身适配不通平台，然后抽象出统一的接口，实现的跨平台运行。 可以隔离计算机资源，提高计算机资源的使用率。 安在不同的虚拟机中，可以避免不通的程序冲突，等问题。 2、容器化技术 容器化技术是更高级的虚拟机技术， java 执行器，v8 引擎也是虚拟技术的体现，它将执行环境和物理机隔离开来，让代码可以脱离平台的束缚； 容器化是由操作系统提供的一些API，可以让程序之间互不干扰。因为这个独立的环境像是一个容器，所以称为容器技术。容器化技术是操作系统直接提供的API。而虚拟机是通过程序做了一层代理和转发，转发并且处理虚拟机的指令，会有一定的性能问题。 3、docker一家公司用go实现的容器引擎软件，提高服务部署效率； 更快更一致的交付服务，很容易实现 CICD 跨平台部署，动态扩容； 隔离应用，资源更充分； 4、docker-compose docker-compose 是一个对容器组合进行管理的工具； docker 建议每个容器运行一个软件，很多系统需要运行多个软件才可以使用，处理各个容器依赖关系比较复杂，docker-compose 可以提供帮助； dockerfile 可以将一个容器环境固定下来，docker-compose 通过docker-compose.yml 的可以将多个容器固定下来； 常用指令有：（-d 为了让程序后台持久化运行） docker-compose up -d docker-compose down |
【本文地址】