New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,441
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Datadog RUM
Datadog
npm install storybook-addon-datadog-rum
Last updated over 1 year ago
1
Downloads per week
Readme View on GitHub

Datadog RUM / Storybook Addon

MIT License npm version

A StorybookJS Addon for using Datadog's RUM tool to collect data about how your visitors are using your Storybook component documentation. Use RUM to find out which documentation pages are popular or have errors before your users notice.

Demo

  • Insert link to a public Datadog Storybook using this addon
  • Insert link to GIF showing storybook data inside of a Datadog dash

Installation

Install storybook-addon-datadog-rum with NPM or yarn

  npm install storybook-addon-datadog-rum
  yarn add storybook-addon-datadog-rum

Environment Variables

To run this project, you will need to add the following environment variables to your .env file. (See typings.d.ts for the most up-to-date list.)

{
    STORYBOOK_DATADOG_APPLICATION_ID: string;
    STORYBOOK_DATADOG_CLIENT_TOKEN: string;
    STORYBOOK_DATADOG_SITE: string;

    // The variables below are optional
    // Read about what they do here:
    STORYBOOK_DATADOG_SERVICE?: string;
    STORYBOOK_DATADOG_SAMPLE_RATE?: number;
    STORYBOOK_DATADOG_TRACK_INTERACTIONS?: boolean;
    STORYBOOK_DATADOG_VERSION?: string;
    STORYBOOK_DATADOG_ENV?: string;
}

Full initialization parameters documentation

Then, read them in your manager.js.

window.STORYBOOK_DATADOG_APPLICATION_ID = process.env.STORYBOOK_DATADOG_APPLICATION_ID;
window.STORYBOOK_DATADOG_CLIENT_TOKEN = process.env.STORYBOOK_DATADOG_CLIENT_TOKEN;
window.STORYBOOK_DATADOG_SITE = process.env.STORYBOOK_DATADOG_SITE;
window.STORYBOOK_DATADOG_SERVICE = process.env.STORYBOOK_DATADOG_SERVICE;

Contributing

Contributions are always welcome!

See contributing.md for ways to get started, and MAINTAINERS to learn how to publish the library

Please adhere to this project's code of conduct.

Acknowledgements

Authors

Appendix

  • Disable data collection when running locally
  • Enable logging custom events
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI