Angular项目日志栈追踪需显示原始调用方行号

这问题我之前在团队项目里也碰到过，核心原因很简单：console.log的栈追踪是由它实际执行的文件位置决定的。你的loggerService.log方法在依赖项目的index.js里调用了console.log，所以栈追踪默认会指向这个位置，而不是主应用里调用loggerService.log的地方。

下面给你几个实用的解决方案，按推荐程度排序：

方法1：手动提取调用方栈信息（最靠谱） #

修改依赖项目中LoggerService的log方法，通过创建Error对象获取完整调用栈，筛选出主应用的调用位置后再输出。这种方式不需要改动主应用代码，还能精准定位到调用行：

// 依赖项目的logger.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class LoggerService {
  log(message: string): void {
    const error = new Error();
    // 解析栈信息：不同环境（Chrome/Node）的栈格式略有差异，这里以常见格式为例
    const stackLines = error.stack?.split('\n') || [];
    
    // 跳过当前log方法和Angular内部调用，找到主应用的调用行
    let callerLine = '';
    for (const line of stackLines) {
      // 假设主应用代码路径包含'src/app'，依赖项目路径包含'node_modules/your-dependency'
      if (line.includes('src/app') && !line.includes('node_modules')) {
        callerLine = line.trim();
        break;
      }
    }

    // 输出日志和调用位置
    if (callerLine) {
      console.log(`${message}\n[调用位置] ${callerLine}`);
    } else {
      // 找不到主应用行时的降级处理：输出完整栈
      console.log(message, error.stack);
    }
  }
}

方法2：利用console.trace快速查看栈帧 #

如果你不想手动解析栈信息，可以直接用console.trace输出完整调用栈，之后在浏览器控制台里手动折叠依赖项目的栈帧即可：

// 依赖项目的logger.service.ts
log(message: string): void {
  console.trace(message);
}

调用后控制台会展示完整栈，你只需要点击栈帧旁的箭头，折叠掉node_modules相关的部分，就能清晰看到主应用的调用位置了。

方法3：确保依赖项目生成SourceMap（辅助优化） #

如果你的依赖项目是编译打包后引入的，记得在依赖项目的构建配置里开启SourceMap生成。这样栈追踪会显示源码的行号，而不是编译后index.js的混淆行号，方便你更快定位问题。

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