source-map解析源码_sourcemap解析-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_42975676/article/details/135653456

本文介绍了如何在Vue项目中利用`source-map`库解析打包后的源代码位置，以及如何使用`errorHandler`捕获并处理错误。特别提到`window.onerror`和`window.addEventListener(error)`在打包后的失效情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

执行下列代码从map文件解析出源码位置

var sourceMap = require("source-map");
var fs = require("fs");
// 此处替换为你下载下来的 sourcemap 文件
let data = fs.readFileSync("../index.js.5d59fc.js.map").toString();
const consumer = new sourceMap.SourceMapConsumer(data);
consumer.then(c => {
  // 此处替换为原始报错的行列号
  const line = 23,
    column = 112003;
  let s = c.originalPositionFor({ line, column });
  console.log(s);
  console.log(`origin code for line: ${line}, ${column}\n`);
  console.log(
    `======================================================================`
  );
  console.log(
    c
      .sourceContentFor(s.source)
      .split("\n")
      .slice(Math.max(s.line - 10, 0), s.line + 10)
      .join(`\n`)
  );
  console.log(
    `======================================================================`
  );
});

vue中
window.οnerrοr=()=>{}
和
window.addEventListener(‘error’,()=>{})
在打包后会失效
可以使用

 app.config.errorHandler = function (err, vm, info) {
    console.log('vue捕获er', JSON.stringify(err));
    console.log('vue捕vm获', vm);
    console.log('vue捕获info', info);
    console.log('--err-', ErrorStackParser.parse(err as any));
    throw err;
  };