遥测
Storybook 收集完全匿名的数据,以帮助我们改善用户体验。参与此匿名计划是可选的,如果您不想分享任何信息,可以选择退出。
为什么要收集遥测数据?
每天有成千上万的开发者使用 Storybook 来构建、测试和文档组件。Storybook 是框架无关的,并与前端生态系统集成
- JavaScript 框架,例如 React, Vue 3, Svelte 和 Solid
- 库,例如 Styled-Components, Tailwind, Redux
- 设计工具,例如 Figma, Sketch, Zeplin 和 InVision
- 工作流工具,例如 Notion, Confluence, 和 Jira
过去,我们的改进过程依赖于手动收集反馈。但是随着用户群的增长以及支持各种集成的需求,我们需要一种更准确的方法来衡量 Storybook 的使用情况和痛点。
这些遥测数据帮助我们(维护者)优先处理影响最大的项目。这使我们能够跟上前端生态系统中的趋势,并验证我们社区的辛勤工作是否达到了预期的结果。
正在收集什么?
我们收集一般使用情况的详细信息,包括命令调用、Storybook 版本、插件和视图层。
具体来说,我们在遥测事件中跟踪以下信息
- 发生时间的时间戳。
- 调用的命令(例如,
init
、upgrade
、dev
、build
)。 - Storybook 唯一标识符:在 Storybook 安装过程中生成的单向哈希值。
- 事件发生的 IP 地址的单向哈希值,用于垃圾邮件检测。
- Story 数量。
- Storybook 版本。
- Storybook 元数据
- 语言(例如,TypeScript、JavaScript)。
- 支持的视图层(例如,React、Vue 3、Angular、Svelte)。
- 构建器(例如,Webpack5、Vite)。
- 元框架(例如,Next, Gatsby, CRA)。
- 插件(例如,Essentials, Accessibility)。
- 测试工具(例如 Jest, Vitest, Playwright)。
- 包管理器信息(例如,
npm
,yarn
)。 - Monorepo 信息(例如,NX, Turborepo)。
- 应用内事件(例如,Storybook 引导教程, UI 测试运行)。
对原始数据的访问受到严格控制,仅限于维护遥测数据的 Storybook 核心团队的精选成员。我们无法从数据集中识别 individual 用户:它是匿名的,并且无法追溯到用户。
敏感信息呢?
我们非常重视您的隐私和我们的安全。我们执行额外的步骤,以确保安全数据(例如,环境变量或其他形式的敏感数据)不会进入我们的分析。您可以通过将 STORYBOOK_TELEMETRY_DEBUG
设置为 1
来查看我们收集的所有信息,以打印出收集的信息。例如
STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook
将生成以下输出
{
"anonymousId": "8bcfdfd5f9616a1923dd92adf89714331b2d18693c722e05152a47f8093392bb",
"eventType": "dev",
"payload": {
"versionStatus": "cached",
"storyIndex": {
"storyCount": 0,
"componentCount": 0,
"pageStoryCount": 0,
"playStoryCount": 0,
"autodocsCount": 0,
"mdxCount": 0,
"exampleStoryCount": 8,
"exampleDocsCount": 3,
"onboardingStoryCount": 0,
"onboardingDocsCount": 0,
"version": 5
},
"storyStats": {
"factory": 0,
"play": 0,
"render": 1,
"loaders": 0,
"beforeEach": 0,
"globals": 0,
"storyFn": 5,
"mount": 0,
"moduleMock": 0,
"tags": 0
}
},
"metadata": {
"generatedAt": 1689007841223,
"hasCustomBabel": false,
"hasCustomWebpack": false,
"hasStaticDirs": false,
"hasStorybookEslint": false,
"refCount": 0,
"portableStoriesFileCount": 0,
"packageManager": {
"type": "yarn",
"version": "3.1.1"
},
"monorepo": "Nx",
"framework": {
"name": "@storybook/react-vite",
"options": {}
},
"builder": "@storybook/builder-vite",
"renderer": "@storybook/react",
"storybookVersion": "7.1.0",
"storybookVersionSpecifier": "^7.1.0",
"language": "typescript",
"storybookPackages": {
"@storybook/blocks": {
"version": "7.1.0"
},
"@storybook/react": {
"version": "7.1.0"
},
"@storybook/react-vite": {
"version": "7.1.0"
},
"@storybook/testing-library": {
"version": "0.2.0"
},
"storybook": {
"version": "7.1.0"
}
},
"addons": {
"@storybook/addon-essentials": {
"version": "7.1.0"
},
"@storybook/addon-onboarding": {
"version": "1.0.6"
},
"@storybook/addon-interactions": {
"version": "7.1.0"
}
}
}
}
此外,如果启用了 Storybook 的引导教程,它将生成以下输出
{
"eventType": "addon-onboarding",
"payload": {
"step": "1:Welcome",
"addonVersion": "1.0.6"
},
"metadata": {
// See above for metadata that's collected.
}
}
这些数据会被共享吗?
我们收集的数据是匿名的,无法追溯到来源,并且仅在聚合形式下才有意义。我们收集的任何数据都不是个人可识别的。未来,我们计划通过公共仪表板(或类似的数据表示形式)与社区分享相关数据。
如何退出
您可以通过将 disableTelemetry
配置元素设置为 true
,在您的 Storybook 配置中选择退出遥测。
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
core: {
disableTelemetry: true, // 👈 Disables telemetry
},
};
export default config;
如有必要,您还可以通过命令行使用 --disable-telemetry
标志来关闭遥测。
npm run storybook -- --disable-telemetry
或者通过 STORYBOOK_DISABLE_TELEMETRY
环境变量。
STORYBOOK_DISABLE_TELEMETRY=1 yarn storybook
有一个 boot
事件,其中不包含元数据(用于确保遥测正常工作)。它在评估您的 Storybook 配置文件(即 main.js|ts
)之前发送,因此不受 disableTelemetry
选项的影响。如果您想确保不发送该事件,请使用 STORYBOOK_DISABLE_TELEMETRY
环境变量。
崩溃报告(默认禁用)
除了常规使用情况遥测之外,您还可以选择共享崩溃报告。然后,Storybook 将清理错误对象(删除所有用户路径)并将其附加到遥测事件。要启用崩溃报告,您可以将 enableCrashReports
配置元素设置为 true
。
// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
core: {
enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
},
};
export default config;
您还可以通过命令行使用 --enable-crash-reports
标志来启用崩溃报告。
npm run storybook -- --enable-crash-reports
或者通过将 STORYBOOK_ENABLE_CRASH_REPORTS
环境变量设置为 1
。
STORYBOOK_ENABLE_CRASH_REPORTS=1 yarn storybook
启用任何选项都将在遥测事件中生成以下项目
{
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' +
' at Object.Module._extensions..js (node:internal/modules/cjs/loader:1157:10)\n' +
' at Module.load (node:internal/modules/cjs/loader:981:32)\n' +
' at Function.Module._load (node:internal/modules/cjs/loader:822:12)\n' +
' at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)\n' +
' at node:internal/main/run_main_module:17:47',
message: 'Your button is not working'
}