Next.js（React）中Microsoft Clarity无法发送POST请求，页面浏览追踪无上报

我之前在Next.js App Router里集成Clarity的时候也碰到过一模一样的问题——脚本明明加载了，控制台也能看到自己打印的日志，但就是看不到www.clarity.ms/collect/的POST请求，折腾了好一阵才找到几个可行的排查方向，你可以一个个试下：

• 初始化与事件触发的顺序问题
  你现在的初始化逻辑放在空依赖的useEffect里，而路由变化的useEffect会在组件挂载时就触发一次（因为pathname是初始路由）。这时候很可能Clarity还没完全初始化完成，你调用Clarity.event("PageView")就相当于无效调用。
  可以先在路由监听的effect里加个存在性检查，确保Clarity就绪后再触发事件：

  useEffect(() => {
    if (typeof Clarity !== 'undefined') {
      console.log("[Clarity] Page view tracked:", pathname);
      Clarity.event("PageView");
    }
  }, [pathname]);
  

  另外，初始化的时候也可以顺便触发一次初始页面的上报，避免漏抓第一次的页面浏览：

  useEffect(() => {
    Clarity.init("XXX");
    Clarity.consent(true);
    // 初始化完成后上报初始页面
    Clarity.event("PageView");
  }, []);
  

• 别手动触发PageView，用Clarity内置的页面更新方法
  其实Clarity本身就支持自动追踪页面浏览，但Next.js的客户端路由（CSR）不会触发传统的onload事件，所以内置追踪可能失效。这时候别手动调用Clarity.event("PageView")，而是告诉Clarity当前的页面路径，让它自己处理上报逻辑：

  useEffect(() => {
    console.log("[Clarity] Page view tracked:", pathname);
    Clarity.setCurrentPage(pathname);
  }, [pathname]);
  

  我当时就是因为手动触发的事件和内置逻辑冲突，改成这个方法后马上就看到POST请求了。

• 确保只在客户端环境执行Clarity逻辑
  你的组件虽然加了"use client"，但放在根布局里的时候，可能还是会在服务端 hydration 阶段执行部分代码。可以给初始化逻辑加个环境判断，确保只在浏览器端运行：

  useEffect(() => {
    if (typeof window !== 'undefined') {
      Clarity.init("XXX");
      Clarity.consent(true);
    }
  }, []);
  

• 开启调试模式看详细日志
  如果上面的方法都没用，就打开Clarity的调试模式，初始化时加上debug: true参数：

  Clarity.init("XXX", { debug: true });
  

  这时候控制台会输出Clarity的详细运行日志，比如初始化状态、事件捕获情况、上报失败的原因，能帮你快速定位问题。

内容来源于stack exchange