TypeError:非法调用

Question

我们正在运行一个Create React App(CRA(web应用程序，我们已将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错误监控平台。这个错误对我们来说并没有什么意义，我们花了两天时间试图找出是否有人遇到过这样的问题，但到目前为止，我们还是一无所获。它似乎也不会影响用户体验，但对我们来说，监控相当烦人。

错误也会报告给哨兵。

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头盔一起使用，但得到了相同的结果。

这个错误似乎是由许多平台(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")
);
})();

Answer 3

使用react-ganpm包来实现带有以下代码的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和基于您的React版本的生命周期挂钩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>
);
}
}

Answer 4

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

尝试改用pathname：

ga4.pageview(window.location.pathname);

Answer 5

为我工作。processData:false，contentType:false，是工作所必需的。

var formData = new FormData($('#author_post')[0]);
formData.append('t','author-add');
$.ajax({
type: 'POST',
url: 'url-here',
cache: false,
processData: false,
contentType: false,
data:formData,
success: function(response) {
//success code
}
});