生产环境（HTTPS）下网站Firebase Analytics无数据上报问题排查

问题背景 #

我有一个已上线的React + React Router + Vite应用，正在集成Google Analytics。本地开发环境（http://localhost:3000）和本地运行生产Docker镜像时，均能正常看到向Google发送的collect请求；但将镜像推送至生产环境并部署到自有域名后，未发现任何collect请求。已尝试将网站URL添加到数据流中，并限制API仅允许该网站URL访问，但均无效。

相关代码 #

Firebase Analytics初始化代码

import { getAnalytics, logEvent } from 'firebase/analytics';
import { initializeApp } from 'firebase/app';

const app = initializeApp({
  apiKey: String(import.meta.env.VITE_FIREBASE_API_KEY),
  authDomain: String(import.meta.env.VITE_FIREBASE_AUTH_DOMAIN),
  projectId: String(import.meta.env.VITE_FIREBASE_PROJECT_ID),
  storageBucket: String(import.meta.env.VITE_FIREBASE_STORAGE_BUCKET),
  messagingSenderId: String(import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID),
  appId: String(import.meta.env.VITE_FIREBASE_APP_ID),
  measurementId: String(import.meta.env.VITE_FIREBASE_MEASUREMENT_ID),
});
const analytics = getAnalytics(app);

export const logPageView = (pageTitle: string, pagePath: string): void => {
  logEvent(analytics, 'page_view', { page_title: pageTitle, page_path: pagePath });
};

路由配置代码

const withPageTitle = (component: JSX.Element, pageTitle: string): JSX.Element => {
  return (
    <>
      <PageTitle title={pageTitle} />
      {component}
    </>
  );
};

const routes = createRoutesFromElements(
  <Route path="/" element={<Index />} errorElement={withPageTitle(<UnexpectedError />, 'Erro Desconhecido')}>
    <Route element={<AppPages />}>
      <Route index element={<div />} />
      <Route path="login" element={withPageTitle(<SignIn />, 'Login')} />
      <Route path="sign_up" element={withPageTitle(<SignUp />, 'Crie sua Conta')} />
      <Route path="verify" element={withPageTitle(<VerifyEmail />, 'Verifique sua Conta')} />
      ...
    </Route>
    <Route path="logout" element={<SignOut />} />
    <Route path="*" element={withPageTitle(<NotFound />, 'Página Não Encontrada')} />
  </Route>,
);

PageTitle组件代码

export function PageTitle({ title }: PageTitleProps): null {
  const location = useLocation();

  useEffect(() => {
    document.title = title;
    logPageView(title, location.pathname);
  }, [location, title]);

  return null;
}

可能原因与调试步骤 #

• 验证环境变量注入：生产环境下确认import.meta.env中的Firebase配置（尤其是measurementId）是否正确加载。可在浏览器控制台打印相关变量，或在代码中临时添加日志输出验证。
• 检查浏览器控制台错误：打开开发者工具Console标签，查看是否存在Firebase初始化失败、CORS错误或脚本加载失败的提示，重点排查内容安全策略(CSP)是否阻止了请求。
• 确认CSP配置：若生产环境设置了内容安全策略，需允许https://www.google-analytics.com及https://*.google-analytics.com的请求，同时在script-src中放行Firebase相关脚本。可通过Network标签查看是否有请求被拦截，结合CSP报错信息调整规则。
• 检查数据流配置：确认Firebase控制台中数据流的网站URL与生产环境域名完全匹配（包括HTTP/HTTPS协议），且未设置错误的过滤规则。
• 排除浏览器隐私拦截：使用无痕模式访问生产网站，或临时禁用AdBlock、uBlock Origin等隐私插件，验证是否是插件阻止了Analytics请求。
• 确认Analytics初始化状态：检查生产环境中getAnalytics(app)是否成功执行，未被环境判断逻辑过滤。可在初始化后添加日志输出，确认实例是否正常创建。
• 验证路由监听逻辑：确认PageTitle组件在路由切换时是否正确触发useEffect，可添加日志查看logPageView是否被调用，排查路由缓存或懒加载导致的组件未渲染问题。

遗漏配置项检查 #

• 确认Analytics服务状态：在Firebase控制台的Analytics->数据流页面，确认服务已启用且数据流处于活跃状态。
• 适配HTTPS环境：若生产环境使用HTTPS，需确保Firebase配置中的authDomain等地址均为HTTPS协议，避免混合内容阻止请求。
• 检查Vite构建变量：确认.env.production文件中的环境变量配置正确，且Docker构建过程中已正确传入这些变量，Vite生产构建时完成了变量替换。

内容的提问来源于stack exchange，提问作者Sandro Simas