README

Datadog RUM / Storybook Addon

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

Cameron Yick

Appendix

Disable data collection when running locally
Enable logging custom events

Usage no npm install needed!