如何优雅地查看 JS 错误堆栈?

在前端,我们经常会通过 window.onerror 事件来捕获未处理的异常。假设捕获了一个异常,上报的堆栈是这个:

TypeError: Cannot read property 'module' of undefined
    at Object.exec (https://my.cdn.com/dest/app.efe91e855d7432e402545e7d6c25d2d9.js:16:29828)
    at HTMLLIElement.<anonymous> (https://my.cdn.com/dest/app.efe91e855d7432e402545e7d6c25d2d9.js:25:6409)
    at HTMLDivElement.dispatch (https://my.cdn.com/dest/vendor.eb28ded1876760b8e90973c9f4813a2c.js:1:248887)
    at HTMLDivElement.y.handle (https://my.cdn.com/dest/vendor.eb28ded1876760b8e90973c9f4813a2c.js:1:245631)

这个堆栈,你看得出问题来吗?我们发布到 CDN 的脚本文件,普遍是经过 UglifyJS 压缩的,所以堆栈可读性相当的差。假如有下面的一个堆栈查看工具,又如何?

堆栈查看工具

眼尖的同学,一眼就能找到问题。这里的 p[e] 出现了可能为 undefined 的情况。

这样一个工具,大大提高了问题定位的效率。

好,这里不卖瓜,我们来看下这当中的实现原理。

堆栈工具实现原理

一步步来说的话:

  • 拿到原始堆栈字符串,使用 error-stack-parser 解析为堆栈帧,每个堆栈帧包含三个最重要的字段:
    • url - 源码的 URL 地址
    • line - 堆栈位置行号
    • col - 堆栈位置列号
  • 对于 url,我们可以用于加载源码内容,得到 source
  • source 使用 UglifyJs 反向美化成多行的代码 prettysource,并且同时生成 sourcemap
  • 堆栈帧中的 linecol 通过 sourcemap 反查,得到美化后对应的 prettylineprettycol
  • prettysourceprettylineprettycol 给到 Monaco Editor 渲染,就可以得到上述截图的效果

说那么多,不如贴代码是吧:

var result = UglifyJS.minify(source, {
  output: {
    beautify: true
  },
  sourceMap: {
    filename: 'pretty.js',
    url: 'pretty.js.map'
  }
});
var code = result.code;
var rawSourceMap = JSON.parse(result.map);
var consumerPromise = new sourceMap.SourceMapConsumer(rawSourceMap);

resolve(
  consumerPromise.then(function(consumer) {
    return {
      code: code,
      sourceMapConsumer: consumer
    }
  })
);

上面就是使用 UglifyJs 对压缩代码进行反向美化的核心代码。下面给出 SourceMap 的使用源码:

var code = result.code;
var consumer = result.sourceMapConsumer;

var position = consumer.generatedPositionFor({
  source: '0',
  line: lineNumber,
  column: columnNumber
});

parent.postMessage({
  event: 'js-prettify-callback',
  payload: {
    hash: payload.hash,
    result: 'success',
    prettySource: code,
    prettyLineNumber: position.line,
    prettyColumnNumber: position.column + 1
  }
}, sourceOrigin);

完整源码有兴趣的读者也可以下下来把玩把玩:

源码只包含堆栈解析的实现,UI 的实现不在本文的讨论之内,用 React 随便画一画就好了。

喜欢本文的,请不要吝啬点赞转发,特别喜欢的,欢迎给我打赏😍。

同时欢迎在评论区和我讨论。

订阅我们的专栏「前端之心」,每周都会有干货。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端迷

ajax和fetch、axios的优缺点以及比较

前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch。

3.3K2
来自专栏晨星先生的自留地

从协议提取到多功能RDP识别脚本

3638
来自专栏佳爷的后花媛

json & jsonp

对于JSON和JSONP,应该都不陌生,咳咳,不过最初对JSONP有点误解,以为是JSON的另外一个别名,其实二者风马牛不相及。

2033
来自专栏Golang语言社区

GoLang并发控制(上)

首先解释golang中的channel:channel是go中的核心部分之一,结构体简单概括就是一个ring队列+一个锁 有兴趣的同学可以去研究一下源码构建。在...

3272
来自专栏文大师的新世界

9. redux如何精简代码

通过之前的代码不难看出redux系统里的ActionType、Action、Reducer都有一定的共性,小项目无所谓,这样写更清晰,但是一旦组件以及业务增多,...

1805
来自专栏老马寒门IT

开发者的如何优雅的使用OSX

Mac对于IT开发者来说是最好的开发工具,没有之一。

24710
来自专栏ml

CEF使用的几个注意点

    CEF为chrome浏览器的切入其他浏览器中的轻量级框架。 开发的客户端的时候,这是作为界面显示的首先,可以增强客户的易变性,可塑性。 在开发的过程中(...

63510
来自专栏老马寒门IT

开发者的如何优雅的使用OSX

Mac对于IT开发者来说是最好的开发工具,没有之一。 但是对于大部分人来说,第一个接触的PC操作系统都是Windows系统,此文将带大家优雅的快速学习和使用Ma...

2843
来自专栏小曾

.Net Web开发技术栈

有很多朋友有的因为兴趣,有的因为生计而走向了.Net中,有很多朋友想学,但是又不知道怎么学,学什么,怎么系统的学,为此我以我微薄之力总结归纳写了一篇.Net w...

4073
来自专栏QQ会员技术团队的专栏

Android 动态库压缩壳的实现

计算机软件领域所说的壳实际上是一种软件加密技术。壳主要分为两大类:加密壳和压缩壳,加密壳侧重于防止软件被篡改,而压缩壳则侧重于减小软件体积。其实,在Window...

1.8K1

扫码关注云+社区

领取腾讯云代金券