@fforres/webpack-plugin-dx

DX-analytics-webpack-plugin

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

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

So... What can I do with it?

Adding it to your webpack's config in dev mode, it will track every project compilation and module recompilation time, so you can track 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/webpack-plugin-dx

or if you use npm

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

Usage

you can see some usage of it in ./webpack.config.dev.js But in essence you require the @fforres/webpack-plugin-dx and use in in the plugins in your webpack config. At a bare minimum you need to pass you datadog api key, you can get it from https://<YOUR_ORG>.datadoghq.com/account/settings#api

const UXWebpackPlugin = require('@fforres/webpack-plugin-dx');
module.exports = {
  {...}
  plugins: [
    new UXWebpackPlugin({
      datadogConfig: {
        /* DATADOG API KEY FROM https://<YOUR_ORG>.datadoghq.com/account/settings#api */,
        apiKey: 'random_key_string',
        /* The name of the current project, will be added to datadog as the `projectName` tag */
        projectName: 'some_cool_project_name'
      },
    }),
  ],
};

Plugin Options

Options are defined by DXWebpackPluginProps

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.webpack.","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.

{
  projectName: string;
  datadogConfig?: BufferedMetricsLoggerOptions;
  enabledKeysToTrack?: TrackingMetricKeys[];
  tags?: { [key: string]: string };
  dryRun?: boolean;
}

Development

• git clone
• yarn
• yarn dev to run a super-simple webpack-dev-server with the plugin debug enabled
• or yarn debug to run webpack 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
compilation	compile	Tracks only the time an application takes to compile the code. Regarding wepback hooks tracks from "beforeCompile" to "compilation"	histogram
compilationSession	compile_session	Tracks the time from when a webpack process starts, until it finishes. Regarding wepback hooks tracks from "environment" to "done"	histogram & increment
recompilation	recompile	Tracks "only" the time an application takes to re-compile the code. (After the initial compilation). Regarding wepback hooks tracks from "beforeCompile" to "compilation"	histogram
recompilationSession	recompile_session	Tracks the time when a webpack recompilation starts, until it finishes. Regarding wepback hooks, it tracks from "watchRun" to "done"	histogram & increment
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 webpack-dev-server with the plugin debug enabled
• or yarn debug to run webpack 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