如何在Ionic自定义错误处理器中获取错误的文件及行号？

嘿，我来帮你搞定这个问题！你的全局错误处理器目前只能捕获错误消息，要拿到对应的文件和行号其实很简单——JavaScript的Error对象本身就带着这些关键信息，藏在它的stack属性里。

核心思路 #

每个Error实例都有一个stack属性，里面包含了完整的调用栈追踪信息，其中就包含出错的文件路径、行号甚至列号。虽然不同浏览器或运行环境的栈信息格式略有差异，但核心内容是一致的，我们可以通过解析这个属性来提取需要的信息。

修改后的代码示例 #

你可以把GlobalErrorHandler的handleError方法改成这样：

import { ErrorHandler, Injectable } from '@angular/core';
import { EventsService } from './events-service';

@Injectable()
export class GlobalErrorHandler implements ErrorHandler {
  constructor (private eventsService: EventsService) {}

  handleError(error: Error) {
    const message = error.message ? error.message : error.toString();
    let fileAndLineInfo = '';

    // 解析错误栈，提取文件和行号
    if (error.stack) {
      // 栈的第二行通常是出错的具体位置（第一行一般是错误消息）
      const firstStackLine = error.stack.split('\n')[1];
      // 用正则匹配提取文件路径、行号、列号（适配Chrome、Firefox等主流环境）
      const matchResult = firstStackLine.match(/(https?:\/\/[^:\s]+):(\d+):(\d+)/);
      
      if (matchResult) {
        const fullFilePath = matchResult[1];
        const lineNumber = matchResult[2];
        const columnNumber = matchResult[3];
        // 只保留文件名（如果需要完整路径直接用fullFilePath即可）
        const fileName = fullFilePath.split('/').pop();
        fileAndLineInfo = ` (${fileName}:${lineNumber}:${columnNumber})`;
      }
    }

    // 拼接完整的错误信息
    const fullErrorMessage = `${message}${fileAndLineInfo}`;
    this.eventsService.addEvent({type: 'appError', value: fullErrorMessage}, true);

    // 可选：保留控制台错误输出，方便本地调试
    console.error(error);
  }
}

几点说明 #

• 为什么取栈的第二行？：大多数环境下，error.stack的第一行是错误的描述文本（比如Error: 未定义的变量），第二行才是实际触发错误的代码位置。
• 正则适配：上面的正则能匹配Chrome、Firefox、Edge等主流浏览器的栈格式，如果你的应用需要兼容Safari，可以调整正则表达式来适配它的栈格式（比如Safari的栈条目格式是functionName@file:line:column）。
• 路径简化：我这里用split('/').pop()把完整路径简化成了文件名，这样上报给服务器的信息更简洁；如果需要完整路径排查问题，直接用fullFilePath替换即可。
• 默认错误处理：加上console.error(error)可以保留本地调试时的错误栈输出，方便开发阶段排查问题。

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