如何将PromiseRejectionEvent转为含有效位置信息的ErrorEvent？

核心思路 #

PromiseRejectionEvent的reason属性如果是Error实例，本身就包含完整的栈跟踪信息，我们可以通过解析栈字符串提取原错误的文件名、行号和列号，这比尝试创建无效的ErrorEvent更可靠。

方案一：解析Error栈提取位置 #

直接利用错误实例的栈信息，提取第一个有效调用帧的位置：

window.addEventListener('unhandledrejection', (event) => {
  // 跳过默认处理，避免浏览器默认提示
  event.preventDefault();
  
  if (event.reason instanceof Error) {
    const stackLines = event.reason.stack.split('\n');
    // 跳过第一行（Error类型描述），取第二个栈帧
    const targetLine = stackLines[1]?.trim();
    if (!targetLine) return;

    // 适配Chrome/Firefox等主流浏览器的栈帧格式
    const match = targetLine.match(/(?:at .+ )?\((.+?):(\d+):(\d+)\)$/);
    if (match) {
      const [, filename, lineno, colno] = match;
      // 这里可以用这些信息做自定义错误上报或日志
      console.error(`未捕获Promise错误：${event.reason.message}`);
      console.error(`位置：${filename} 行${lineno} 列${colno}`);
    }
  } else {
    // 处理非Error类型的拒绝原因
    console.error(`未捕获Promise拒绝：${event.reason}`);
  }
});

方案二：兼容非Error类型的拒绝原因 #

如果Promise被非Error值拒绝，我们可以手动生成Error并捕获栈（注意：这种情况只能获取到事件处理函数的位置，而非原拒绝点，仅作兜底）：

window.addEventListener('unhandledrejection', (event) => {
  event.preventDefault();
  
  let error = event.reason;
  if (!(error instanceof Error)) {
    error = new Error(`Promise拒绝：${String(error)}`);
    // 捕获当前栈，排除当前处理函数本身
    Error.captureStackTrace(error, arguments.callee);
  }

  // 复用方案一的栈解析逻辑
  const stackLines = error.stack.split('\n');
  const targetLine = stackLines[1]?.trim();
  if (targetLine) {
    const match = targetLine.match(/(?:at .+ )?\((.+?):(\d+):(\d+)\)$/);
    if (match) {
      const [, filename, lineno, colno] = match;
      console.error(error.message);
      console.error(`位置：${filename} 行${lineno} 列${colno}`);
    }
  }
});

关键注意点 #

• 不同浏览器的栈帧格式存在细微差异，需要调整正则表达式适配（比如Safari的栈帧格式可能略有不同）
• 原生ErrorEvent无法通过手动构造获取原错误的位置信息，因为它的位置是事件派发时的调用栈，而非错误抛出点，解析Error栈是唯一可行的方案

内容的提问来源于stack exchange，提问作者Raúl Núñez de Arenas Coronado