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.
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.
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
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'
},
}),
],
};
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;
}
git clone
yarn
yarn dev
to run a super-simple webpack-dev-server with the plugindebug
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/
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.
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 }
}
git clone
yarn
yarn dev
to run a super-simple webpack-dev-server with the plugindebug
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/
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.
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 |