Telemetry

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?

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 frameworks such as React, Vue, and Svelte
Libraries such as Styled-Components, Tailwind, Redux
Design tools such as Figma, Sketch, Zeplin and InVision
Workflow tools such as Notion, Confluence, and Jira

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?

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.
Command invoked (e.g., init, upgrade, start-storybook).
Storybook unique identifier: One-way hash generated during Storybook installation process.
One way hash of the IP address where the event occurred for spam detection.
Story count.
Storybook version.
Storybook metadata:
- Language (e.g., TypeScript, JavaScript).
- Supported view layers (e.g., React, Vue, Angular, Svelte).
- Builder (e.g., Webpack4, Webpack5, Vite).
- Meta framework (e.g., Next, Gatsby, CRA).
- Addons (e.g., Essentials, Accessibility).
- Feature flags (e.g., buildStoriesJson).
Package manager information (e.g., npm, yarn).
Monorepo information (e.g., NX, Turborepo).
Whether the command was invoked on CI or not.

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?

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": "start",
  "payload": {
    "storyIndex": {
      "storyCount": 4,
      "version": 3
    }
  },
  "inCI": false,
  "metadata": {
    "generatedAt": 1648233198722,
    "builder": {
      "name": "webpack4"
    },
    "hasCustomBabel": false,
    "hasCustomWebpack": true,
    "hasStaticDirs": true,
    "hasStorybookEslint": false,
    "refCount": 0,
    "metaFramework": {
      "name": "CRA",
      "packageName": "react-scripts",
      "version": "4.0.3"
    },
    "packageManager": {
      "name": "yarn",
      "version": "3.1.1",
    },
    "monorepo": "Nx",
    "features": {
      "buildStoriesJson": true
    },
    "storybookVersion": "6.5.0",
    "language": "typescript",
    "storybookPackages": {
      "@storybook/addons": {
        "version": "6.5.0"
      },
      "@storybook/builder-webpack4": {
        "version": "6.5.0"
      },
      "@storybook/react": {
        "version": "6.5.0"
      }
    },
    "framework": {
      "name": "react"
    },
    "addons": {
      "@storybook/preset-create-react-app": {
        "version": "3.2.0"
      },
      "@storybook/addon-ie11": {
        "version": "0.0.7--canary.5e87b64.0"
      },
      "@storybook/addon-essentials": {
        "options": {
          "viewport": false
        },
        "version": "6.5.0"
      }
    }
  }
}

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

You may opt-out of the telemetry within your Storybook configuration by setting the disableTelemetry configuration element to true. For example:

.storybook/main.ts

// Imports Storybook's configuration API
import type { StorybookConfig } from '@storybook/core-common';
 
const config: StorybookConfig = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
    disableTelemetry: true, // 👈 Disables telemetry
  },
};
 
module.exports = config;

Or via the command line with the --disable-telemetry flag or the STORYBOOK_DISABLE_TELEMETRY environment variable:

npm run storybook -- --disable-telemetry

Crash reports (disabled by default)

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. For example:

.storybook/main.ts

// Imports Storybook's configuration API
import type { StorybookConfig } from '@storybook/core-common';
 
const config: StorybookConfig = {
  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/preset-create-react-app',
  ],
  framework: '@storybook/react',
  core: {
    builder: 'webpack5',
    enableCrashReports: true, // 👈 Appends the crash reports to the telemetry events
  },
};
 
module.exports = config;

Additionally, you can enable crash reports via the command line with the --enable-crash-reports flag or the STORYBOOK_ENABLE_CRASH_REPORTS environment variable.

npm run storybook -- --enable-crash-reports

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