ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

Storybook 崩溃报告遥测:使用 --enable-crash-reports 标志与三种启用方式详解

Storybook 崩溃报告遥测:使用 --enable-crash-reports 标志与三种启用方式详解 Storybook 崩溃报告遥测使用 --enable-crash-reports 标志与三种启用方式详解【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybookStorybook 默认收集完全匿名的使用数据以改进开发者体验而崩溃报告Crash Reports默认处于关闭状态需要显式开启才会随遥测事件上报错误堆栈。本指南围绕--enable-crash-reports命令行标志完整讲解如何在 npm、pnpm、yarn 三种包管理器下通过 CLI 启用崩溃报告并深入其背后的配置项enableCrashReports、环境变量STORYBOOK_ENABLE_CRASH_REPORTS与源码级脱敏机制。读完后你将能在团队项目中按需打开或彻底关闭崩溃上报同时理解错误信息是如何被匿名化保护隐私的。崩溃报告与常规遥测的区别Storybook 的遥测系统由两部分组成官方文档见 docs/configure/telemetry.mdx常规使用遥测默认开启记录命令调用如init、upgrade、dev、build、Storybook 版本、addons、视图层view layer、包管理器、monorepo 信息等汇总性数据崩溃报告默认关闭在常规遥测之上额外将脱敏后的错误对象sanitized error附加到遥测事件中帮助维护团队定位真实崩溃原因。二者的关系用一句源码注释可以概括在 code/core/src/telemetry/index.ts 中只有当options?.enableCrashReports为真时才会把完整错误对象写入事件载荷否则错误只在常规遥测中以消息摘要形式出现。通过命令行标志启用--enable-crash-reports关联文档 docs/_snippets/storybook-telemetry-storybook-enable-crash-reports-flag.md 给出了三种包管理器下启用崩溃报告的标准命令直接复用于storybookCLInpm run storybook -- --enable-crash-reportspnpm run storybook --enable-crash-reportsyarn storybook --enable-crash-reports使用要点npm 需要--分隔符npm run storybook会把参数透传给脚本因此必须用--把--enable-crash-reports转交给实际的storybook命令pnpm 无需--pnpm 默认将run之后的参数直接透传给脚本yarn 直接调用yarn storybook直接执行二进制标志自然生效。该标志对所有 storybook CLI 子命令均有效。在 docs/api/cli-options.mdx 中--enable-crash-reports被声明为向 Storybook 遥测发送崩溃报告的通用选项覆盖了storybook dev、storybook build、storybook init、storybook remove、storybook upgrade、storybook automigrate、storybook sandbox以及create storybook等全部命令例如storybook dev --enable-crash-reports storybook build --enable-crash-reports storybook upgrade --enable-crash-reports也就是说无论在开发、构建还是升级阶段遇到问题都可以临时加上该标志上报崩溃便于维护团队复现和修复。另外两种等价的启用方式除了 CLI 标志崩溃报告还有两种配置入口三者效果等价、可任选其一方式一配置文件中的enableCrashReports在 Storybook 的main.js|ts配置文件中将core.enableCrashReports设为true参考 docs/api/main-config/main-config-core.mdx 中该选项的说明类型为boolean// .storybook/main.js export default { core: { enableCrashReports: true, }, };该选项与core.disableTelemetry同属core命名空间。在源码层面code/core/src/core-server/presets/common-preset.ts 与 code/core/src/types/modules/core-common.ts 负责承载这一配置并最终映射到遥测系统的Options.enableCrashReports见 code/core/src/telemetry/types.ts 中的Options接口定义。方式二环境变量STORYBOOK_ENABLE_CRASH_REPORTS将环境变量设为1即可STORYBOOK_ENABLE_CRASH_REPORTS1 storybook dev对于 CI/CD 流水线等不便改配置文件的场景环境变量是最轻量的开关。底层原理错误级别解析与脱敏上报启用崩溃报告后实际发送流程由 code/core/src/core-server/withTelemetry.ts 驱动。核心函数getErrorLevel按优先级决定错误上报级别none | error | full若cliOptions.disableTelemetry为真直接返回none遥测整体关闭加载 presets 后读取main.js中的core.enableCrashReports为true返回full发送完整错误为false返回error仅发送错误摘要core.disableTelemetry为真则返回none读取缓存中的历史选择兼容旧版enableCrashreports拼写非 TTY 或 CI 环境下跳过交互直接返回error否则弹出交互式确认Would you like to send anonymous crash reports to improve Storybook and fix bugs faster?把选择写入缓存。只有errorLevel full时sendTelemetryError才会以enableCrashReports: true且force: true的方式调用telemetry(error, ...)——force选项的意义在 code/core/src/telemetry/index.ts 中有注释说明用于启用崩溃报告时的错误遥测绕过禁用状态。这意味着即使常规遥测被关闭只要显式开启了崩溃报告错误事件仍会发送。错误脱敏$SNIP 替换用户路径崩溃报告发送前错误对象会经过 code/core/src/telemetry/sanitize.ts 的sanitizeError处理其核心逻辑是removeAnsiEscapeCodes剥离错误消息与堆栈中的 ANSI 颜色转义码cleanPaths基于process.cwd()与os.homedir()逐级向上泛化路径把所有用户相关的绝对路径含 Windows 双分隔符变体替换为$SNIP占位符。因此崩溃报告中不会出现开发者的真实目录结构。官方文档 docs/configure/telemetry.mdx 给出的崩溃报告事件示例对应片段 docs/_snippets/storybook-telemetry-crash-report-event.md展示了脱敏后的效果{ stack: Error: Your button is not working\n at Object.anonymous ($SNIP/test.js:39:27)\n at Module._compile (node:internal/modules/cjs/loader:1103:14)\n ..., message: Your button is not working }可见用户路径已被$SNIP遮蔽仅保留错误本身与 Node 内部栈帧既可用于调试又不泄露本地文件布局。文档同时强调可通过设置STORYBOOK_TELEMETRY_DEBUG1在本地打印所有将要收集的信息做到完全透明可审计。如何关闭遥测与崩溃报告崩溃报告依赖遥测通道因此关闭遥测即同时关闭崩溃上报。官方提供三种方式见 docs/configure/telemetry.mdx 的 How to opt-out 一节// 1. main.js 配置 export default { core: { disableTelemetry: true, }, };# 2. CLI 标志 storybook dev --disable-telemetry# 3. 环境变量 STORYBOOK_DISABLE_TELEMETRY1 storybook dev需要注意一个细节存在一个不携带任何元数据的boot事件它用于确认遥测通道可用且在评估main.js之前就已发送因此不受disableTelemetry配置影响若希望连这个事件也不发送必须使用STORYBOOK_DISABLE_TELEMETRY环境变量。从 code/core/src/core-server/withTelemetry.ts 的resolveTelemetryState可以看出CLI 选项与main.js配置都会在加载 presets 之前或之后被显式读取并决定遥测开关状态。小结启用崩溃报告npm run storybook -- --enable-crash-reportsnpm、pnpm run storybook --enable-crash-reportspnpm、yarn storybook --enable-crash-reportsyarn该标志适用于dev、build、init、upgrade等所有 CLI 子命令等价配置core.enableCrashReports: true或环境变量STORYBOOK_ENABLE_CRASH_REPORTS1隐私保障错误对象经 sanitize.ts 脱敏用户路径一律替换为$SNIP可用STORYBOOK_TELEMETRY_DEBUG1本地核验彻底关闭core.disableTelemetry: true、--disable-telemetry或STORYBOOK_DISABLE_TELEMETRY1。崩溃报告是默认关闭的可选项适合在遇到难以复现的 CLI 崩溃时临时开启将匿名错误堆栈反馈给维护团队而日常开发中保持默认关闭或按团队隐私策略显式配置即可。【免费下载链接】storybookStorybook is the industry standard workshop for building, documenting, and testing UI components in isolation项目地址: https://gitcode.com/GitHub_Trending/st/storybook创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表