SuperAPI AI 工具集

frontend-observability

前端与建站

查看项目

更新于 10-16 04:33

技能介绍

用途:构建“现场侧”可观测性系统,回答真实用户做了什么、体验如何。它是前端 lighthouse 技能的现场补充:Lighthouse 是合成实验室门槛,本技能负责真实用户数据。按前端架构约定放在 services/analytics/ 模块中。

主要能力: 一、类型化事件词典。事件名在 constants/analytics.ts 中以常量与联合类型定义,禁止内联字符串,编译器可拒绝拼写错误;事件名用 snake_case 且稳定,视为契约。 二、尽力而为的非阻塞分发。track(event, props) 是唯一入口,遍历适配器注册表,每个适配器单独 try/catch,某个提供方缺失或抛错不会影响调用方和其他提供方。 三、SSR 安全。通过 context hook useAnalytics() 暴露 track,在 provider 之外或服务端返回 no-op,组件可安全渲染。 四、真实用户体征。用 web-vitals 上报 LCP/INP/CLS/FCP/TTFB,与 lighthouse 技能使用相同指标与阈值(LCP ≤ 2500、INP ≤ 200、CLS ≤ 0.1)。 五、同意门控。track() 在无同意时提前返回,事件、体征与含 PII 的错误上报在用户选择加入前都不发出;属性保持低 PII。 六、错误上报。在路由或分段边界用 ErrorBoundary 捕获渲染错误,经同一分发通道或 Sentry 适配器上报,只报告意外错误。

使用方式:创建事件词典文件;实现 track、adapters、consent;挂载 AnalyticsProvider 于根布局;被追踪的叶子用薄 client 组件包裹。添加事件时先在 ANALYTICS_EVENTS 中加常量,再调用 track(ANALYTICS_EVENTS.NEW_ONE, props)。Firebase 适配器分 Web 与 RN 两份文件,Web 端需惰性浏览器初始化 initFirebaseAnalytics() 并以同意为门控,RN 端用 @react-native-firebase/analytics,词典与分发不变。

限制:不涉及仪表盘或特定厂商捆绑;Notion 支持 Next.js、React + Vite/Remix、Expo/React Native 等框架的接线方式;同意状态需自行从存储中水合;错误上报须先清除 PII。部分内容(如具体配置细节)资料未完整提供。