Integrating Instana error tracking into an Angular 2 application

Question

I'm trying to integrate Instana into an application. More specifically I'm trying to send errors from my Angular app to Instana. I have my code 'working' so this is kind of a question about best practice.

Instana's Backend Correlation documentation defines functions in 'window' from what I understand. I've set something similar to this in my 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>

The issue I have is when I try to follow Instana's guide for Angular 2+ Integration regarding error tracking, where they call one of the methods that I can access from window. The guide just straight up calls the function ineum(...) by itself. When I try to do this, my project wouldn't compile.

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

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

My current fix is: (<any>window).ineum('reportError', errorContext); But I was looking at another stack overflow question where they accessed window differently in their javascript.

1. Is typecasting window to 'any' a bad practice?
2. Is it better to try window['ineum'](...) or is that just a syntax preference?
3. Is it better to try to define functions in another file, say an Instana service of sorts, and then use that service in the index.html script and CustomErrorHandler or keep it in the window? (Though this one may be a little tricker for me to figure out)

Sorry for my confusion as this may not be an actual issue because my code is 'working' but I just want clarification on this. I'm not sure if I just didn't follow Instana's guides correctly but this was the best of what I could find. I tried reaching out via their contact page but I haven't received a response quite yet.

Answer 1

Updated answer 2023-03-14

You can install the type definitions via npm install --save @types/ineum. These are maintained by the Instana team and you don't need further TypeScript configuration.

Original Answer

Instana has a demo application that shows to do this.

To summarize the parts that you would need:

1. Ensure that you have a local directory configured within your TypeScript config that allows definition of custom typings:

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

2. Declare the global ineum function in a file within this directory:

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

The combination of these two steps will make TypeScript aware of the function. Now you can use ineum just like any other global.