Chrome扩展集成Sentry遇属性重定义错误的解决方案咨询

问题核心：Sentry.WINDOW指向浏览器原生window对象，而window.document是不可写、不可配置的原生属性，直接赋值或重定义都会触发报错。可行方案是替换整个Sentry.WINDOW对象，而非修改其document属性，具体有两种实现方式：

方法1：使用Proxy代理真实window #

通过Proxy拦截document属性的访问，返回自定义对象，同时保留其他window属性的正常访问：

import * as Sentry from '@sentry/browser';

const customWindow = new Proxy(window, {
  get(target, prop) {
    if (prop === 'document') {
      return {
        visibilityState: 'hidden',
        addEventListener: () => {},
        // 可按需补充Sentry依赖的其他document属性，如hidden、dispatchEvent等
      };
    }
    return target[prop];
  }
});

// 替换Sentry内部使用的WINDOW引用
Sentry.WINDOW = customWindow;

// 正常初始化Sentry
Sentry.init({
  dsn: '你的项目DSN',
  // 其他配置项
});

方法2：创建自定义window对象并合并属性 #

直接创建包含自定义document的对象，合并真实window的必要属性：

import * as Sentry from '@sentry/browser';

const customWindow = {
  ...window,
  document: {
    visibilityState: 'hidden',
    addEventListener: () => {},
    // 根据Sentry实际需求补充属性，避免后续潜在报错
  }
};

Sentry.WINDOW = customWindow;

// 初始化Sentry
Sentry.init({ /* 你的配置 */ });

为什么之前的方法失效？ #

• 直接赋值Sentry.WINDOW.document报错：因为window.document只有getter，没有setter，无法直接赋值。
• 使用Object.defineProperty报错：因为原生window.document的configurable属性默认是false，无法被重定义。

替换Sentry.WINDOW是更稳妥的方案，Sentry内部通过这个引用访问浏览器环境的window相关属性，替换后就能让Sentry使用自定义的document对象。

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