web 前端

使用 Node.js 的源代码映射 (Sourcemap) 在报

2023-08-08  本文已影响0人  赵佳乐1016

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

猜你喜欢

热点阅读