85,947
文件
Storybook 文件

遙測

Storybook 收集完全匿名的資料，以幫助我們改善使用者體驗。參與此匿名計畫是可選的，如果您不想分享任何資訊，可以選擇退出。

為何收集遙測資料？

成千上萬的開發人員每天使用 Storybook 來建置、測試和記錄元件。Storybook 是與框架無關的，並與前端生態系統整合

過去，我們的改進流程依賴於手動收集回饋。但隨著使用者群的增長以及支援各種整合的需求，我們需要更準確的方法來衡量 Storybook 的使用情況和痛點。

這些遙測資料幫助我們（維護者）優先處理影響最大的專案。這使我們能夠跟上前端生態系統的趨勢，並驗證我們社群的辛勤工作是否達到了預期的結果。

正在收集哪些資料？

我們收集一般使用詳情，包括命令調用、Storybook 版本、附加元件和視圖層。

具體來說，我們在遙測事件中追蹤以下資訊

  • 事件發生的時間戳記。
  • 調用的命令 (例如，init、upgrade、dev、build)。
  • Storybook 唯一識別碼：在 Storybook 安裝過程中產生的一次性雜湊值。
  • 事件發生的 IP 位址的一次性雜湊值，用於垃圾郵件偵測。
  • Story 數量。
  • Storybook 版本。
  • Storybook 元數據
  • 套件管理器資訊 (例如，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,
    "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 設定中選擇退出遙測。

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

如有必要，您也可以使用 --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-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'
}
此頁面是否實用？
✍️ 在 Github 上編輯