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

• README Generator
• Addon Kit Template

Authors

• Cameron Yick

Appendix

• Disable data collection when running locally
• Enable logging custom events