遥测

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

¥Storybook collects completely anonymous data to help us improve user experience. Participation in this anonymous program is optional, and you may opt-out if you'd not like to share any information.

为什么要收集遥测数据？

¥Why is telemetry collected?

每天有成千上万的开发者使用 Storybook 来构建、测试和记录组件。Storybook 与框架无关，并与前端生态系统集成：

¥Hundreds of thousands of developers use Storybook daily to build, test, and document components. Storybook is framework agnostic and integrates with the front-end ecosystem:

JavaScript 框架，例如 React、Vue 3、Svelte 和 Solid

¥JavaScript frameworks such as React, Vue 3, Svelte and Solid
诸如 Styled-Components、Tailwind、Redux 之类的库

¥Libraries such as Styled-Components, Tailwind, Redux
设计工具，例如 Figma、Sketch、Zeplin 和 InVision

¥Design tools such as Figma, Sketch, Zeplin and InVision
工作流工具，例如 Notion、Confluence 和 Jira

¥Workflow tools such as Notion, Confluence, and Jira

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

¥In the past, our improvement process relied on manually gathering feedback. But with a growing userbase and the need to support a wide variety of integrations, we need a more accurate method for gauging Storybook usage and pain points.

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

¥These telemetry data help us (the maintainers) to prioritize the highest impact projects. That allows us to keep up with trends in the front-end ecosystem and verify that our community's hard work achieves the intended result.

正在收集什么？

¥What is being collected?

我们收集一般使用详情，包括命令调用、Storybook 版本、插件和视图层。

¥We collect general usage details, including command invocation, Storybook version, addons, and the view layer.

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

¥Specifically, we track the following information in our telemetry events:

发生的时间戳。

¥Timestamp of the occurrence.
调用的命令（例如，init、upgrade、dev、build）。

¥Command invoked (e.g., init, upgrade, dev, build).
Storybook 唯一标识符：在 Storybook 安装过程中生成的单向哈希。

¥Storybook unique identifier: One-way hash generated during Storybook installation process.
用于垃圾邮件检测的事件发生 IP 地址的单向哈希。

¥One way hash of the IP address where the event occurred for spam detection.
故事计数。

¥Story count.
Storybook 版本。

¥Storybook version.
Storybook 元数据：

¥Storybook metadata:
- 语言（例如，TypeScript、JavaScript）。
  
  ¥Language (e.g., TypeScript, JavaScript).
- 支持的视图层（例如，React、Vue 3、Angular、Svelte）。
  
  ¥Supported view layers (e.g., React, Vue 3, Angular, Svelte).
- 构建器（例如，Webpack5、Vite）。
  
  ¥Builder (e.g., Webpack5, Vite).
- 元框架（例如下一步、Gatsby、CRA）。
  
  ¥Meta framework (e.g., Next, Gatsby, CRA).
- 插件（例如，基本要素、可访问性）。
  
  ¥Addons (e.g., Essentials, Accessibility).
- 测试工具（例如 Jest、Vitest、Playwright）。
  
  ¥Testing tools (e.g. Jest, Vitest, Playwright).
包管理器信息（例如，npm、yarn）。

¥Package manager information (e.g., npm, yarn).
Monorepo 信息（例如 NX、Turborepo）。

¥Monorepo information (e.g., NX, Turborepo).
（如果你打算描述参数的类型，则应使用 Storybook 导览。）

¥In-app events (e.g., Storybook guided tour).

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

¥Access to the raw data is highly controlled, limited to select members of Storybook's core team who maintain the telemetry. We cannot identify individual users from the dataset: it is anonymized and untraceable back to the user.

敏感信息怎么样？

¥What about sensitive information?

我们非常重视你的隐私和我们的安全。我们执行其他步骤以确保安全数据（例如环境变量或其他形式的敏感数据）不会进入我们的分析。你可以通过将 STORYBOOK_TELEMETRY_DEBUG 设置为 1 来打印收集到的信息，从而查看我们收集的所有信息。例如：

¥We take your privacy and our security very seriously. We perform additional steps to ensure that secure data (e.g., environment variables or other forms of sensitive data) do not make their way into our analytics. You can view all the information we collect by setting the STORYBOOK_TELEMETRY_DEBUG to 1 to print out the information gathered. For example:

STORYBOOK_TELEMETRY_DEBUG=1 npm run storybook

将生成以下输出：

¥Will generate the following output:

{
  "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": 4
    },
    "storyStats": {
      "play": 0,
      "render": 1,
      "loaders": 0,
      "beforeEach": 0,
      "globals": 0,
      "storyFn": 5,
      "mount": 0,
      "moduleMock": 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-links": {
        "version": "7.1.0"
      },
      "@storybook/addon-essentials": {
        "version": "7.1.0"
      },
      "@storybook/addon-onboarding": {
        "version": "1.0.6"
      },
      "@storybook/addon-interactions": {
        "version": "7.1.0"
      }
    }
  }
}

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

¥Additionally, if Storybook's guided tour is enabled, it will generate the following output:

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

这些数据会被共享吗？

¥Will this data be shared?

我们收集的数据是匿名的，无法追溯到源头，并且仅以聚合形式有意义。我们收集的任何数据都无法识别个人身份。将来，我们计划通过公共仪表板（或类似的数据表示格式）与社区分享相关数据。

¥The data we collect is anonymous, not traceable to the source, and only meaningful in aggregate form. No data we collect is personally identifiable. In the future, we plan to share relevant data with the community through public dashboards (or similar data representation formats).

如何选择退出

¥How to opt-out

你可以通过将 Storybook 的配置元素 disableTelemetry 设置为 true、使用 --disable-telemetry 标志或将环境变量 STORYBOOK_DISABLE_TELEMETRY 设置为 1 来选择退出遥测。例如：

¥You may opt-out of the telemetry by setting Storybook's configuration element disableTelemetry to true, using the --disable-telemetry flag, or setting the environment variableSTORYBOOK_DISABLE_TELEMETRY to 1. For example:

.storybook/main.ts

// 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;

有一个不包含元数据的 boot 事件（用于确保遥测正常工作）。它是在评估你的 Storybook 配置文件（即 main.js|ts）之前发送的，因此不受 disableTelemetry 选项的影响。如果你想确保不发送事件，请使用 STORYBOOK_DISABLE_TELEMETRY 环境变量。

¥There is a boot event containing no metadata (used to ensure the telemetry is working). It is sent prior to evaluating your Storybook configuration file (i.e., main.js|ts), so it is unaffected by the disableTelemetry option. If you want to ensure that the event is not sent, use the STORYBOOK_DISABLE_TELEMETRY environment variable.

崩溃报告（由默认)

¥Crash reports (disabled by default)

除了一般使用遥测之外，你还可以选择共享崩溃报告。然后，Storybook 将清理错误对象（删除所有用户路径）并将其附加到遥测事件。要启用崩溃报告，你可以使用 --enable-crash-reports 标志将 enableCrashReports 配置元素设置为 true，或将 STORYBOOK_ENABLE_CRASH_REPORTS 环境变量设置为 1。例如：

¥In addition to general usage telemetry, you may also choose to share crash reports. Storybook will then sanitize the error object (removing all user paths) and append it to the telemetry event. To enable crash reporting, you can set the enableCrashReports configuration element to true, using the --enable-crash-reports flag, or set the STORYBOOK_ENABLE_CRASH_REPORTS environment variable to 1. For example:

.storybook/main.ts

// 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;

在遥测事件中生成以下项目：

¥Generates the following item in the telemetry event:

{
  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'
}