Node.js 中 source map 使用问题总结

起源

Node 应用功能越来越复杂,很多业务都开始尝试使用 TypeScript 来开发。现在前端写的 JS 大部分是经过编译过程的,浏览器中通过 source map 的使用,可以很好的解决源码和编译运行时代码差异的问题。

那么,在 Node 服务器环境应该如何使用 source map 呢?最近在重新搭建一个完全基于 ts 的 Node 应用,所有的相关流程看起来都挺好的,唯一的缺陷是报错信息错误信息指向的是 js 文件。我觉得应该探索下如何让 Node 支持 source map 。

原理

对于 Node 而言,服务器 source map 最大的价值在于错误信息有正确的错误堆栈,所以只要我们能够实现自定义错误堆栈信息就可以了。

恰好 v8 引擎有提供一个私有的 (Stack-Trace-API), 这个提供了让开发者自定义错误 stack 信息的能力。具体来说,开发者可以实现 Error 对象的 prepareStackTrace 方法,如果 Error 对象上定义了这个方法,那么每次错误信息都会经过 Error.prepareStackTrace 处理后返回。

Error.prepareStackTrace 方法可以拿到两个参数,错误基本信息和结构化错误堆栈,第二个参数是一个数组,通过这个数组可以拿到错误文件以及位置信息。最后基于这些信息重新返回一个字符串,这样就可以覆盖 Error 对象的 stack 属性了。

基本代码结构如下:

function prepareStackTrace(error, stack) {
  return error + stack.map(function(frame) {
    return '\n    at ' + wrapCallSite(frame);;
  }).join('');
}
Error.prepareStackTrace = prepareStackTrace;

wrapCallSite 方法里面可以通过分析源码,找到 sourceMap 然后返回正确的位置信息。

原理很简单,已经有一个 npm 包 source-map-support 封装好了相关功能。

这看起来已经很完美了。source map 读取只在出现错误的时候才执行,所以这个功能不会有性能问题,在生成环境也可以开启

问题

Stack Trace API 看起来很美好,但现实场景总是更加复杂。我在引入 source-map-support 后,运行起来没什么问题,但在跑测试用例的时候,错误堆栈的位置信息完全不对。

这个问题排查了很久,最终定位到在 wrapCallSite 方法中拿到的 frame 对象返回的行号就是错误的,而这个获取行号的方法是 native code ,这个几乎没法调试了。我想,难道是 Node 的问题?要调试到 Node 源码么?

折腾了很久没有什么效果,就在我打算放弃的时候,我换了一个假设,会不会是某个包依赖影响的?然后我尝试依次删除跑用例时 require 的包,终于发现是因为 egg-bin 默认引入的 power-assert 导致的。

问题定位到后,解决就容易了。但解决这个问题得先讲讲 power-assert 是如何实现的。

power-assert 与 sourceMap

power-assert 作为一个断言库,最大的特色在于错误信息的报告是非常友好的,一张图可以很清晰看到区别

实现这样炫酷的报告是需要做一些特殊的处理,把测试用例的代码进行一次转换,举个例子

it('foo', function foo() {
  var a = 'foo';
  var b = 'b';
  assert(a === b);
});

经过 espower-source 处理后,变成了这样

it('foo', function foo() {
  var a = 'foo';
  var b = 'b';
  assert(expr(capture(capture(a, '/0/left') === capture(b, '/0/right'), '/0'), {
      content: 'assert(a === b)',
      filepath: 'bizLogger.test.ts',
      line: 107
  }));
})

注:上面的代码不是真实运行的代码,经过一些删减

对于 assert(a === b); 这样一个表达式,会通过 capture 捕获每一个运算过程的位置和值,最终通过 expr 运算。这样经过转换后,代码运行逻辑不变,但是异常发生的时候可以返回 assert 表达式中每一步的返回值。

我所遇到的问题也就是因为 power-assert 对代码进行了转换,最终异常抛出时,真实 js 异常位置信息是转换后的位置,这个位置自然是无法正确定位到源码位置了。

但只运行 power-assert ,不引用 source-map-support 的时候,错误行号还是对的。这是因为 espower-source 返回重新编译后的源码后,还同时对源码文件的 sourceMap 进行了重新转换。所以大部分情况,我们是无法感知到源码有经过重新编译。

运行简单流程图如下

解决问题

回到最初的问题,跑用例的时候行号不对了。power-assert 的影响在于两点

  1. 测试文件源码会被 power-assert 修改,增加一些信息收集代码
  2. power-assert 同时有引入 source-map-support 来对错误堆栈进行重新定位

当我在我自己的业务中也引入 source-map-support 来重新定位错误堆栈时,我所拿到的源码是被 power-assert 修改过的,所以这时候是无法重新定位到正确的 ts 位置了。

既然 power-assert 有引入 sourceMap ,那么是不是我关闭自己引入的 sourceMap 就可以了呢?理论上是应该如此的,但是因为 power-assert 对 sourceMap 文件不支持(inline sourcemap 是支持的),所以只能定位到 js 源码,无法定位到 ts 源码。

问题确定了,就可以自己动手解决了,我发了一个 mr 让 espower-source 支持 sourceMap 文件,最新版的 power-assert 已经可以正确定位到 ts 源码位置了。

另外,还有一个问题,正常情况 source-map-support 同时引入两遍,只要引入的文件路径一直,也是不会有问题的。但 power-assert 使用的还是老版本 source-map-support ,而且老版定位位置信息还是不够准确,这个也很好解决,升级依赖版本既可以。

这两个问题解决后,在自己的业务用引入 source-map-support 也没有问题了,power-assert 返回的错误堆栈也可以正确的指向 sourceMap 位置了。

总结

