产品经理：排查下线上哪里冒出个“系统异常”的错误提示

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第N天，点击查看活动详情^[1]

起因

之前的某天晚上，笔者正在家吹着空调，欣赏着掘友们的创作呢，突然微信群来了个通知，打开一看：

有人@了你，去看看线上环境XXX页面有个"系统异常"的错误提示

还截了个图：

笔者内心（让不让人休息了，又不是我写的，让我看个锤子），不爽归不爽，问题还是得老老实实看。

看完你将学会

• 快速定位此类JavaScript异常

搞起

分析问题

• 打开环境
• 打开F12
• 打开XXX页面

是有个”系统异常“，控制台没有报错，考虑是 catch 到异常在代码中调用 Message弹出的，应该有两种情况：

• 接口请求 .catch

// 比如
axios.get('/user?ID=12345')
  .then(function(response) {
    console.log(response)
  })
  .catch(function(error) {
    Message({ message: '系统异常', type: 'error' })
    console.log(error)
  })

• try catch

// ...
try {
  // ...
} catch (err) {
  // ...
  Message({ message: '系统异常', type: 'error' })
  // ...
}
//...

总之能知道是调用了Message这个函数，那就有办法了

验证分析

先找到Message所在的文件：

• Sources -> Page

• Message是属于xxxxUI里的一个组件

虽然文件经过打包压缩了，但是还是可以通过一些关键字找到这个组件被编译过后的位置

• 找到位置就好办了

函数中打个断点，哪里不会打哪里

• 再去打开报错的页面

终于找到你了，通过看JavaScript的执行栈，就可以找到是哪了

分析正确

果然是catch里的

截图发群里，这个锅我不背，哈哈哈

总结

其实工作中很多问题都可以通过笔者这种方法（观察JavaScript执行栈）去快速定位到问题，特别是不熟悉的代码。

参考资料

[1]

https://juejin.cn/post/7123120819437322247: https://juejin.cn/post/7123120819437322247