Как я могу использовать ApplicationInsights-JS у работника службы? - PullRequest
Новая
       16

Как я могу использовать ApplicationInsights-JS у работника службы?

5 голосов
/ 02 мая 2019

В настоящее время я использую ApplicationInsights-JS в своем прогрессивном веб-приложении.Он работает в моих компонентах реагирования, поскольку я могу импортировать то, что мне нужно, из соответствующих пакетов npm.

Однако в моем сервисном работнике я могу импортировать логику только с помощью importScripts.

Мне удалось найтиCDN для ApplicationInsights-JS на их странице Github, однако кажется, что для того, чтобы инициализировать понимание приложения с помощью этой библиотеки, вам нужно иметь доступ к окну, чтобы хранить дополнения, что вы не можете сделать из сервисного работника.

Я пытался использовать подход веб-фрагмента, поскольку CDN, похоже, был связан с этой конкретной библиотекой, но я не могу использовать окно и не уверен, как еще реализовать это решение.

Это копиявставка предложенного фрагмента для инициализации объекта insights приложения из: https://github.com/Microsoft/ApplicationInsights-JS

importScripts('https://az416426.vo.msecnd.net/beta/ai.2.min.js');

const sdkInstance = 'appInsightsSDK';
window[sdkInstance] = 'appInsights';
const aiName = window[sdkInstance];

const aisdk =
  window[aiName] ||
  (function(e) {
    function n(e) {
      i[e] = function() {
        const n = arguments;
        i.queue.push(function() {
          i[e](...n);
        });
      };
    }
    let i = { config: e };
    i.initialize = !0;
    const a = document;

    const t = window;
    setTimeout(function() {
      const n = a.createElement('script');
      (n.src = e.url || 'https://az416426.vo.msecnd.net/next/ai.2.min.js'),
        a.getElementsByTagName('script')[0].parentNode.appendChild(n);
    });
    try {
      i.cookie = a.cookie;
    } catch (e) {}
    (i.queue = []), (i.version = 2);
    for (
      const r = [
        'Event',
        'PageView',
        'Exception',
        'Trace',
        'DependencyData',
        'Metric',
        'PageViewPerformance'
      ];
      r.length;

    )
      n(`track${r.pop()}`);
    n('startTrackPage'), n('stopTrackPage');
    const o = `Track${r[0]}`;
    if (
      (n(`start${o}`),
      n(`stop${o}`),
      !(
        !0 === e.disableExceptionTracking ||
        (e.extensionConfig &&
          e.extensionConfig.ApplicationInsightsAnalytics &&
          !0 ===
            e.extensionConfig.ApplicationInsightsAnalytics
              .disableExceptionTracking)
      ))
    ) {
      n(`_${(r = 'onerror')}`);
      const s = t[r];
      (t[r] = function(e, n, a, t, o) {
        const c = s && s(e, n, a, t, o);
        return (
          !0 !== c &&
            i[`_${r}`]({
              message: e,
              url: n,
              lineNumber: a,
              columnNumber: t,
              error: o
            }),
          c
        );
      }),
        (e.autoExceptionInstrumented = !0);
    }
    return i;
  })({ instrumentationKey: 'xxx-xxx-xxx-xxx-xxx' });
(window[aiName] = aisdk),
  aisdk.queue && aisdk.queue.length === 0 && aisdk.trackPageView({});

Я получаю окно не определено, что ожидается, но я не уверен, как еще я могу использовать эту библиотекуот обслуживающего работника.

Кто-нибудь еще имел подобную реализацию, в которой он успешно регистрировал телеметрию, используя ApplicationInsights от работника службы?

Ответы [ 2 ]

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

Я понял, что слишком усложнил это.

Так как мне нужно было только отслеживать пользовательское событие, и мне не нужно было все автоматическое отслеживание страниц и т. Д., Что делает appInsights, я закончил делать выборку у своего сервисного работника.

Я только что скопировал заголовок и формат тела из запросов, которые я сделал, используя мои страницы реакции.

Ниже приведена успешная регистрация телеметрии на информационной панели моего приложения: 

fetch(url, {
  method: 'post',
  headers: {
    'Content-type': 'application/json'
  },
  body: JSON.stringify([
    {
      time: '2019-05-02T15:56:37.589Z',
      iKey: 'INSTRUMENTATION_KEY',
      name:
        'Microsoft.ApplicationInsights.INSTRUMENTATION_KEY.Event',
      tags: {
        'ai.user.id': 'l6Tey',
        'ai.session.id': 'TL+Ry',
        'ai.device.id': 'browser',
        'ai.device.type': 'Browser',
        'ai.operation.id': 'HUfNE',
        SampleRate: '100',
        // eslint-disable-next-line no-script-url
        'ai.internal.sdkVersion': 'javascript:2.0.0-rc4'
      },
      data: {
        baseType: 'EventData',
        baseData: {
          ver: 2,
          name: 'Testing manual event',
          properties: {},
          measurements: {}
        }
      }
    }
  ])
})
  .then(json)
  .then(function(data) {
  })
  .catch(function(error) {
  });
1 голос
/ 15 июля 2019

Мне почти удалось использовать Microsoft Application Insights в сервисной службе нашего приложения.

Ключевые части: 

appInsights = new Microsoft.AppInsights.AppInsights({ instrumentationKey: "[replace with your own key]" });
  • когда требуется трек (во время события onpush или onnotificationclick), выберите appInsight.track({ eventItemFields }), затем appInsights.flush().

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

Ссылка:

...