遙測
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
)。 - 單一程式碼庫資訊(例如,NX、Turborepo)。
- 應用程式內事件(例如,Storybook 引導導覽)。
原始資料的存取受到嚴格控制,僅限於維護遙測的 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": 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-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.
}
}
這些資料會被分享嗎?
我們收集的資料是匿名的,無法追溯到來源,並且僅在彙總形式下才有意義。我們收集的任何資料都不會是個人身份資訊。未來,我們計劃透過公開儀表板(或類似的資料呈現格式)與社群分享相關資料。
如何選擇退出
您可以透過將 Storybook 的組態元素 disableTelemetry
設定為 true
、使用 --disable-telemetry
旗標或將環境變數 STORYBOOK_DISABLE_TELEMETRY
設定為 1
來選擇退出遙測功能。例如:
// 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
環境變數。
當機報告(預設停用)
除了通用的使用情況遙測外,您也可以選擇分享當機報告。然後,Storybook 將清除錯誤物件(刪除所有使用者路徑)並將其附加到遙測事件中。若要啟用當機報告,您可以將 enableCrashReports
組態元素設定為 true
、使用 --enable-crash-reports
旗標,或將 STORYBOOK_ENABLE_CRASH_REPORTS
環境變數設定為 1
。例如:
// 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;
在遙測事件中產生以下項目:
{
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'
}