SuperAPI AI 工具集

tanstack-devtools-event-client-devtools-instrumentation

测试与质量

查看项目

更新于 10-16 00:02

技能介绍

用途:为库代码添加 TanStack Devtools 事件埋点,在架构边界处策略性放置 emit(),向 Devtools 面板发送高价值诊断数据,追求最大洞察与最小噪声。前置要求:先阅读 devtools-event-client 技能,了解 EventClient 创建、事件映射与 emit()/on() API。

主要能力与埋点位置:事件总线透明桥接服务端/客户端与跨标签页边界——服务端 emit() 经 WebSocket/SSE 到达客户端,一个标签页的 emit() 经 BroadcastChannel 到达其他标签页,无需传输代码。应在架构边界埋点:中间件/拦截器入口与出口(包裹整条链而非每个中间件)、状态转换(idle→loading→success/error)、生命周期钩子(mount、unmount、connect、disconnect、ready)、错误边界(捕获异常、重试、回退)、用户操作完全生效后。不要从内部工具函数、循环迭代、getter/setter 访问、中间计算步骤埋点。

核心模式:每个请求只发一个合并事件,而非 2N 个起止事件;状态机仅在阶段变化时发事件(from===to 则跳过);多个事件共享字段时用共享 base payload 展开(DRY);对每秒触发超过 10 次的高频发射点做去抖或节流;用 enabled: process.env.NODE_ENV !== 'production' 作为主要守卫,昂贵 payload 构造(如大状态 structuredClone)在调用点用 NODE_ENV 判断保护。Vite 插件会在生产环境剥离 @tanstack/react-devtools,根导入 @tanstack/devtools-event-client 在非 development 下也会 no-op 并被 tree-shake;如需生产事件,从 @tanstack/devtools-event-client/production 导入。

使用方式:定义事件类型映射,继承 EventClient 并传入 pluginId 与 enabled,导出单例后在边界处 emit;可用 debug: true 查看带 [tanstack-devtools:{pluginId}-plugin] 前缀的日志。

适用场景:为路由、查询库、状态存储等库添加调试埋点。限制:事件映射保持精简(典型 3-7 种);避免过多细粒度事件、热循环中未去抖发射、在辅助函数内部埋点、硬编码重复字段。具体收费、价格与平台支持暂未提供。