@fforres/vite-plugin-dx

DX-analytics-vite-plugin

This vite plugin is written in typescript, and serves as a way to quickly gather meaningful information on a vite project's DX usage and sending it to datadog via datadog-metrics.

Plugin keeps track of execution of different vite hooks, and using some timers, calculates and reports on things like compilation or recompilation time.

So... What can I do with it?

Adding it to your vite's config, it will track every module compilation and recompilation times, so you can see how your project's developer experience is performing in your teammate's machines.

For example, this is a screenshot a datadog dashboard created with this plugin.

Install

If your are using yarn

yarn add --dev @fforres/vite-plugin-dx

or if you use npm

npm install --save-dev @fforres/vite-plugin-dx

Usage

you can see some usage of it in the ./vite.config.ts file.

But in essence you require the @fforres/vite-plugin-dx and wrap your vite plugins in your vite.config file. At a bare minimum you need to pass you datadog api key, you can get it from https://.datadoghq.com/account/settings#api

DXVitePlugin exposes a dxMetricsWrapper function, you can wrap all your plugins for this plugin to work.

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from 'vite';
import DXVitePlugin from './build/src/index.js';

const { dxMetricsWrapper } = new DXVitePlugin({
  projectName: 'some-name',
  dryRun: true,
  datadogConfig: {
    apiKey: 'some-key',
    /* SOME DATADOG API KEY FROM https://<YOUR_ORG>.datadoghq.com/account/settings#api */
  },
});

// https://vitejs.dev/config/
export default defineConfig({
  plugins: dxMetricsWrapper([aPlugin, anotherPlugin]),
});

Alternatively, you can also obtain a pre and post plugin and do this manually.

e.g.

/* eslint-disable import/no-extraneous-dependencies */
import { defineConfig } from 'vite';
import DXVitePlugin from './build/src/index.js';

const { dxMetricsPlugins } = new DXVitePlugin({
  projectName: 'some-name',
  dryRun: true,
  datadogConfig: {
    apiKey: 'some-key',
    /* SOME DATADOG API KEY FROM https://<YOUR_ORG>.datadoghq.com/account/settings#api */
  },
});

const [dxMetricsPrePlugin, dxMetricsPostPlugin] = dxMetricsPlugins

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    dxMetricsPrePlugin(),
    aPlugin,
    anotherPlugin,
    dxMetricsPostPlugin()
  ]),
});

Plugin Options

Options are defined by DXVitePluginProps

Object Key	Required	Default Value	Description
projectName	yes		Datadog's project name, will be added to each track call as projectName tag
datadogConfig	no	{"prefix":"ux.vite.","flushIntervalSeconds":2}	Config object for Datadog Metrics - Typescript Type here
enabledKeysToTrack	no	['recompile','recompile_session','compile','compile_session']	An array of keys that will define what "keys" will be tracked. By Default we track all the keys
tags	no	{}	Extra tags to be added to Datadog Metrics - An object shape of { tagName: "tagValue", environment: "production" }
dryRun	no	false	If true, will not send tracking events to datadog.
memoryTracking	no	{ enabled: true, lapseTimeInMilliseconds: 2000 }	By default this will track memory usage of this process on every lapseTimeInMilliseconds

{
  projectName: string;
  datadogConfig?: BufferedMetricsLoggerOptions;
  enabledKeysToTrack?: TrackingMetricKeys[];
  tags?: { [key: string]: string };
  dryRun?: boolean;
  memoryTracking: { enabled: true, lapseTimeInMilliseconds: 2000 }
}

Development

• git clone
• yarn
• yarn dev to run a super-simple vite-server with the plugin debug enabled
• or yarn debug to run vite with node --inspect-brk flag, and be able to debug using the NIM - Node Inspector Manager chrome extension
• Once you have this running, go ahead and change (and save) a file inside ./app/

Deploy

To deploy, create a PR and bump the the version in package.json. Once the PR is merged it will deploy a new version of the package.

Current things being tracked

Metric	Tracking key	Description	How are we tracking
compilationSession	compile_session	Tracks the time from when a "compilation" process starts, until it finishes.	histogram & increment
recompilationSession	recompile_session	Tracks the time when module recompilation starts, until it finishes.	histogram & increment