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指南进行错误跟踪时，他们在其中调用了我可以从window访问的方法之一。该指南只是直接调用函数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的指南，但这是我能找到的最好的方法。我尝试通过他们的联系页面进行联系，但尚未收到任何回复。

Answer 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了。

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

1 个答案: