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

Question

我正在尝试将 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 中访问窗口的方式不同。

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

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

Answer 1

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

总结您需要的部分:

1. 确保您在 TypeScript 配置中配置了一个允许定义自定义类型的本地目录:

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

1. 在此目录中的文件中声明全局 ineum 函数:

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

这两个步骤的组合将使 TypeScript 知道该函数。现在您可以像使用任何其他全局变量一样使用 ineum。