如何在 Angular 5 中获取导致错误的组件名称

Question

我在我的 Angular 应用程序中创建了全局错误处理程序:

export class GlobalErrorHandlerComponent implements ErrorHandler {

  constructor(private injector: Injector) { }

  handleError(error: Error) {
    const router = this.injector.get(Router);
    console.log(error.name);
    console.log(router.url);
    console.log(error.message);
    const route = this.injector.get(ActivatedRoute);
    var snapshot = route.snapshot;
    console.log(snapshot.routeConfig.component.name); //unlucky it doesnt work :(
  }
}

我已经获取到了所有需要进行统计的数据，不过我也想要导致错误发生的组件名称。我尝试了许多方法（其中一些看起来比较有意义），但不幸的是它们并没有起作用。是否有任何方法可以获取这些信息？

编辑：样本日志 样本日志 v2 :)

- Adam

---

你能展示一份错误的样本输出快照吗？ - Woohoojin

我加了截图 :) - Adam

error.stack 是你的错误变量的一个属性吗？@Adam 引起错误的组件应该在堆栈跟踪中，我第一个问题表述不清楚，你能提供 console.log(error) 的输出吗？ - Woohoojin

我加了一个笑脸:) 那么唯一的方法就是解析堆栈跟踪？:( - Adam

很不幸，据我所知是的。打印堆栈跟踪的第一行是否能够得到期望的结果？ - Woohoojin

Answer 1

据我所知，通过error.stack查看堆栈跟踪是查看抛出错误的组件（以及哪一行）的唯一方法。

但要注意，似乎并非所有浏览器都支持error.stack，因此您可能希望使用类似以下代码来避免出现任何双重错误：

try {
    console.log(error.stack);
} catch {
    console.log("Your browser does not support printing the stackTrace");
    // Nothing here, code contiues without throwing error.
}

- Woohoojin