文档章节

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

腾讯云加社区
 腾讯云加社区
发布于 01/15 11:56
字数 663
阅读 512
收藏 9

本文由云+社区发表

在前端,我们经常会通过 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 压缩的,所以堆栈可读性相当的差。假如有下面的一个堆栈查看工具,又如何?

img堆栈查看工具

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

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

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

img堆栈工具实现原理

一步步来说的话:

  • 拿到原始堆栈字符串,使用

    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);

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

js-loader.html.zip

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

此文已由作者授权腾讯云+社区在各渠道发布

获取更多新鲜技术干货,可以关注我们腾讯云技术社区-云加社区官方号及知乎机构号

© 著作权归作者所有

共有 人打赏支持
腾讯云加社区
粉丝 151
博文 223
码字总数 593043
作品 0
深圳
私信 提问
解读 JavaScript 之引擎、运行时和堆栈调用

随着 JavaScript 变得越来越流行,很多团队在他们的堆栈中实现诸多层级的支持 - 前端、后端、混合应用程序、嵌入式设备等等。 本文是该系列文章的第一篇,旨在深入研究 JavaScript 及其实际工...

oschina
2017/12/13
3.6K
0
JavaScript的工作原理:引擎,运行时和调用堆栈

翻译:疯狂的技术宅 原文:blog.sessionstack.com/how-does-ja… 随着JavaScript变得越来越流行,越来越多的团队正在利用他们为技术栈中做多个级别的支持:前端、后端、混合应用、嵌入式设备...

京程一灯
01/16
0
0
【译】学习JavaScript中提升、作用域、闭包的终极指南

这似乎令人惊讶,但在我看来,理解JavaScript语言最重要和最基本的概念是理解执行上下文。通过正确学习它,你将很好地学习更多高级主题,如提升,作用域链和闭包。考虑到这一点,究竟什么是“...

燎原之火
2018/12/24
0
0
JavaScript是如何工作的:引擎,运行时和调用堆栈的概述!

本文是旨在深入研究JavaScript及其实际工作原理的系列文章中的第一篇:我们认为通过了解JavaScript的构建块以及它们是如何工作的,将能够编写更好的代码和应用程序。我们还将分享构建 SeStHe...

架构师springboot
01/28
0
0
JavaScript 中错误正确处理方式,你用对了吗?

原文出处: Camilo Reyes 译文出处:葡萄城控件 JavaScript的事件驱动范式增添了丰富的语言,也是让使用JavaScript编程变得更加多样化。如果将浏览器设想为JavaScript的事件驱动工具,那么当...

新生大学
2017/10/25
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Alpakka Kafka,反应式Kafka客户端

Alpakka Kafka 是一个要用于 Java 和 Scala 语言的开源的流感知和反应式集成数据线项目。它建立在 Akka Stream之上,提供了 DSL 来支持反应式和流式编程,内置回压功能。Akka Streams 是 Re...

羊八井
33分钟前
4
0
PHP7源码编译安装详解

$ yum groupinstall "development tools"$ yum install -y gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype \freetype-devel libpng libpng-devel libxml2 ......

问题终结者
37分钟前
5
0
Django学习笔记-从创建虚拟环境到启用服务

1 前置条件 windows系统下,目前已经完成anaconda3或miniconda3的安装,这也意味着已经完成了python3的安装。 2 创建虚拟环境 1、通过Anaconda Prompt,使用conda命令创建虚拟环境(base) e...

davidwbnu
昨天
3
0
python学习04:函数的定义及基本使用

python可以像c++一样,可以直接定义函数。具体格式如下: def(关键字) 函数名(形参01,形参02...): do_something... #如果有返回值,则调用以下语句 return 返回值...

太空堡垒
昨天
3
0
深夜杂想

今天周六,从上午9点钟一直码代码到下午5点钟。然后下午又睡了很久。吃过晚饭后来本想晚上再写点代码,不知道为啥,没有任何状态,一直发呆到现在。想起自己计划在元旦节(或者春节)写点自己...

元谷
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部