监控注入钩子

拦截 consolefetchXMLHttpRequest、点击与未捕获错误,可用于监控后端、调试浮层或测试。

每一个都会返回卸载函数,请保留并调用它。 注入全局却不提供撤销方式,测试就无法自我清理,热更新会在已注入的全局上再叠一层,直到每次调用都要穿过十几层包装,每个事件被重复上报 N 次。

API

函数 注入对象 返回
handleConsole(hook) console.log/info/warn/error/assert restore
handleFetchHook(options) window.fetch restore
handleXhrHook(options) XMLHttpRequest#open / #send restore
handleError(hook) error + unhandledrejection unsubscribe
handleClick(hook) document 点击(捕获阶段) unsubscribe
replaceOld(obj, key, wrap) 任意对象上的任意属性 restore

handleFetchHook / handleXhrHook 接收 { requestHook, responseHook, errorHook }

示例

import { handleConsole, handleError, handleFetchHook } from 'ranuts';

const teardown = [
  handleConsole((type, ...args) => send({ type, args })),
  handleError((error) => send({ type: 'error', error: String(error) })),
  handleFetchHook({ errorHook: (url, error) => send({ type: 'fetchError', url }) }),
];

// 销毁时(热更新、路由切换、测试清理)
teardown.forEach((off) => off());

注意

  1. 原有行为完全保留。响应照常透传,错误照常重新抛出,console 照常打印。
  2. replaceOld 的 restore 只撤销自己那一层。如果之后有别的层叠加在上面,盲目写回原值会把那一层静默卸载,所以它选择放弃。
  3. handleXhrHook 注入的是原型,对所有实例生效;其监听用 { once: true } 注册,复用同一个 XHR 对象也不会越积越多。
  4. 不要把 console 上报给一个也会打印日志的后端:那次上报本身会再次触发钩子,形成循环。(这也是 Monitorconsole 通道默认关闭的原因。)