关于 logfire-frontend
用于通过 Logfire 配置浏览器可观测性和会话回放的技能，面向前端开发者。它帮助选择采集方式、保留现有埋点，并分别验证浏览器信号与回放。
主要功能
- 01配置 Logfire 浏览器埋点
- 02选择采集配置
- 03按需添加会话回放
- 04遮蔽文本与输入内容
- 05验证信号和回放播放
适用场景
- 01为浏览器应用添加埋点
- 02仅采集错误与回放
- 03检查保留的浏览器遥测
- 04查看会话录制
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/logfire-frontend确认已加载。
包含的文件
除 SKILL.md 外，安装时一起下载的参考资料和脚本。
references/capture-profiles.mdsetup.mdverification.md详细介绍
设置前端可观测性和会话回放
应用使用 @pydantic/logfire-browser，并在请求回放时使用
@pydantic/logfire-session-replay。配置一个浏览器 Provider；保留现有的 OpenTelemetry Provider、代理和应用初始化模式。
确认浏览器应用
阅读仓库说明、应用清单、浏览器入口文件、路由器和现有的埋点。对于 Next.js，在修改之前区分客户端代码和服务端埋点。遵守依赖约束；使用捕获或采样选项前，先检查已安装 SDK 的类型。
准确保留用户或设置交接中提供的来源、组织和项目。仅设置浏览器端不需要 CLI 登录、本地 SDK 凭据或普通项目写入令牌。如果有现成的原生 MCP 访问方式，则用于验证；否则使用 Logfire 界面。
在 Frontend → Applications 下创建或选择前端应用，并使用其生成的区域 URL 和受限前端令牌。普通项目写入令牌、服务端环境变量或 .logfire 凭据都不适用于浏览器代码。前端应用负责管理服务身份。如果没有受支持的公共 API/工具可以管理它，请使用界面；不要臆造私有端点。
根据请求选择捕获方式
- 完整的前端可观测性： 自动采集页面、请求和交互 Span，以及 Web Vitals。仅在收到请求时添加回放。
- 自动埋点的错误和回放： 保留带有 Logfire 错误级别事件或 OpenTelemetry 错误状态的 Trace，同时独立启用回放。这也会保留符合条件的 Trace 中的其他 Span。
- 最精简的错误和回放： 禁用自动 Span 和 Web Vitals，并显式上报应用错误。适用于用户要求降低浏览器埋点开销或严格限制所收集信号的情况。
保留现有获批的回放采样率和遮罩设置。Trace 采样、回放采样和指标采集是彼此独立的决策。不要承诺 minLevel 会筛选自动 Span、Trace 采样器会保留整个浏览器会话，或每个已处理的应用故障都会被自动捕获。
会话回放仍处于 Early Access 阶段；请确认目标组织是否可用，并保留现有应用发布标记。对文本和输入内容进行遮罩，关闭控制台捕获，并在录制敏感区域之前将其屏蔽。除可见文本遮罩外，还要单独检查属性和 URL。仅在有帮助时添加规范化路由模板和不透明用户 ID；姓名和电子邮件属于可选的个人数据。
验证所选行为
按照验证和故障排查中的说明，在真实浏览器应用中进行操作，检查保留和省略的信号，在确切项目中查询最新错误，并播放相应录制内容。对于采样配置，测试成功请求以及用户关注的故障类型；检查实际导出的 Span，不要想当然地认为 HTTP 状态码与错误严重性之间存在固定映射。
运行应用的常规类型检查、构建和针对性测试。分别报告浏览器执行、遥测数据接收和回放播放情况。构建成功、刷新成功、上传响应或生成链接，都不能证明这三项均已成功。返回已验证的项目/应用、捕获策略，以及相关且干净的界面链接。如果无法读取账户信息或无法在浏览器中播放回放，请将这些部分标记为未验证，并说明缺少哪些证据。
对于服务端 Node.js 或 Next.js 设置，请使用应用埋点。