学习
实践
活动
专区
工具
TVP
写文章
专栏首页前端之心如何优雅地查看 JS 错误堆栈?
原创

如何优雅地查看 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 随便画一画就好了。

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

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

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

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

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

登录 后参与评论
0 条评论

相关文章

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

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

    Fundebug
  • 如何优雅地在JS中使用枚举定义

    这种代码,后人维护根本无非理解 1,2 这种数字代表的是什么意义,导致维护困难,难于理解业务逻辑等

    w候人兮猗
  • 如何优雅地部署一个 Serverless Next.js 应用

    上一篇《前端福音:Serverless 和 SSR 的天作之合》,详细介绍了 SSR 相关知识,同时也提到了 Serverless 给 SSR 方案带来的福利。...

    腾讯云serverless团队
  • 如何优雅地编写一个高逼格的JS插件?

    在一个风和日丽的早晨,我正悠闲地喝着Coffe,突然领导向我走来,我赶紧熟练地切出VSCode,淡定自若地问:领导,什么事?领导拍了拍我的肩膀:你上次封装的方法...

    茶无味的一天
  • React16中的错误处理

    随着React16的发布越来越接近,我们想宣布一些关于在组件内如何处理JavaScript错误的变化。这些变化包括在React16 Beta版本,并将会成为Re...

    疯狂的技术宅
  • 年薪30w+的软件开发工程师需要掌握的技能

    现在,有这样一种主流观念,压垮了很多新手软件开发者,那就是你需要学习很多东西才能成为软件开发人员,并且很多人不知道从哪里开始起步。如今新手进入软件开发的程序员月...

    一墨编程学习
  • try..catch 不能捕获的错误有哪些?注意事项又有哪些?

    在 JS 中处理错误,我们主要使用try、catch、finally和throw关键字。

    前端小智@大迁世界
  • 每个优秀程序员必须具备的技术技能

    我特别支持软件开发者在他们掌握技术技能的同时去学习“软技能”——事实上,我写了一本关于这方面的书——但是不可否认的是:技术技能很重要。 我的意思是,如果你不能编...

    李海彬
  • 每个优秀程序员必须具备的技术技能

    我特别支持软件开发者在他们掌握技术技能的同时去学习“软技能”——事实上,我写了一本关于这方面的书——但是不可否认的是:技术技能很重要。

    哲洛不闹
  • 如何用7个简单的步骤,在Firefox开发工具中调试JavaScript

    本文将着重于在Firefox的开发工具中调试JavaScript代码。Firefox中的开发工具是一个非常强大的工具,可以加速您的bug查找和修复过程!

    程序你好
  • JS引擎是如何工作的?从调用堆栈到Promise

    有没有想过浏览器如何读取和运行JS代码? 这看起来很神奇,我们可以通过浏览器提供的控制台来了解背后的一些原理。

    Fundebug
  • Node.js的事件循环

    为什么这么重要?因为它阐明了 Node.js 如何做到异步且具有非阻塞的 I/O,所以它基本上阐明了 Node.js 的“杀手级应用”,正是这一点使它成功了。

    terrence386
  • JavaScript如何工作:引擎,运行时和调用堆栈的概述

    随着JavaScript越来越受欢迎,团队正在利用这个技术栈在多个层次- 前端,后端,混合应用程序,嵌入式设备等等提供支持。

    frontoldman
  • JavaScript 是如何工作的:JavaScript 的内存模型

    作为程序员,声明变量、初始化变量(或不初始化变量)以及稍后为它们分配新值是我们每天都要做的事情。

    Fundebug
  • 解读 JavaScript 之引擎、运行时和堆栈调用

    随着 JavaScript 变得越来越流行,很多团队在他们的堆栈中实现诸多层级的支持 - 前端、后端、混合应用程序、嵌入式设备等等。

    JS菌
  • 要深入 JavaScript,你需要掌握这 36 个概念

    你可能会经常听到一些人在抱怨 JS 很奇怪,有时甚至是一文不值。 之所以有这种想法,是因为他们不太了解 JS 背后的运作方式。 我也觉得 JS 在某些情况处理方...

    前端小智@大迁世界

扫码关注腾讯云开发者

领取腾讯云代金券