在前端开发中，当源码在生产环境报错时，我们通常会遇到难以理解的压缩代码。然而，借助Source Map技术，并结合报错堆栈信息或报错行列信息，我们可以使用Node.js来精确定位源码报错的位置。本文将介绍两种方式，一种是通过传入报错堆栈的方式，另一种是通过报错行数和列数定位，同时还会展示如何打印出报错位置上下10行的上下文。
1. 通过传入报错堆栈定位
当浏览器控制台显示报错堆栈时，我们可以借助第三方模块(stackTraceParser)来解析报错堆栈，并提取出报错文件、行数和列数等信息。
示例代码：
const fs = require('fs');
const { SourceMapConsumer } = require('source-map');
const stackTraceParser = require('stacktrace-parser');
// 读取压缩代码和对应的Source Map
const compressedCode = fs.readFileSync('compressed.js', 'utf-8');
const sourceMap = fs.readFileSync('compressed.js.map', 'utf-8');
// 解析报错堆栈，获取报错文件、行数和列数信息
const errorStack = parseErrorStack(); // 解析错误堆栈
const errorLine = errorStack[0].lineNumber;
const errorColumn = errorStack[0].columnNumber;
// 解析Source Map文件
SourceMapConsumer.with(sourceMap, null, consumer => {
// 在源码堆栈中定位报错位置
const originalPosition = consumer.originalPositionFor({
line: errorLine,
column: errorColumn
});
// 输出源码报错位置
console.log('Error occurred at:');
console.log(`- File: ${originalPosition.source}`);
console.log(`- Line: ${originalPosition.line}`);
console.log(`- Column: ${originalPosition.column}`);
// 打印报错位置上下10行的上下文
const lines = fs.readFileSync(originalPosition.source, 'utf-8').split('\n');
const startLine = Math.max(0, originalPosition.line - 10);
const endLine = Math.min(lines.length - 1, originalPosition.line + 10);
console.log('Error context:');
for (let i = startLine; i <= endLine; i++) {
console.log(`${i + 1}: ${lines[i]}`);
}
});
// 解析报错堆栈，提取报错文件、行数和列数信息
function parseErrorStack() {
const error = new Error();
const parsedStack = stackTraceParser.parse(error);
return parsedStack;
}
在上述示例中，我们首先使用fs模块读取压缩代码和对应的Source Map。然后，我们使用stackTraceParser模块解析报错堆栈，提取出报错文件、行数和列数等信息。
接下来，我们使用SourceMapConsumer对象来解析Source Map文件，并根据报错行数和列数找到源码报错的位置。最后，我们将得到的源码报错位置进行输出，并打印出报错位置上下10行的上下文。
2. 通过报错行数列数定位
除了使用报错堆栈外，我们还可以直接使用报错行数和列数信息，通过映射Source Map定位源码报错的位置。
示例代码：
const fs = require('fs');
const { SourceMapConsumer } = require('source-map');
// 读取压缩代码和对应的Source Map
const compressedCode = fs.readFileSync('compressed.js', 'utf-8');
const sourceMap = fs.readFileSync('compressed.js.map', 'utf-8');
// 报错文件的行列信息
const errorFile = 'compressed.js';
const errorLine = 10;
const errorColumn = 5;
// 解析Source Map文件
SourceMapConsumer.with(sourceMap, null, consumer => {
// 在源码堆栈中定位报错位置
const originalPosition = consumer.originalPositionFor({
line: errorLine,
column: errorColumn
});
// 输出源码报错位置
console.log('Error occurred at:');
console.log(`- File: ${originalPosition.source}`);
console.log(`- Line: ${originalPosition.line}`);
console.log(`- Column: ${originalPosition.column}`);
// 打印报错位置上下10行的上下文
const lines = fs.readFileSync(originalPosition.source, 'utf-8').split('\n');
const startLine = Math.max(0, originalPosition.line - 10);
const endLine = Math.min(lines.length - 1, originalPosition.line + 10);
console.log('Error context:');
for (let i = startLine; i <= endLine; i++) {
console.log(`${i + 1}: ${lines[i]}`);
}
});
在上述示例中，我们同样使用fs模块读取压缩代码和对应的Source Map文件，并声明报错行数和列数信息。然后，我们使用SourceMapConsumer对象来解析Source Map文件，并根据报错行数和列数找到源码报错的位置。
最后，我们将得到的源码报错位置进行输出，并打印出报错位置上下10行的上下文。
通过以上两种方式，我们可以使用Node.js解析Source Map，并通过传入报错堆栈或报错行列信息来定位源码报错位置。同时，我们还展示了如何打印出报错位置上下10行的上下文，以便更好地理解错误发生的上下文环境。
最终实现效果：
img_v2_7d6382f6-ffe1-495d-90bd-6a29dc7a431g.jpg
image.png
