类型错误：非法调用

Question

我们正在运行一个 Create React App (CRA) 网络应用程序，我们已向其中添加了 Google Analytics v4。我们使用ga-4-react npm 包启动分析。手动初始化index.js

const ga4react = new GA4React(process.env.REACT_APP_GOOGLE_ANALYTICS_ID);

ga4react.initialize().then((ga4) => {
    ga4.pageview(window.location.path);
}, (err) => {
    Sentry.captureException(err);
});

我们从gtag/js文件中收到数百个错误到我们的 Sentry 错误监控平台。这个错误对我们来说并没有多大意义，我们花了两天时间试图找出是否有人遇到过这样的问题，但到目前为止我们都没有发现。它似乎也不会影响用户体验，但是我们监控起来却很烦人。

错误报告给 Sentry。

TypeError zq(gtag/js)
Illegal invocation

gtag/js in zq at line 477:453
{snip} ))}}},zq=function(a,b,c){var d=a+"?"+b;c?$c.sendBeacon&&$c.sendBeacon(d,c):pd(d)};var Eq=window,Fq=document,Gq=function(a){var b=Eq._gaUserP {snip}

我们还从 ga-4-react（上面代码片段中的 catch 块）收到了同样多的错误。我们还尝试将分析片段与react-helmet 结合使用，但结果相同。

此错误似乎是由许多平台（Android、Windows 10、OS X）上的许多浏览器（Chrome、Opera、Safari、移动浏览器）生成的，因此我们无法真正确定任何特定的路线、平台、浏览器常见的这些用户。

我还尝试使用 AdBlock、阻止跟踪器、使用 Do Not Track 来复制它，但没有。

Answer 1

在我们的网站上遇到了同样的问题。这个问题似乎源于 navigator.sendBeacon 被断章取义地调用，类似于 hackape 的评论。

对于上下文，本文提供了一些有关 sendBeacon 及其功能的非常好的信息，包括对您所看到的错误的描述。

https://xgwang.me/posts/you-may-not-know-beacon/

在我们的例子中，我们只看到类型错误：非法调用，但没有看到他们提到的基于不同浏览器的其他错误消息变体。最终我们在岗哨暂时忽略了它。

Answer 2

您可以使用此代码示例

import React from "react";
import ReactDOM from "react-dom";
import GA4React, { useGA4React } from "ga-4-react";

const ga4react = new GA4React("G-1JXXXXX");

function MyApp() {
  const ga = useGA4React();
  console.log(ga);

  return <div className="App">hi!</div>;
}

(async () => {
  await ga4react.initialize();

  ReactDOM.render(
    <React.StrictMode>
      <MyApp />
    </React.StrictMode>,
    document.getElementById("root")
  );
})();