移除Microsoft Clarity脚本致Next.js应用崩溃，求正确移除方法

问题情况 #

删除_app.js中的Microsoft Clarity脚本后，生产环境应用直接崩溃，应用提示：

Next.js 应用错误：发生了客户端异常（请查看浏览器控制台获取更多信息）

浏览器控制台重复出现以下错误：

NotFoundError: 无法在'Node'上执行'insertBefore'：要插入新节点的前置节点不是此节点的子节点。

原Clarity脚本代码如下：

<script
    dangerouslySetInnerHTML={{
        __html: `
            if(${process.env.ENV_NAME_SHORT == 'prod'}){
        (function(c,l,a,r,i,t,y){
            c[a] = c[a] || function () { (c[a].q = c[a].q || []).push(arguments) };
            t=l.createElement(r);
            t.async=1;
            t.src="https://www.clarity.ms/tag/"+i;
            y=l.getElementsByTagName(r)[0];
            y.parentNode.insertBefore(t,y);
        })(window, document, "clarity", "script",'${
        process.env.MICROSOFT_CLARITY
        }');}`,
    }}
/>

崩溃原因 #

仅删除_app.js中的脚本并不彻底，生产环境仍存在残留的Clarity相关逻辑在执行：

• 其他页面、组件中可能存在手动调用window.clarity或clarity()的代码
• 构建缓存未清理，旧的包含Clarity逻辑的代码仍在运行
• 部分第三方依赖/插件集成了Clarity，未同步移除对应的配置和代码

浏览器中的insertBefore错误原本是Clarity初始化时的潜在问题，但删除脚本后仍出现该错误，足以证明还有代码在执行这段初始化逻辑。

正确移除步骤 #

1. 彻底清理Clarity相关代码
   • 遍历所有组件、页面文件，删除所有调用window.clarity或clarity()的代码
   • 检查next.config.js和环境变量配置，移除MICROSOFT_CLARITY变量及相关的生产环境判断逻辑（若已无其他用途）
2. 清除构建缓存
   • 执行构建前，删除本地的.next文件夹和node_modules/.cache目录
   • 生产环境部署时，清空服务器上的旧构建文件，重新部署最新代码
3. 验证构建产物
   • 完成构建后，检查.next/static目录下的JS文件，搜索clarity关键词，确认无残留初始化代码
4. 排查第三方依赖
   • 查看package.json中的依赖列表，若存在集成Clarity的插件，同步移除该依赖及对应配置

紧急恢复方案 #

若暂时无法定位残留代码，可在_app.js中添加以下代码临时阻止错误：

import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // 覆盖全局clarity对象，避免未定义报错
    window.clarity = window.clarity || function() {};
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

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