为你的前端项目接入Sentry
原创为你的前端项目接入Sentry
原创
- 原文出处：http://blog.poetries.top/2022/07/27/sentry-summary/
- 前端面试之旅 https://interview2.poetries.top
支持如下语言
sentry功能架构
sentry核心架构
Vue2 + Sentry
创建一个vue项目
npm i @vue/cli -g# 初始化vue2项目vue create vue2-sentry |
|---|
接入sentry
# Using npmnpm install --save @sentry/vue @sentry/tracing |
|---|
// src/main.js import Vue from "vue"; import Router from "vue-router"; import * as Sentry from "@sentry/vue"; import { Integrations } from "@sentry/tracing"; Vue.use(Router); const router = new Router({ // ... }); Sentry.init({ Vue, dsn: "http://xdsdfafda21212@119.75.24.41:9000/2", integrations: [ new Integrations.BrowserTracing({ routingInstrumentation: Sentry.vueRouterInstrumentation(router), tracingOrigins: ["localhost", "my-site-url.com", /^\//], }), ], // 不同的环境上报到不同的 environment 分类 // environment: process.env.ENVIRONMENT, // Set tracesSampleRate to 1.0 to capture 100% // of transactions for performance monitoring. // We recommend adjusting this value in production // 高访问量应用可以控制上报百分比 tracesSampleRate: 1.0, release: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都npm run build上传都修改版本号 }); // ... new Vue({ router, render: h => h(App), }).$mount("#app"); |
|---|
我们手动抛出异常，在控制台可见捕获了错误
上传sourceMap到sentry
为了方便查看具体的报错内容，我们需要上传sourceMap到sentry平台。一般有两种方式 sentry-cli和 sentry-webpack-plugin方式，这里为了方便采用webpack方式
source-map是一个文件，可以让已编译过的代码可以映射出原始源;source-map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。
webpack方式上传
npm i @sentry/webpack-plugin -D |
|---|
修改vue.config.js配置文件
// vue.config.js const SentryCliPlugin = 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( new SentryCliPlugin({ include: './dist/js', // 只上传js ignore: ['node_modules', 'webpack.config.js'], ignoreFile: '.sentrycliignore', release: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都npm run build上传都修改版本号 对应main.js中设置的Sentry.init版本号 cleanArtifacts: true, // Remove all the artifacts in the release before the upload. // URL prefix to add to the beginning of all filenames. Defaults to ~/ but you might want to set this to the full URL. This is also useful if your files are stored in a sub folder. eg: url-prefix '~/static/js' urlPrefix: '~/js', // 线上对应的url资源的相对路径 注意修改这里，否则上传sourcemap还原错误信息有问题 // urlPrefix： 关于这个，是要看你线上项目的资源地址，比如 // 怎么看资源地址呢， 例如谷歌浏览器， F12控制台， 或者去Application里面找到对应资源打开 }), ) } }, } |
|---|
获取TOKEN
获取org
在项目根目录创建.sentryclirc
url：sentry部署的地址，默认是https://sentry.io/org：控制台查看组织名称project：项目名称token：生成token需要勾选project:write项目写入权限
# .sentryclirc[auth]token=填入控制台创建的TOKEN[defaults]url=https://sentry.io/org=sentryproject=vue |
|---|
执行项目打包命令，即可把js下的sourcemap相关文件上传到sentry
npm run build |
|---|
上传后的sourcemap在这里可以看到
正确上传过 source-map 的项目，可以看到很清晰的报错位置
进入本地打包的dist，
http-server -p 6002启动一个模拟正式环境部署的服务访问看看效果
还可以通过 面包屑 功能查看，报错前发生了什么操作
记得别把sourcemap文件传到生产环境，又大又不安全 删除sourcemap, 基于vue2演示的三种方式
// 方式1 "scripts": { "build": "vue-cli-service build && rimraf ./dist/js/*.map" } // 方式2 单独生成map // vue.config.js configureWebpack(config) { config.output.sourceMapFilename('sourceMap/[name].[chunkhash].map.js') config.plugin('sentry').use(SentryCliPlugin, [{ include: './dist/sourceMap', // 只上传js ignore: ['node_modules'], configFile: 'sentry.properties', release: process.env.SENTRY_VERSION || '0.0.1', // 版本号，每次都npm run build上传都修改版本号 cleanArtifacts: true, // 先清理再上传 }]) } // 方式3 webpack插件清理 $ npm i webpack-delete-sourcemaps-plugin -D // vue.config.js const { DeleteSourceMapsPlugin } = require('webpack-delete-sourcemaps-plugin') configureWebpack(config) { config.plugin.push( new DeleteSourceMapsPlugin(), // 清理sourcemap ) } |
|---|
查看 Performance
Sentry.init()中，new Integrations.BrowserTracing()的功能是将浏览器页面加载和导航检测作为事物，并捕获请求，指标和错误。
TPM: 每分钟事务数FCP：首次内容绘制（浏览器第第一次开始渲染 dom 的时间点）LCP：最大内容渲染，代表viewpoint中最大页面元素的加载时间FID：用户首次输入延迟，可以衡量用户首次与网站交互的时间CLS：累计布局偏移，一个元素初始时和消失前的数据TTFB：首字节时间，测量用户浏览器接收页面的第一个字节的时间（可以判断缓慢来自网络请求还是页面加载问题）USER：uv数字USER MISERY: 对响应时间难以忍受的用户指标，由sentry计算出来，阈值可以动态修改
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。