如何排查仅在使用自定义域名绑定时才会触发的运行报错问题

• 核心原因定位：该问题由Cloudflare的页面优化功能篡改返回HTML结构导致。默认azurewebsites域名未经过Cloudflare代理，返回的SSR HTML和Nuxt客户端hydrate预期结构完全一致，所以不会报错；自定义域名走Cloudflare代理时，Cloudflare的自动优化规则会修改SSR返回的HTML内容，导致hydrate过程出现节点匹配错误，$refs.animationContainer被错误绑定到了文本节点而非预期的div元素，因此调用appendChild时报错。客户端内跳转时没有SSR过程，纯客户端生成的DOM结构完全符合预期，所以不会触发问题。
• 第一步排查操作：
  进入Cloudflare控制台，找到「速度」-「优化」菜单，关闭以下功能后清空Cloudflare全站缓存，再硬刷新自定义域名测试：
  • 自动压缩（Auto Minify）下的HTML压缩选项
  • Rocket Loader功能
  • 自动HTML格式化、自动注入脚本类的所有优化功能
• 第二步验证手段：
  分别请求自定义域名和azurewebsites默认域名的首页原始HTML，对比两个返回内容中<Wave/>组件对应节点的代码差异，可直接确认Cloudflare是否篡改了DOM结构。同时可在本地生产环境启动服务，查看控制台是否存在hydration mismatch类警告，确认本地不存在该问题即可锁定是Cloudflare代理层导致的异常。
• 兜底兼容方案：
  如果需要保留Cloudflare的优化功能，可通过两种方式避免报错：
  1. 替换ref获取DOM的方式，给容器节点加唯一ID，直接通过DOM查询获取元素：

  <template>
    <div id="wave-animation-container"></div>
  </template>
  <script>
  export default {
    mounted() {
      this.init()
    },
    methods: {
      init() {
        const container = document.getElementById('wave-animation-container')
        container && container.appendChild(someRenderer)
      }
    }
  }
  </script>
  

  2. 原有代码中增加节点类型校验，避免操作文本节点：

  init() {
    this.container = this.$refs.animationContainer
    // 校验节点类型为元素节点再操作
    if (this.container?.nodeType === Node.ELEMENT_NODE) {
      this.container.appendChild(someRenderer)
    }
  }
  

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