2

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

根据我的理解，Instana 的后端关联文档定义了“窗口”中的函数。我在 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+ 集成指南进行错误跟踪时，他们调用了我可以从窗口访问的方法之一。该指南直接调用该函数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);但我正在查看另一个堆栈溢出问题，他们在 javascript 中以不同方式访问窗口。

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

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

4

1 回答 1

4

Instana 有一个演示应用程序，可以做到这一点。

总结一下您需要的部分：

  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像使用任何其他全局变量一样使用。

于 2019-07-18T06:53:32.243 回答