88,244
文档
Storybook Docs

遥测

Storybook 收集完全匿名的数据，以帮助我们改善用户体验。参与此匿名计划是可选的，如果您不想共享任何信息，可以选择退出。

为什么要收集遥测数据？

数十万开发者每天使用 Storybook 来构建、测试和文档化组件。Storybook 与前端生态系统集成，与框架无关。

过去，我们的改进过程依赖于手动收集反馈。但随着用户群的增长以及支持各种集成的需求，我们需要一种更准确的方法来衡量 Storybook 的使用情况和痛点。

这些遥测数据帮助我们（维护者）确定最高影响力项目的优先级。这使我们能够跟上前端生态系统的趋势，并验证我们社区的辛勤工作是否达到了预期的结果。

收集了哪些内容？

我们收集通用使用详细信息，包括命令调用、Storybook 版本、插件和视图层。

具体来说，我们在遥测事件中跟踪以下信息：

  • 事件发生的时间戳。
  • 调用的命令（例如，init、upgrade、dev、build）。
  • Storybook 唯一标识符：在 Storybook 安装过程中生成的一次性哈希。
  • 发生事件的 IP 地址的一次性哈希，用于垃圾邮件检测。
  • Story 数量。
  • Storybook 版本。
  • Storybook 元数据
    • 语言（例如，TypeScript、JavaScript）。
    • 支持的视图层（例如，React、Vue 3、Angular、Svelte）。
    • 构建器（例如，Webpack5、Vite）。
    • 元框架（例如，Next、Gatsby、CRA）。
    • 插件（例如，可访问性）。
    • 测试工具（例如，Jest、Vitest、Playwright）。
  • 包管理器信息（例如，npm、yarn）。
  • Monorepo 信息（例如，NX、Turborepo）。
  • 应用内事件（例如，Storybook 引导式教程、UI 测试运行）。

原始数据的访问受到严格控制，仅限于 Storybook 核心团队中负责维护遥测的少数成员。我们无法从数据集中识别个人用户：数据是匿名的，并且无法追溯到用户。

关于敏感信息？

我们非常重视您的隐私和我们的安全。我们采取额外措施，确保安全数据（例如，环境变量或其他形式的敏感数据）**不会**进入我们的分析。您可以通过将 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,
    "settingsCreatedAt": 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": "9.0.0",
    "storybookVersionSpecifier": "^9.0.0",
    "language": "typescript",
    "storybookPackages": {
      "@storybook/addon-docs/blocks": {
        "version": "9.0.0"
      },
      "@storybook/react": {
        "version": "9.0.0"
      },
      "@storybook/react-vite": {
        "version": "9.0.0"
      },
      "storybook": {
        "version": "9.0.0"
      }
    },
    "addons": {
      "@storybook/addon-onboarding": {
        "version": "1.0.6"
      }
    }
  }
}

此外，如果启用了 Storybook 的引导式教程，它将生成以下输出：

{
  "eventType": "addon-onboarding",
  "payload": {
    "step": "1:Welcome",
    "addonVersion": "1.0.6"
  },
  "metadata": {
    // See above for metadata that's collected.
  }
}

这些数据会共享吗？

我们收集的数据是匿名的、不可追溯来源的，并且仅在聚合形式下才有意义。我们收集的任何数据都不能用于识别个人。将来，我们计划通过公共仪表板（或类似的数据表示格式）与社区共享相关数据。

如何退出

您可以通过在 Storybook 配置中将 disableTelemetry 配置元素设置为 true 来选择退出遥测。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
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。

.storybook/main.ts
// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
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'
}
此页面有用吗？
✍️ 在 GitHub 上编辑