“瞎子过河记”
我的项目的监控报错机制应用 Sentry，为了更好的定位到谬误，所以须要上传 sourcemap
最终踩坑结束Sentry列表展现
- 接口信息与页面报错辨别
- 提供更多无效自定义tag帮忙疾速定位
分享一下我的踩坑之路（基础教程这里就不在反复了，网上一搜一大堆，给大家来点不一样的干货～）
坑1：曾经上传sourceMap了然而只能看到报错，还是看不到源码。
const sentryConfig = { url: 'https://sentry.xxx.com/', authToken: '***', org: 'frontend', project: 'cms', release: version, sourceMaps: { include: ['./build/static/js'], ignore: ['node_modules'], urlPrefix: '~/sub-wechat/static/js', },};比方线上拜访地址是 https://www.**.com/sub-wechat/index urlPrefix 必须得在域名根目录下拜访到，所以必须设置为 ~/sub-wechat/static/js（sub-wechat/static/js 文件夹上面都是.js）
坑2：终于能够看到源代码了，然而看到的源码是错行的，不是正确地位。Why？！
刚开始还狐疑Sentry的问题，本着我做了完我没有错，甩锅哈哈哈哈哈。
起初吃了个晚饭沉着了下来认真排查发现浏览器查看报错也是错的，最初发现罪魁祸首，懒加载css。到当初也没搞懂为什么这个会影响sourcemap报错地位？？求问
https://github.com/vitejs/vit...
为什么要对立封装Sentry
- 我的项目多了上报信息谬误不对立
- 被动上报谬误（比方log、warn、debug、fatal、error）
- TAG上报的信息等级对立
为什么要监控接口谬误
- 谬误监控及日志排查，提供更多无效信息；
- 接口异样状态，依据异样状态发现代码的破绽；
有对立的一个request SDK，解决起来非常简单，
sentry.jsimport * as Sentry from '@sentry/browser';import { Integrations } from '@sentry/tracing';/** * fatal: 很重大的零碎异样，零碎无奈持续运行，必须解决，重要级别与uncaught的error相似 * error（默认值）: 零碎异样，无奈失常运行，如果type是uncaught，该报错必须由开发人员确定是否须要修复，如果是caught，示意可预感的报错，看状况解决 * debug: 帮助解决线上问题 * warn: 零碎可持续运行上来，用户可持续操作，用于上报一些警示线的错误信息 * log: 简略的日志打点 *//** * @description sentry的初始化配置，仅在线上及beta环境进行 * @param {string} env 环境 * @param {string} dsn sentry生成的dsn值。 * @param {string} release 我的项目版本 * @param {array} tags Sentry对应的tags * @examplenpm r * * Capture.init({ env: 'production', dsn: '1231afaf1', release: '1.0.0', tags: {TIME: new Date()}) * */const Severity = {Fatal: 'fatal',Error: 'error',Warning: 'warning',Log: 'log',Info: 'info',Debug: 'debug',};class Capture {constructor(options) { const { env, dsn, release, tags, } = options; if (env === 'production') { Sentry.init({ dsn, release, integrations: [new Integrations.BrowserTracing()], tracesSampleRate: 1.0, beforeSend(event) { const { exception } = event; // 接口申请谬误被动上报了，这里就间接疏忽掉 const requestErr = exception.values.find((item) => item.value.startsWith('Request failed with status code')); if (requestErr) return null; const sendUser = event; // 在这里可依据业务状况发送用户信息 const userData = localStorage.getItem('userData'); let user = { cellphone: null, realName: null, }; if (userData) { const userObj = JSON.parse(userData); user = { cellphone: userObj.cellphone, realName: userObj.realName, company: userObj.manageDepartmentNames, companyId: userObj.companyId, }; } sendUser.user = user; return event; }, ignoreErrors: [ 'Failed to fetch', 'NetworkError when attempting to fetch resource.', 'ResizeObserver loop limit exceeded', 'ResizeObserver loop completed with undelivered notifications', 'Loading chunk', 'Unable to preload CSS for', 'Request aborted', ], }); Sentry.configureScope((scope) => { const date = new Date(); const ymdDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`; const hour = date.getHours().toString(); scope.setTag('ERRORTYPE', 'uncaught'); scope.setTag('ENV', env); scope.setTag('DATE', ymdDate); scope.setTag('HOUR', hour); scope.setLevel(Severity.Error); if (tags && typeof tags === 'object') { Object.keys(tags).forEach((key) => { scope.setTag(key, tags[key]); }); } }); }}// eslint-disable-next-line class-methods-use-thissentryCapture({ error = '', extra, level, tags,}) { Sentry.withScope((scope) => { scope.setTag('ERRORTYPE', 'caught'); scope.setLevel(level); let reportError = error; if (error instanceof Error) { reportError = error.toString(); } else if (typeof error === 'object') { reportError = JSON.stringify(error); } if (extra && typeof extra === 'object') { Object.keys(extra).forEach((key) => { scope.setExtra(key, extra[key]); }); } if (tags && typeof tags === 'object') { Object.keys(tags).forEach((key) => { scope.setTag(key, tags[key]); }); } if (reportError === 'CANCEL') return; Sentry.captureException(new Error(reportError)); });}fatal(param) { this.sentryCapture({ ...param, level: Severity.Fatal });}error(param) { this.sentryCapture({ ...param, level: Severity.Error });}warn(param) { this.sentryCapture({ ...param, level: Severity.Warning });}debug(param) { this.sentryCapture({ ...param, level: Severity.Debug });}log(param) { this.sentryCapture({ ...param, level: Severity.Log });}}export default Capture;应用
import Capture from 'sentry.js';const capture = new Capture({ dsn: '*****', release: version, env: import.meta.env.MODE,});