浏览器中如何eval带内联source map的代码以获取正确的异常调用栈

核心原因 #

默认情况下，JavaScript引擎不会主动解析eval执行代码中携带的sourceMappingURL注释，因此抛出异常时的调用栈只能指向eval代码的位置，无法映射到源码。

解决方案 #

方案1：浏览器环境用动态脚本加载（首选，无额外依赖） #

将代码封装为Blob临时资源，通过script标签的src属性加载，浏览器会自动解析这类脚本携带的sourcemap：

// 你的带内联sourcemap的代码，注意删除末尾多余的双引号
const code = `let b = 'sws';
let f = 'zzz';
console.log('wow');
function ff() {
    console.log('wwwww');
    return 'WEEE'.tr();
}
console.log(ff());
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGVzdC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbInRlc3QudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsSUFBSSxDQUFDLEdBQUcsS0FBSyxDQUFDO0FBQ2QsSUFBSSxDQUFDLEdBQUcsS0FBSyxDQUFDO0FBQ2QsT0FBTyxDQUFDLEdBQUcsQ0FBQyxLQUFLLENBQUMsQ0FBQTtBQUVsQixTQUFTLEVBQUU7SUFDUCxPQUFPLENBQUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxDQUFBO0lBQ3BCLE9BQU8sTUFBTSxDQUFDLEVBQUUsRUFBRSxDQUFDO0FBQ3ZCLENBQUM7QUFDRCxPQUFPLENBQUMsR0FBRyxDQUFDLEVBQUUsRUFBRSxDQUFDLENBQUEifQ==`;

// 生成临时脚本加载执行
const blob = new Blob([code], { type: 'application/javascript' });
const tempUrl = URL.createObjectURL(blob);
const script = document.createElement('script');
script.src = tempUrl;
document.head.appendChild(script);

// 执行完成后释放临时资源
script.onload = script.onerror = () => URL.revokeObjectURL(tempUrl);

方案2：Node.js环境开启内置sourcemap支持 #

启动Node.js进程时添加--enable-source-maps参数，即可自动识别eval代码中的内联sourcemap，报错栈会自动映射到原文件位置。

方案3：手动解析sourcemap转换调用栈 #

如果必须使用eval且无法采用上述方案，可以引入source-map库，捕获异常后手动将错误栈中的行列号映射到源码位置。

注意事项 #

你提供的代码示例中，sourceMappingURL行末尾多了一个多余的双引号，需要先删除才能正常解析sourcemap。 #

内容的提问来源于stack exchange，提问作者Oduvan