将 Instana 错误跟踪集成到 Angular 2 应用程序中答案

【问题标题】：Integrating Instana error tracking into an Angular 2 application将 Instana 错误跟踪集成到 Angular 2 应用程序中
【发布时间】：2019-05-03 17:23:46
【问题描述】：

我正在尝试将 Instana 集成到应用程序中。更具体地说，我正在尝试将错误从我的 Angular 应用程序发送到 Instana。我的代码“工作”，所以这是一个关于最佳实践的问题。

据我了解，Instana 的Backend Correlation documentation 定义了“窗口”中的函数。我在 index.html 中设置了类似的内容。

<script>
  (function(i,s,o,g,r,a,m){i['InstanaEumObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//eum.instana.io/eum.min.js','ineum');

  ineum('apiKey', 'someKey');
  ineum('traceId', 'backendTraceId'); //replace 'backendTraceId with the appropriate expression for retrieval
</script>

我遇到的问题是，当我尝试按照 Instana 的 Angular 2+ Integration 指南进行错误跟踪时，他们调用了我可以从窗口访问的方法之一。该指南直接调用了函数ineum(...)。当我尝试这样做时，我的项目无法编译。

class CustomErrorHandler implements ErrorHandler {
  handleError(error) {
    ineum('reportError', error);

    // Continue to log caught errors to the console
    console.error(error);
  }
}

我目前的解决方法是：(<any>window).ineum('reportError', errorContext); 但我正在查看another stack overflow question，他们在 javascript 中访问窗口的方式不同。

将类型转换为“任何”窗口是一种不好的做法吗？
是尝试window['ineum'](...) 更好还是只是语法偏好？
最好尝试在另一个文件中定义函数，比如某种 Instana 服务，然后在 index.html 脚本和 CustomErrorHandler 中使用该服务，还是将其保留在窗口中？（虽然这对我来说可能有点棘手）

很抱歉我的困惑，因为这可能不是一个实际问题，因为我的代码正在“工作”，但我只是想澄清一下。我不确定我是否没有正确遵循 Instana 的指南，但这是我能找到的最好的。我尝试通过他们的联系页面联系，但我还没有收到回复。

【问题讨论】：

标签： javascript angular typescript instana

【解决方案1】：

Instana 有一个 demo application 表明可以这样做。

总结一下你需要的部分：

确保在 TypeScript 配置中配置了允许自定义类型定义的本地目录：

// common file name: tsconfig.app.json
{
  // other configuration…
  "typeRoots": [
    // other configuration…
    "./custom-typings"
  ]
}

在此目录内的文件中声明全局ineum 函数：

// common file name globals.d.ts
declare function ineum(s: string, ...parameters: any[]): any;

这两个步骤的组合将使 TypeScript 了解该功能。现在您可以像使用其他任何全局变量一样使用ineum。

【讨论】：