javascript - Integrera Instana-felspårning i en Angular 2-applikation

Jag försöker integrera Instana i en applikation. Mer specifikt försöker jag skicka fel från min Angular-app till Instana. Jag har min kod 'fungerande' så detta är slags en fråga om bästa praxis.

Instanas Backend Correlation-dokumentation definierar funktioner i 'window' så vitt jag förstår. Jag har satt något liknande detta i min 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>

Problemet jag har är när jag försöker följa Instanas guide för Angular 2+ Integration gällande felspårning, där de anropar en av de metoder som jag kan komma åt från window. Guiden anropar funktionen ineum(...) helt enkelt direkt. När jag försöker göra detta skulle mitt projekt inte kompileras.

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

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

Min nuvarande lösning är: (<any>window).ineum('reportError', errorContext); Men jag tittade på en annan fråga på Stack Overflow där de åtkomstade window på ett annat sätt i deras JavaScript.

  1. Är det en dålig praxis att typcasta fönstret till 'any'?
  2. Är det bättre att försöka window['ineum'](...) eller är det bara en syntaxpreferens?
  3. Är det bättre att försöka definiera funktioner i en annan fil, säg en Instana-tjänst av något slag, och sedan använda den tjänsten i index.html-skriptet och CustomErrorHandler, eller behålla den i fönstret? (Även om denna kan vara lite svårare för mig att räkna ut)

Ursäkta för min förvirring eftersom detta kanske inte är ett faktiskt problem eftersom min kod 'fungerar', men jag vill bara ha klarhet i detta. Jag är inte säker på om jag bara inte följde Instanas guider korrekt, men detta var det bästa jag kunde hitta. Jag försökte kontakta dem via deras kontaktsida, men jag har ännu inte fått något svar.

Svar #1

Uppdaterat svar 2023-03-14

Du kan installera typdefinitionerna via npm install --save @types/ineum. Dessa underhålls av Instana-teamet och du behöver ingen ytterligare TypeScript-konfiguration.

Originalt svar

Instana har en demoprogram som visar hur man gör detta.

För att sammanfatta de delar som du skulle behöva:

  1. Se till att du har en lokal katalog konfigurerad i din TypeScript-konfiguration som tillåter definition av anpassade typningar:
// common file name: tsconfig.app.json
{
  // other configuration…
  "typeRoots": [
    // other configuration…
    "./custom-typings"
  ]
}
  1. Deklarera den globala ineum-funktionen i en fil inom denna katalog:
// common file name globals.d.ts
declare function ineum(s: string, ...parameters: any[]): any;

Kombinationen av dessa två steg kommer att göra TypeScript medveten om funktionen. Nu kan du använda ineum precis som vilken annan global som helst.