如何监听浏览器控制台错误？重写window.console.error无效怎么办

我有一款基于canvas元素开发的应用，这类应用很难通过JavaScript开展测试，运行过程中会向控制台抛出消息。我需要监听写入控制台的错误信息，曾尝试通过monkey patching方式改写window下的console对象，但该方案并未生效，相关实现代码如下：

const messages = []

window.console.error = (msg) => {
  messages.push(msg)
})

// 触发错误的操作逻辑

expect(messages.length).to.eq(0)

上述代码无法正常捕获控制台输出的错误，需要可行的实现方案。

原有写法不生效的核心原因有三点：

• 直接给window.console.error赋值箭头函数的写法兼容性差：部分浏览器环境下console方法的属性描述符为writable: false，直接赋值不会生效；如果是在测试框架中运行，框架通常会提前劫持console方法，后续的手动赋值会被覆盖。
• 形参定义不全：console.error支持传入任意数量的打印参数，原有写法只定义了单个msg形参，多参数场景下会漏记错误内容。
• 捕获范围不足：canvas场景下的很多错误（比如WebGL上下文异常、跨域资源绘制错误、未捕获的运行时异常、Promise reject）不会主动调用console.error方法，单纯改写console对象无法捕获这部分错误。

1. 正确重写console.error方法 #

重写时要先保留原始方法的引用，使用普通函数（不要用箭头函数，避免this绑定异常）接收所有传入参数，收集完成后调用原始方法保证控制台原有输出逻辑不被破坏，这段代码需要放在所有业务代码、测试代码的最顶部执行，保证补丁在错误触发前就完成加载：

const errorMessages = []
// 先保存原始console.error的引用，绑定正确的this上下文
const originalConsoleError = window.console.error.bind(window.console)

window.console.error = function (...args) {
  // 收集所有传入参数，兼容多参数打印场景
  errorMessages.push(args)
  // 执行原始方法，不影响正常的控制台输出
  originalConsoleError(...args)
}

2. 补充全局错误监听，覆盖非console通道的错误 #

针对不走console.error的运行时错误，需要搭配全局事件监听捕获：

// 捕获同步运行时错误、资源加载错误、canvas上下文抛出的原生错误
window.addEventListener('error', (event) => {
  errorMessages.push([
    'Global runtime error:',
    event.message,
    `Location: ${event.filename}:${event.lineno}:${event.colno}`,
    event.error
  ])
  // 如果不需要错误默认打印到控制台，可以放开下面这行
  // event.preventDefault()
})

// 捕获未处理的Promise异常
window.addEventListener('unhandledrejection', (event) => {
  errorMessages.push([
    'Unhandled Promise rejection:',
    event.reason
  ])
})

测试框架场景适配 #

如果你是在Jest、Vitest、Cypress这类测试框架中运行用例，不要直接手动赋值console方法，优先使用框架提供的打桩API，避免和框架自身的console劫持逻辑冲突：

• Jest/Vitest环境：使用spyOn方式打桩

  jest.spyOn(console, 'error').mockImplementation((...args) => {
    errorMessages.push(args)
  })
  

• Cypress环境：直接使用框架提供的控制台事件监听接口

  cy.window().then(win => {
    cy.on('log:added', (log) => {
      if (log.name === 'console error') {
        errorMessages.push(log.args)
      }
    })
  })
  

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