使用 Node.js 的源代码映射 (Sourcemap) 在报错时定位开发代码及打印上下文

在前端开发中，当源码在生产环境报错时，我们通常会遇到难以理解的压缩代码。然而，借助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