Question

我目前在我的渐进式Web应用程序中使用ApplicationInsights-JS。它可以在我的react组件中工作，因为我可以从相关的npm包中导入所需的内容。

但是，在我的服务工作者中，我只能使用importScripts导入逻辑。

我确实设法在他们的Github页面上找到了ApplicationInsights-JS的CDN，但是似乎要使用此库初始化应用程序见解，您需要访问窗口才能存储appinsights，而您不能从服务人员。

由于CDN似乎是与该特定库有关，但我无法使用window，而且不确定如何实现此解决方案。

这是建议的摘录的副本粘贴，用于从以下位置初始化应用洞察对象：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成功记录遥测吗？

Answer 1

我已经几乎设法在我们应用的服务工作者中使用Microsoft Application Insights。

关键部分是：

使用importScripts('https://az416426.vo.msecnd.net/next/aib.2.min.js')和轻量级的appInsights（请参阅this small remark at 4th step）。
初始化一个appInsights对象：

appInsights = new Microsoft.AppInsights.AppInsights({ instrumentationKey: "[replace with your own key]" });

在需要跟踪时（在onpush事件或onnotificationclick期间），先依次搜索appInsight.track({ eventItemFields })和appInsights.flush()。

我说“几乎”是因为刷新部分似乎无法正常工作，我得到了：启用调试后，“发件人未初始化”内部错误。如果我成功解决了这个问题，我将在这里发布一个有效的示例代码。

参考文献：

Answer 2

我意识到我已经把这个复杂化了。

由于我只需要跟踪自定义事件，并且不需要appInsights所需的所有自动页面跟踪等功能，所以我最终还是从服务人员那里获取了信息。

我只是从使用我的React页面发出的请求中复制了标头和正文格式。

以下成功将遥测记录记录到我的应用洞察信息中心：

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) {
  });

Answer 3

在 Service Worker 中使用 Web SDK 很麻烦。完整版依赖于窗口对象，而基本 SDK 依赖于 Beacon 或 XmlHttpRequest 来发送消息（在文件 https://github.com/microsoft/ApplicationInsights-JS/blob/master/channels/applicationinsights-channel-js/src/Sender.ts 中）：

                if (!_self._senderConfig.isBeaconApiDisabled() && Util.IsBeaconApiSupported()) {
                    _self._sender = _beaconSender;
                } else {
                    if (typeof XMLHttpRequest !== undefined) {
                        const xhr:any = getGlobalInst("XMLHttpRequest");
                        if(xhr) {
                            const testXhr = new xhr();
                            if ("withCredentials" in testXhr) {
                                _self._sender = _xhrSender;
                                _self._XMLHttpRequestSupported = true;
                            } else if (typeof XDomainRequest !== undefined) {
                                _self._sender = _xdrSender; // IE 8 and 9
                            }
                        }
                    }
                }

目前 Application Insights SDK 似乎不支持 Service Worker。 Rajars 解决方案似乎是目前最好的选择。

更新：Github Repo 中有一个关于此的问题：https://github.com/microsoft/ApplicationInsights-JS/issues/1436

一个可行的建议是在初始化 Application Insights 之前使用基本/轻量级版本的 Application Insights（如 Rajar 所述）并添加 XMLHttpRequest polyfill（使用 fetch api）。之后就可以使用轻量版了。

可以在此处找到示例：https://github.com/Pkiri/pwa-ai

如何在服务工作者中利用ApplicationInsights-JS？

3 个答案: