Hubspot覆盖window.onerror，如何追踪并恢复stacktracejs错误处理？

我之前在项目里也碰到过Hubspot这个恼人的已知bug，分享几个经过实践验证的解决方案，帮你既能追踪覆盖行为，又能保住自定义的错误处理逻辑：

1. 拦截window.onerror的赋值，追踪来源并合并处理逻辑 #

这个方法能精准抓到是谁在修改window.onerror，还能自动把自定义逻辑和Hubspot的处理合并，两边都不耽误：

// 先存好我们的自定义错误处理函数
const customErrorHandler = window.onerror;

// 重定义window.onerror为可拦截的属性
Object.defineProperty(window, 'onerror', {
  get() {
    return customErrorHandler;
  },
  set(newHandler) {
    // 打印调用栈，直接定位覆盖来源
    console.error('⚠️ window.onerror被覆盖，调用栈：', new Error().stack);
    
    // 合并两个处理逻辑：先执行自定义追踪，再执行新的handler
    const combinedHandler = function(message, source, lineno, colno, error) {
      // 执行我们的stacktracejs逻辑
      if (customErrorHandler) {
        customErrorHandler(message, source, lineno, colno, error);
      }
      // 执行新的handler（比如Hubspot的）
      if (newHandler) {
        return newHandler(message, source, lineno, colno, error);
      }
      return true;
    };
    
    // 更新自定义handler为合并后的版本
    customErrorHandler = combinedHandler;
    return true;
  },
  configurable: true
});

这样一来，不管Hubspot什么时候修改window.onerror，你都能在控制台看到完整的调用栈，而且自定义的错误追踪和Hubspot的逻辑都会生效。

2. 监听Hubspot脚本加载，完成后恢复自定义处理 #

因为Hubspot脚本是async/defer加载的，执行时机不确定，我们可以等它加载完成后手动重置window.onerror：

function setupCustomErrorTracking() {
  // 这里是你的stacktracejs错误处理逻辑
  window.onerror = function(message, source, lineno, colno, error) {
    StackTrace.fromError(error).then(stackframes => {
      const stackInfo = stackframes.map(sf => sf.toString()).join('\n');
      console.log('自定义错误追踪:', message, '\n', stackInfo);
      // 这里添加上报到你的服务的代码
    });
    return true;
  };
}

// 初始设置自定义处理
setupCustomErrorTracking();

// 监听Hubspot脚本加载完成
const findHubspotScript = () => document.querySelector('script[src*="hubspot"]');

// 如果脚本已经在DOM里
let hubspotScript = findHubspotScript();
if (hubspotScript) {
  hubspotScript.addEventListener('load', setupCustomErrorTracking);
} else {
  // 如果脚本是动态插入的，用MutationObserver监听DOM变化
  const observer = new MutationObserver(() => {
    hubspotScript = findHubspotScript();
    if (hubspotScript) {
      hubspotScript.addEventListener('load', setupCustomErrorTracking);
      observer.disconnect();
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
}

这个方法适合需要严格保证自定义逻辑优先级的场景，等Hubspot脚本跑完再重新接管window.onerror。

3. 改用window.addEventListener('error')（最推荐） #

其实window.onerror是旧的单播机制，而addEventListener('error')支持多播——你可以添加多个监听函数，互不影响。Stacktracejs完全可以用这种方式实现追踪，彻底避开被覆盖的问题：

window.addEventListener('error', (event) => {
  // 用stacktracejs处理错误
  StackTrace.fromError(event.error).then(stackframes => {
    const stackString = stackframes.map(sf => sf.toString()).join('\n');
    console.log('自定义错误追踪:', event.message, '\n', stackString);
    // 上报到你的服务
  });
});

不管Hubspot怎么折腾window.onerror，这个监听函数都不会被影响，同时Hubspot的错误处理也能正常工作，完美解决冲突。

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