類型錯誤：非法調用

Question

我們正在運行一個 Create React App (CRA) web 應用程序，我們在其中添加了 Google Analytics v4。 我們使用ga-4-react npm package 啟動分析。 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/

在我們的案例中，我們只看到了 Type Error: Illegal Invocation，但沒有看到他們提到的基於不同瀏覽器的其他錯誤消息變體。 最后我們暫時在哨兵中忽略了它。

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")
  );
})();

Answer 3

您正在使用ga4.pageview(window.location.path); 但path不是window.location的屬性

嘗試改用pathname ：

ga4.pageview(window.location.pathname);

Answer 4

使用react-ga npm package 使用以下代碼實現 Google Analytics

創建幫助文件，這將幫助您實現 DRY 概念

import ReactGA from 'react-ga';

/**
 * Initialize Google Analytics
 */
export const initializeGA = () => {
  ReactGA.initialize(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY, {
    debug: true
  });
};

/**
 *  Push Page Tracking on Google Analytics
 */
export const pageView = () => {
  ReactGA.pageview(window.location.pathname + window.location.search);
};

然后在您的根組件上初始化 Google Analytics

import React, { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { initializeGA, pageView } from '../helpers/analytics';

export default function MyApp() {
  const location = useLocation();

  useEffect(() => {
    initializeGA();
  }, []);

  useEffect(() => {
    pageView();
  }, [location.pathname]);

  return (
    <div>
      <p>Your root component text</p>
    </div>
  );
}

如果你使用的是舊的 React 版本，它可以使用class component和生命周期鈎子componentDidMount ， componentDidUpdate/componentWillRecieveProps根據你的反應版本來實現。 相同的樣品是。

import { browserHistory } from 'react-router';

class App extends React.Component {
  componentDidMount() {
    this.unlisten = browserHistory.listen((location) => {
      console.log('route changes');
    });
  }
  componentWillUnmount() {
    this.unlisten();
  }
  render() {
    return (
      <div>
      </div>
    );
  }
}