Vue集成HotJar后页面切换崩溃，nextSibling引发无限循环求助

方案一：重写nextSibling getter做定向拦截 #

不用修改HotJar源码，你可以通过重写DOM元素的nextSibling属性getter，在HotJar的代码调用时自动返回nextElementSibling，同时不影响其他业务代码的正常执行。

实现代码 #

在HotJar脚本加载之前插入这段代码（比如放在HTML的<head>最顶部，或者Vue应用初始化的最早期）：

// 保存原生的nextSibling getter
const originalNextSibling = Object.getOwnPropertyDescriptor(Element.prototype, 'nextSibling').get;

// 重写getter逻辑
Object.defineProperty(Element.prototype, 'nextSibling', {
  get() {
    // 通过调用栈判断是否是HotJar的代码在调用
    const callStack = new Error().stack;
    // 匹配HotJar相关的调用标识，可根据实际栈信息调整
    if (callStack && /hotjar|hj-/.test(callStack)) {
      return this.nextElementSibling;
    }
    // 其他场景返回原生值
    return originalNextSibling.call(this);
  },
  configurable: true // 允许后续重新定义，避免冲突
});

注意事项 #

• 调用栈的格式在不同浏览器中可能有差异，需要测试调整正则表达式的匹配规则。
• 确保这段代码优先于HotJar脚本执行，否则HotJar的代码会先绑定原生的nextSibling逻辑。
• HotJar后续版本更新后，若其代码结构变化，可能需要重新验证补丁是否生效。

方案二：定向替换HotJar的遍历逻辑（进阶） #

如果方案一的调用栈匹配不够可靠，你可以先定位HotJar中执行该循环的函数引用，通过函数重写的方式替换其遍历逻辑。不过这种方式需要你排查HotJar的代码结构，实现复杂度较高，推荐优先使用方案一。

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