Запуск Raygun.io с Angular Universal

Question

Я добавляю Raygun.io APM в наше приложение Angular 8 с помощью Angular Universal.

Известно, что raygun.ioимеет клиентскую библиотеку javascript, и чтобы добавить ее в Angular с универсальным интерфейсом, необходимо создать API окна DOM. Это можно сделать с помощью domino npm, используя следующий код:

Также есть руководство по установке Angular через npm под названием raygun4js однако проблема все еще существует.

// Domino for defining Windows API in SSR 
(found @ https://www.npmjs.com/package/domino )

const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(index.html).toString();
const win = domino.createWindow(template);

global['window'] = win; // will be used for NodeJS to read Window API
global['document'] = win.document;

*domino создает API окна и устанавливает для него глобальное значение win. После добавления этой строки в проект NPMserver.ts, построить и запустить команду - обнаружено исключение:

  Raygun.Utilities = raygunUtilityFactory(window, Raygun);
  ^

ReferenceError: raygunUtilityFactory is not defined

Это корни, что raygunUtilityFactoryфункция не определена в оконном API. Заглядывая внутрьraygun.js в Github

window.raygunUtilityFactory = function(window, Raygun) {
  var rg = {
    getUuid: function() {
      function _p8(s) {
        var p = (Math.random().toString(16) + '000000000').substr(2, 8);
        return s ? '-' + p.substr(0, 4) + '-' + p.substr(4, 4) : p;
      }

 // more code.....

Вопрос в том, как NodeJS может читать raygunUtilityFactory функция во время сборки, если она не может найти ее в оконном API?

ОБНОВЛЕНИЕ: я пытался сделать это в небольшом проекте, но кажется, что даже его документ для установки raygun.io не включает процедуры для Angular Universal. Он в основном не может обнаружить оконный API, используяdomino

  Raygun.Utilities = raygunUtilityFactory(window, Raygun);
  ^

ReferenceError: raygunUtilityFactory is not defined

Answer 1

Ответ: Настройка Raygun js как глобальный объект и ссылается на объявленную переменную внутри службы.

Ссылка: https://hackernoon.com/how-to-use-javascript-libraries-in-angular-2-apps-ff274ba601af

declare var rg4js: any;

* поместите это в свой сервис или свой основной компонент ts.

<script type="text/javascript">
  !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
  (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
  f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
  h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
  e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
</script>

* добавьте его в свой index.html или загрузите и добавьте в свой проект.

Обратите внимание, что raygunна скрипт следует ссылаться как на rg4js. Angular автоматически узнает, что rg4js внутри вашего файла TS ссылается на вашraygun тег скрипта.

- Теперь я могу видеть отчеты о сбоях и мониторинг пульса на нашей клиентской панели. Однако я заметил, что не все журналы ошибок на стороне клиента перехватываются. Я все еще ищу способ отправить эти необработанные ошибки - начиная сwindows.onerror.

Answer 2

Приятно слышать, что вы нашли часть решения!

AngularJS автоматически фиксирует множество ошибок, и чтобы правильно фиксировать ошибки, вам нужно будет зарегистрировать свой собственный обработчик ошибок angular, а при срабатывании обратного вызова вы можете использовать метод отправки Raygun4JS для отправки сообщения в Raygun.

export class RaygunErrorHandler implements ErrorHandler {
  handleError(e: any) {
    rg4js('send', {
      error: e,
    });
  }
}

Raygun имеет немного документации по angular, но не может импортировать raygun4js через npm для Angular Universal (согласно вашему открытию), поэтому вам нужно будет изменить показанные примеры. Тем не менее, они должны стать хорошей отправной точкой.