【前端定位线上题目的多种方案（不依靠 Sentry）】

前端定位线上题目的多种方案（不依靠 Sentry） 🛠️

---

一、构建时注入调试信息 🔧

---

1. 注入版本信息与 Git 提交哈希

Webpack 设置：

1. // webpack.config.js
2. const webpack = require('webpack');
3. const gitRevision = require('child_process').execSync('git rev-parse --short HEAD').toString().trim();
5. module.exports = {
6.   plugins: [
7.     new webpack.DefinePlugin({
8.       __VERSION__: JSON.stringify(`v1.0.0-${gitRevision}`)
9.     })
10.   ]
11. };

复制代码

代码中利用：

1. console.log('当前版本：', __VERSION__);
2. // 输出：当前版本：v1.0.0-3a5b7d9e

复制代码

上风：

• 精准定位代码版本，联合 Git 汗青快速回溯题目
  
• 无需第三方工具，纯前端实现
  

---

2. 天生 Source Map 并选择性摆设

Webpack 生产设置：

1. // webpack.config.js
2. module.exports = {
3.   devtool: 'hidden-source-map', // 生成 Source Map 但不暴露给浏览器
4.   output: {
5.     sourceMapFilename: '[file].map[query]'
6.   }
7. };

复制代码

调试流程：

• 构建时天生 .map 文件，但不上传至 CDN
  
• 报错时通过行号/列号（如 main.js:123:45）
  
• 本地利用 source-map 库剖析错误位置：
  1. npx source-map analyze main.js.map --line 123 --column 45

  复制代码

上风：

• 安全：不袒露源码到生产情况
  
• 精准：还原压缩代码到源码位置
  

---

二、欣赏器端主动捕捉与上报 🌐

---

1. 全局错误监听

根本代码：

1. window.addEventListener('error', (e) => {
2.   const errorInfo = {
3.     msg: e.message,
4.     file: e.filename,
5.     line: e.lineno,
6.     col: e.colno,
7.     stack: e.error?.stack,
8.     version: __VERSION__ // 构建时注入的版本
9.   };
10.   
11.   // 上报到自有API
12.   fetch('/api/log-error', {
13.     method: 'POST',
14.     body: JSON.stringify(errorInfo)
15.   });
16. });

复制代码

增强方案（Promise 错误）：

1. window.addEventListener('unhandledrejection', (e) => {
2.   console.error('Unhandled Rejection:', e.reason);
3. });

复制代码

---

2. Console 日记重定向

捕捉全部 console.log：

1. const originalConsoleLog = console.log;
2. console.log = (...args) => {
3.   originalConsoleLog(...args); // 保持原功能
4.   sendToServer('log', args); // 自定义上报
5. };

复制代码

---

三、动态调试模式开关 🔌

---

1. URL 参数控制调试模式

代码示例：

1. const urlParams = new URLSearchParams(location.search);
2. const debugMode = urlParams.has('debug');
4. if (debugMode) {
5.   localStorage.setItem('debug', 'true'); // 持久化调试状态
6.   console.log('调试模式已开启');
7. }
9. // 根据调试模式加载不同资源
10. if (debugMode) {
11.   import('./src/dev-tools.ts'); // 加载调试工具
12. }

复制代码

安全步调：

• 后端校验参数权限（如特定IP或Token）
  
• 生产情况默认潜伏调试入口
  

---

2. 情况变量区分构建模式

Vite 设置：

1. // vite.config.js
2. export default defineConfig(({ mode }) => ({
3.   define: {
4.     __DEBUG__: mode === 'development' // 开发模式下启用调试
5.   }
6. }));

复制代码

代码中利用：

1. if (__DEBUG__) {
2.   console.log('当前为调试模式，敏感操作已禁用');
3. }

复制代码

---

四、本地 Source Map 调试方案 🔍

---

1. 欣赏器直接关联本地源码

步调：

• 构建时天生 source-map
  
• 在 Chrome DevTools 中设置：
  
  
  
  • 打开 Sources 面板 → Overrides
    
  • 映射网络资源到本地文件体系
    
  
  

结果：

---

2. VS Code 调试生产代码

设置 .vscode/launch.json：

1. {
2.   "version": "0.2.0",
3.   "configurations": [
4.     {
5.       "type": "chrome",
6.       "request": "launch",
7.       "name": "Debug Production",
8.       "url": "http://localhost:3000?debug",
9.       "webRoot": "${workspaceFolder}/src",
10.       "sourceMaps": true,
11.       "sourceMapPathOverrides": {
12.         "webpack:///./*": "${webRoot}/*"
13.       }
14.     }
15.   ]
16. }

复制代码

---

五、方案对比与选型发起 📊

方案实用场景长处缺点构建注入版本全部项目无第三方依靠，快速定位版本需自行实现错误网络Source Map 剖析必要精准定位生产错误安全可靠，还原源码位置需手动管理 .map 文件全局错误捕捉自有错误监控体系完全可控，数据私有需后端支持，开辟资本较高动态调试模式告急题目排查机动开关，不影响平凡用户存在安全风险，需严酷权限控制欣赏器 Overrides前端开辟者本地调试直接修改生产代码，及时见效仅限本地利用，无法团队协作

---

六、终极总结 🎯

「构建时埋点 + 欣赏器捕捉 + 动态调试」三位一体：

• 通过构建工具注入版本和 Source Map，创建代码与报错的正确映射
  
• 利用全局错误监听实现自主上报，摆脱对 Sentry 的依靠
  
• 联合 URL 参数动态开启调试模式，安全高效排盘题目
  

一句话代价：
无需依靠 Sentry，通过前端工程化本领打造自闭环的线上题目定位体系，让每一次报错都“有迹可循、有版可查”。 🔍🚀