{"id":44542861,"url":"https://github.com/fforres/webpack-plugin-dx-metrics","last_synced_at":"2026-02-13T19:04:15.768Z","repository":{"id":46180539,"uuid":"335144576","full_name":"fforres/webpack-plugin-dx-metrics","owner":"fforres","description":"Webpack plugin to track webpack behaviour in datadog","archived":false,"fork":false,"pushed_at":"2021-11-09T05:10:04.000Z","size":983,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-15T02:01:23.568Z","etag":null,"topics":["data","datadog","developer-experience","typescript","visualization","webpack"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fforres.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-02-02T02:27:05.000Z","updated_at":"2023-03-27T20:31:44.000Z","dependencies_parsed_at":"2022-09-08T10:13:54.489Z","dependency_job_id":null,"html_url":"https://github.com/fforres/webpack-plugin-dx-metrics","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fforres/webpack-plugin-dx-metrics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fforres%2Fwebpack-plugin-dx-metrics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fforres%2Fwebpack-plugin-dx-metrics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fforres%2Fwebpack-plugin-dx-metrics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fforres%2Fwebpack-plugin-dx-metrics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fforres","download_url":"https://codeload.github.com/fforres/webpack-plugin-dx-metrics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fforres%2Fwebpack-plugin-dx-metrics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29414386,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["data","datadog","developer-experience","typescript","visualization","webpack"],"created_at":"2026-02-13T19:03:39.121Z","updated_at":"2026-02-13T19:04:15.752Z","avatar_url":"https://github.com/fforres.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DX-analytics-webpack-plugin\n\n[![Github test badge](https://github.com/fforres/webpack-plugin-dx-metrics/workflows/test/badge.svg)](https://github.com/fforres/webpack-plugin-dx-metrics/actions?query=workflow%3Atest) [![npm version](https://badge.fury.io/js/%40fforres%2Fwebpack-plugin-dx.svg)](https://www.npmjs.com/package/@fforres/webpack-plugin-dx)\n\n\u003cimg src=\"./logo/logo@2x.png\" width=\"400px\" style=\"max-width:100%;\"\u003e\u003c/img\u003e\n\nThis 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](https://github.com/dbader/node-datadog-metrics).\n\nPlugin keeps track of execution of different [webpack hooks](https://webpack.js.org/api/compiler-hooks/), and using a series of timers, calculates and reports on things like compilation or recompilation time.\n\n## So... What can I do with it?\n\nAdding 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.\n\nFor example, this is a screenshot a datadog dashboard created with this plugin.\n\n![Example of a datadog dashboard](https://user-images.githubusercontent.com/952992/109847124-b1859580-7c03-11eb-806e-6a493fd87030.png)\n\n## Install\n\nIf your are using yarn\n\n```bash\nyarn add --dev @fforres/webpack-plugin-dx\n```\n\nor if you use npm\n\n```bash\nnpm install --save-dev @fforres/webpack-plugin-dx\n```\n\n## Usage\n\nyou can see some usage of it in [./webpack.config.dev.js](./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://\u003cYOUR_ORG\u003e.datadoghq.com/account/settings#api**\n\n```TYPESCRIPT\nconst UXWebpackPlugin = require('@fforres/webpack-plugin-dx');\nmodule.exports = {\n  {...}\n  plugins: [\n    new UXWebpackPlugin({\n      datadogConfig: {\n        /* DATADOG API KEY FROM https://\u003cYOUR_ORG\u003e.datadoghq.com/account/settings#api */,\n        apiKey: 'random_key_string',\n        /* The name of the current project, will be added to datadog as the `projectName` tag */\n        projectName: 'some_cool_project_name'\n      },\n    }),\n  ],\n};\n```\n\n## Plugin Options\n\nOptions are defined by [`DXWebpackPluginProps`](./src/types.ts)\n\n| Object Key         | Required | Default Value                                                   | Description                                                                                                                                                                                                                                                   |\n| ------------------ | :------: | --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| projectName        |   yes    |                                                                 | Datadog's project name, will be added to each track call as `projectName` tag                                                                                                                                                                                 |\n| datadogConfig      |    no    | `{\"prefix\":\"ux.webpack.\",\"flushIntervalSeconds\":2}`             | Config object for [Datadog Metrics](https://github.com/dbader/node-datadog-metrics#readme) - Typescript Type [here](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/6970a8fffa0743f0f5fc918e187fa37f0d2675df/types/datadog-metrics/index.d.ts#L6-L36) |\n| 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                                                                                                                                                               |\n| tags               |    no    | `{}`                                                            | Extra tags to be added to [Datadog Metrics](https://github.com/dbader/node-datadog-metrics#readme) - An object shape of `{ tagName: \"tagValue\", environment: \"production\" }`                                                                                  |\n| dryRun             |    no    | `false`                                                         | If `true`, will not send tracking events to datadog.                                                                                                                                                                                                          |\n\n```TYPESCRIPT\n{\n  projectName: string;\n  datadogConfig?: BufferedMetricsLoggerOptions;\n  enabledKeysToTrack?: TrackingMetricKeys[];\n  tags?: { [key: string]: string };\n  dryRun?: boolean;\n}\n```\n\n## Development\n\n- `git clone`\n- `yarn`\n- `yarn dev` to run a super-simple webpack-dev-server with the plugin `debug` enabled\n- or `yarn debug` to run webpack with node `--inspect-brk` flag, and be able to debug using the [NIM - Node Inspector Manager](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj?hl=en) chrome extension\n- Once you have this running, go ahead and change (and save) a file inside [./app/](./app)\n\n## Deploy\n\nTo deploy, create a PR and bump the the version in `package.json`. Once the PR\nis merged it will deploy a new version of the package.\n\n## Current things being tracked\n\n| Metric               | Tracking key        | Description                                                                                                                                                                   | How are we tracking                                                                        |\n| -------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |\n| compilation          | `compile`           | Tracks only the time an application takes to compile the code. Regarding wepback hooks tracks from `\"beforeCompile\"` to `\"compilation\"`                                       | histogram                                                                                  |\n| compilationSession   | `compile_session`   | Tracks the time from when a webpack process starts, until it finishes. Regarding wepback hooks tracks from `\"environment\"` to `\"done\"`                                        | histogram \u0026 increment                                                                      |\n| 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                                                                                  |\n| recompilationSession | `recompile_session` | Tracks the time when a webpack recompilation starts, until it finishes. Regarding wepback hooks, it tracks from `\"watchRun\"` to `\"done\"`                                      | histogram \u0026 increment                                                                      |\n| memoryTracking       | no                  | `{ enabled: true, lapseTimeInMilliseconds: 2000 }`                                                                                                                            | By default this will track memory usage of this process on every `lapseTimeInMilliseconds` |\n\n```TYPESCRIPT\n{\n  projectName: string;\n  datadogConfig?: BufferedMetricsLoggerOptions;\n  enabledKeysToTrack?: TrackingMetricKeys[];\n  tags?: { [key: string]: string };\n  dryRun?: boolean;\n  memoryTracking: { enabled: true, lapseTimeInMilliseconds: 2000 }\n}\n```\n\n## Development\n\n- `git clone`\n- `yarn`\n- `yarn dev` to run a super-simple webpack-dev-server with the plugin `debug` enabled\n- or `yarn debug` to run webpack with node `--inspect-brk` flag, and be able to debug using the [NIM - Node Inspector Manager](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj?hl=en) chrome extension\n- Once you have this running, go ahead and change (and save) a file inside [./app/](./app)\n\n## Deploy\n\nTo deploy, create a PR and bump the the version in `package.json`. Once the PR\nis merged it will deploy a new version of the package.\n\n## Current things being tracked\n\n| Metric               | Tracking key        | Description                                                                  | How are we tracking   |\n| -------------------- | ------------------- | ---------------------------------------------------------------------------- | --------------------- |\n| compilationSession   | `compile_session`   | Tracks the time from when a \"compilation\" process starts, until it finishes. | histogram \u0026 increment |\n| recompilationSession | `recompile_session` | Tracks the time when module recompilation starts, until it finishes.         | histogram \u0026 increment |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffforres%2Fwebpack-plugin-dx-metrics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffforres%2Fwebpack-plugin-dx-metrics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffforres%2Fwebpack-plugin-dx-metrics/lists"}