Интеграция отслеживания ошибок Instana в приложение Angular 2 - PullRequest
Новая
       41

Интеграция отслеживания ошибок Instana в приложение Angular 2

2 голосов
/ 03 мая 2019

Я пытаюсь интегрировать Instana в приложение. В частности, я пытаюсь отправить ошибки из моего приложения Angular в Инстану. Мой код «работает», так что это своего рода вопрос о наилучшей практике.

Документация Внутренней корреляции 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>

У меня возникает проблема, когда я пытаюсь следовать руководству Инстаны по 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); Но я смотрел на другой вопрос переполнения стека , где они обращались к окну по-разному в своем javascript.

  1. Является ли окно ввода типа «любым» плохой практикой?
  2. Лучше попробовать window['ineum'](...) или это просто предпочтение синтаксиса?
  3. Лучше ли попытаться определить функции в другом файле, скажем, своего рода сервис Instana, а затем использовать этот сервис в сценарии index.html и CustomErrorHandler или оставить его в окне? (Хотя это может быть немного сложнее для меня, чтобы выяснить)

Извините за путаницу, так как это может быть не так, потому что мой код «работает», но я просто хочу пояснить это. Я не уверен, что просто не правильно следовал инструкциям Инстаны, но это было лучшее из того, что я смог найти. Я пытался связаться через их контактную страницу, но пока не получил ответа.

1 Ответ

1 голос
/ 18 июля 2019

Instana имеет демонстрационное приложение , которое показывает, как это сделать.

Чтобы подвести итог необходимых вам частей:

  1. Убедитесь, что у вас есть местныйкаталог, сконфигурированный в вашей конфигурации 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, как и любой другой глобал.

...