Vue3 + Vite生产环境如何获取有效的运行时错误信息？

要解决Vite打包后错误栈失去可读性的问题，核心是利用Source Map将混淆后的代码位置映射回原文件，同时结合Vue自带的错误上下文信息，具体方案如下：

1. 生成生产环境Source Map #

Vite默认生产环境不生成Source Map，需在vite.config.js中开启hidden模式的Source Map——这种模式下，Source Map文件会单独生成但不会被注入到打包后的JS文件中，避免暴露源码给用户：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    // 生成隐藏式Source Map，仅用于错误解析
    sourcemap: 'hidden',
  }
})

2. 解析混淆后的错误栈 #

打包后的错误栈路径是混淆后的文件名和压缩后的行号，需要通过Source Map映射回原组件文件和真实行号，推荐在后端处理解析（避免前端加载Source Map文件）：

后端解析示例（Node.js） #

使用source-map库解析错误栈：

const { SourceMapConsumer } = require('source-map');
const fs = require('fs').promises;

async function parseMinifiedErrorStack(stack, distPath) {
  // 拆分错误栈的每一行
  const stackLines = stack.split('\n');
  const parsedLines = [];

  for (const line of stackLines) {
    // 匹配混淆后的错误位置格式
    const match = line.match(/at .+ \((.+):(\d+):(\d+)\)/);
    if (!match) {
      parsedLines.push(line);
      continue;
    }

    const [, minifiedFile, lineNum, colNum] = match;
    // 对应Source Map文件路径
    const sourceMapPath = `${distPath}/${minifiedFile}.map`;
    
    try {
      const sourceMapContent = await fs.readFile(sourceMapPath, 'utf8');
      const consumer = await new SourceMapConsumer(sourceMapContent);
      
      // 获取原代码位置
      const originalPos = consumer.originalPositionFor({
        line: parseInt(lineNum),
        column: parseInt(colNum)
      });

      if (originalPos.source && originalPos.line) {
        // 替换为原文件路径和行号
        parsedLines.push(line.replace(
          `(${minifiedFile}:${lineNum}:${colNum})`,
          `(${originalPos.source}:${originalPos.line}:${originalPos.column})`
        ));
      } else {
        parsedLines.push(line);
      }
      
      consumer.destroy();
    } catch (e) {
      // 解析失败则保留原行信息
      parsedLines.push(line);
    }
  }

  return parsedLines.join('\n');
}

3. 利用Vue错误处理器的上下文信息 #

Vue的errorHandler第三个参数info会提供错误发生的上下文场景（比如是在mounted钩子、点击事件还是渲染函数中出错），即使生产环境也能正常获取，可辅助快速定位问题：

app.config.errorHandler = (err, instance, info) => {
  // 上报错误时携带上下文信息
  reportError({
    message: err.message,
    stack: err.stack,
    componentName: instance?.$options.name, // 获取组件名
    errorContext: info // 错误场景（如"render function"、"v-on handler"）
  });
};

4. 可选：保留组件文件名（降低混淆程度） #

如果希望错误栈中直接显示组件原名，可配置Terser保留类名/函数名（会轻微影响压缩率）：

export default defineConfig({
  build: {
    sourcemap: 'hidden',
    minify: 'terser',
    terserOptions: {
      keep_classnames: true, // 保留组件类名
      keep_fnames: true // 保留函数名
    }
  }
})

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