Next.js(TypeScript)项目Web端Firebase Analytics事件上报异常问题

• Firebase版本：8.10.0
• 项目技术栈：Next JS with Typescript

const logClickEvent = useCallback(
  (eventName: string, eventParams?: { [key: string]: any }) => {
    if (typeof window !== "undefined") {
      analytics().logEvent(eventName, eventParams)
    }
  },
  []
)

Google Analytics Debugger观测结果：

异常表现：调试工具中可观测到Sending Request已执行，但Firebase Debug view中无对应事件日志；手动点击Sending Request链接打开空白页后，Debug view中才会展示对应事件日志，需排查问题根因。

1. utils/firebase.ts配置文件 #

import "firebase/analytics"
import firebase from "firebase/app"

const firebaseConfig = {
  apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
  authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
  projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
  storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
  messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
  appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
  measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
}

if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig)
}
const { analytics } = firebase

export { analytics }

2. _app.tsx初始化逻辑 #

useEffect(() => {
  if (typeof window !== "undefined") {
    analytics()
  }
}, [)

内容的提问来源于stack exchange，提问作者Hasnain Ali