基于 V8 的 Stack Trace API 的使用,浏览器的 sourceMap 能力也可以应用到 Node 服务器场景下,使用 npm 包 source-map-support 就可以了。

有时候可能会遇到一些奇怪的错误行号的问题,这可能是某个依赖包对 js 进行了转换,毕竟这在前端太常见了,动不动就重新编译 js 源码。

时间: 2025-01-06 00:36:00

Node.js 中 source map 使用问题总结的相关文章

浅析Node.js 中 Stream API 的使用_node.js

本文由浅入深给大家介绍node.js stream api,具体详情请看下文吧. 基本介绍 在 Node.js 中,读取文件的方式有两种,一种是用 fs.readFile ,另外一种是利用 fs.createReadStream 来读取. fs.readFile 对于每个 Node.js 使用者来说最熟悉不过了,简单易懂,很好上手.但它的缺点是会先将数据全部读入内存,一旦遇到大文件的时候,这种方式读取的效率就非常低下了. 而 fs.createReadStream 则是通过 Stream 来读取

Node.js中常规的文件操作总结_node.js

前言 Node.js 提供一组类似 UNIX(POSIX)标准的文件操作API. Node 导入文件系统模块(fs)语法如下所示: var fs = require("fs") fs模块是文件操作的封装,它提供了文件的读取.写入.更名.删除.遍历目录.链接等POSIX文件系统操作.与其他模块不同的是,fs模块中所有的操作都提供了异步和同步的两个版本,例如读取文件内容的函数有异步的fs.readFile()和同步的fs.readFileSync() . 一. 目录操作 1. 创建目录 创

Node.js中的process.nextTick使用实例

  这篇文章主要介绍了Node.js中的process.nextTick使用实例,nextTick函数有什么用.怎么用.和setTimeout有什么区别呢,本文就讲解了这些知识,需要的朋友可以参考下 我已经不记得是在哪里第一次看到process.nextTick这个玩意的调用了,哦,应该是在nodejs官方的process文档里看到的.当时就不理解这东西是干嘛的了,都已经有setTimeout了,还需要这个函数干嘛.而且从根本上来说,这个函数又是干嘛的?和setTimeout有什么区别? sta

浅析Node.js中使用依赖注入的相关问题及解决方法

这篇文章主要介绍了浅析Node.js中使用依赖注入的相关问题及解决方法,Node.js是一个将JavaScript应用运行于服务器端的框架,需要的朋友可以参考下 最近,我转向使用依赖注入来帮助理解分离代码的简单途径,并有助测试.然而,Node.js中的模块依赖Node提供的系统API,这很难判断私有依赖被恰当的使用.一般的依赖注入很难在这种情况下使用,但现在不要放弃希望. requireCauses 问题 Node.js很容易依照需求导入依赖.它运行的很好,并且比AMD模式加载器例如Requir

在Node.js中使用HTTP上传文件的方法

  这篇文章主要介绍了在Node.js中使用HTTP上传文件的方法,作者以windows下的visual studio作为操作node的环境,推荐阅读!需要的朋友可以参考下 开发环境 我们将使用 Visual Studio Express 2013 for Web 作为开发环境, 不过它还不能被用来做 Node.js 开发.为此我们需要安装 Node.js Tools for Visual Studio. 装好后 Visual Studio Express 2013 for Web 就会转变成一

浅谈Node.js中的定时器

  本文给大家分享的是Node.js中的定时器的相关资料,十分的全面细致,有需要的小伙伴可以参考下. Node.js中定时器的实现 上一篇博文提到,在Node中timer并不是通过新开线程来实现的,而是直接在event loop中完成.下面通过几个JavaScript的定时器示例以及Node相关源码来分析在Node中,timer功能到底是怎么实现的. JavaScript中定时器功能的特点 无论是Node还是浏览器中,都有setTimeout和setInterval这两个定时器函数,并且其工作特

Node.js中的流(Stream)介绍

 这篇文章主要介绍了Node.js中的流(Stream)介绍,本文讲解了什么是流.pipe方法.流的分类.Readable流状态的切换等内容,需要的朋友可以参考下     什么是流? 说到流,就涉及到一个*nix的概念:管道--在*nix中,流在Shell中被实现为可以通过 |(管道符) 进行桥接的数据,一个进程的输出(stdout)可被直接作为下一个进程的输入(stdin). 在Node中,流(Stream)的概念与之类似,代表一种数据流可供桥接的能力. pipe 流化的精髓在于 .pipe(

Node.js中AES加密和其它语言不一致问题解决办法

 这篇文章主要介绍了Node.js中AES加密和其它语言不一致问题解决办法,例如和C#.JAVA语言相互通信时,需要的朋友可以参考下 例子一:   这几天被一个问题困扰着.Nodejs的AES加密和Java,C#加密出来的不一致.当然,这样就不能解密了.纠结了许久:后来还是实在不行了,看了下源代码,要不然还得继续纠结下去.网上说,通常的nodejs AES和其他语言实现不一样.好吧~~或许吧. nodejs的crypto模块.    代码如下: var crypto = require('cry

在Node.js中使用MySQL&MySQL JavaScript客户端

NoSQL 数据库最近一段时间都是很受追捧的,也许已经是 Node.js 应用程序的首选后端了.不过,你不应该只是根据潮流来选择拿什么技术构建下一个项目,使用什么数据库类型要取决于项目的特定需求.如果你的项目涉及到动态表的创建,实时的插入等等,那么 NoSQL 就是不错的技术路线,而另一方面,如果项目中要处理复杂的查询和事务,那么 SQL 数据库就更加合适了. 在本教程中,我们会向你介绍如何使用 MySQL 模块 - 这是一个用 JavaScript 编写的运行在 Node.js 之上的 MyS