npm - @financial-times/dotcom-build-sass - Versions diffs - 9.2.1 → 9.3.1 - Mend

@financial-times/dotcom-build-sass 9.2.1 → 9.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md +17 -0
package/dist/node/index.js +1 -1
package/dist/node/monitored-sass-loader.d.ts +2 -0
package/dist/node/monitored-sass-loader.js +208 -0
package/dist/tsconfig.tsbuildinfo +14 -2
package/package.json +1 -1
package/src/index.ts +1 -1
package/src/monitored-sass-loader.ts +229 -0

package/README.md CHANGED Viewed

@@ -71,3 +71,20 @@ The CSS loader has `@import` and `url()` resolution disabled as these should be
 | `webpackImporter` | Boolean  | `false` | See https://github.com/webpack-contrib/sass-loader#webpackimporter |
 | `prependData`     | String   | `''`    | See https://webpack.js.org/loaders/sass-loader/#prependdata        |
 | `includePaths`    | String[] | `[]`    | See https://sass-lang.com/documentation/js-api#includepaths        |
+## Sass build monitoring
+Sass build times are stored locally and remotely, where your project sets relevant API keys. Alternatively, you may turn both these features off using environment variable.
+- Local reporting: A running total of your local Sass build times are stored in a temporary file on your machine. This statistic is reported periodically for your interest, along with a prompt to support FT efforts to move away from Sass.
+- Alongside this, your local Sass build times are sent to the [biz-ops metrics api](https://github.com/Financial-Times/biz-ops-metrics-api), provided the below environment variables are set.
+| Environment Variable                       | Required   | Default    | Description                                                                                                                                                                                           |
+|--------------------------------------------|------------|------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `FT_SASS_STATS_NOTICE`                     | no         | `throttle` | How often to log Sass statistics out to terminal. One of `throttle`, `never`, `always`                                                                                                                |
+| `FT_SASS_STATS_NOTICE_THROTTLE_SECONDS`    | no         | `1800`     | How many seconds to wait between logging Sass statistics out to terminal.                                                                                                                             |
+| `FT_SASS_STATS_NOTICE_THROTTLE_PERCENTAGE` | no         | `30`       | A percentage increase in total Sass build time in which to log out statistics to the terminal regardless of time.                                                                                     |
+| `FT_SASS_STATS_MONITOR`                    | no         | `off`      | Set to `on` to send Sass build time statistics to [biz-ops metrics api](https://github.com/Financial-Times/biz-ops-metrics-api) Requires `FT_SASS_BIZ_OPS_API_KEY` and `FT_SASS_BIZ_OPS_SYSTEM_CODE`. |
+| `FT_SASS_BIZ_OPS_API_KEY`                  | no         | ``         | A [Biz-Ops Metrics API Key](https://github.com/Financial-Times/biz-ops-metrics-api/blob/main/docs/API_DEFINITION.md#authentication) for your system.                                                  |
+| `FT_SASS_BIZ_OPS_SYSTEM_CODE`              | no         | ``         | The [biz-ops](https://biz-ops.in.ft.com/) system code of your project. Use `page-kit` if your system does not have a biz-ops code yet.                                                                |

package/dist/node/index.js CHANGED Viewed

@@ -101,7 +101,7 @@ class PageKitSassPlugin {
                 // Enable use of Sass for CSS preprocessing
                 // https://github.com/webpack-contrib/sass-loader
                 {
-                    loader: require.resolve('sass-loader'),
+                    loader: require.resolve('./monitored-sass-loader'),
                     options: sassLoaderOptions
                 }
             ]

package/dist/node/monitored-sass-loader.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ declare const monitoredSassLoaderProxy: any;
2	+ export default monitoredSassLoaderProxy;

package/dist/node/monitored-sass-loader.js ADDED Viewed

@@ -0,0 +1,208 @@
+"use strict";
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, privateMap) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return privateMap.get(receiver);
+};
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, privateMap, value) {
+    if (!privateMap.has(receiver)) {
+        throw new TypeError("attempted to set private field on non-instance");
+    }
+    privateMap.set(receiver, value);
+    return value;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+var _monitorRemotely, _noticeStrategies, _noticeStrategy, _noticeThrottleSeconds, _noticeThrottlePercentage, _stats, _directory, _file, _startTime, _endTime, _read, _write, _report;
+Object.defineProperty(exports, "__esModule", { value: true });
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const os_1 = __importDefault(require("os"));
+const sass_loader_1 = __importDefault(require("sass-loader"));
+const https_1 = __importDefault(require("https"));
+const logError = (message) => {
+    // eslint-disable-next-line no-console
+    console.log(`\n⛔️😭dotcom-build-sass: ${message}. Please report to #origami-support in Slack, so we can help move us away from Sass.\n`);
+};
+class SassStats {
+    constructor() {
+        _monitorRemotely.set(this, process.env.FT_SASS_STATS_MONITOR === 'on');
+        _noticeStrategies.set(this, ['throttle', 'never', 'always']);
+        _noticeStrategy.set(this, __classPrivateFieldGet(this, _noticeStrategies).includes(process.env.FT_SASS_STATS_NOTICE)
+            ? process.env.FT_SASS_STATS_NOTICE
+            : 'throttle');
+        _noticeThrottleSeconds.set(this, typeof process.env.FT_SASS_STATS_NOTICE_THROTTLE_SECONDS === 'number'
+            ? process.env.FT_SASS_STATS_NOTICE_THROTTLE_SECONDS
+            : 60 * 60 * 0.5); // show throttled notice given 30 mins since last notice
+        _noticeThrottlePercentage.set(this, typeof process.env.FT_SASS_STATS_NOTICE_THROTTLE_PERCENTAGE === 'number'
+            ? process.env.FT_SASS_STATS_NOTICE_THROTTLE_PERCENTAGE
+            : 30); // show throttled notice given a 30% increase
+        _stats.set(this, { totalTime: 0, noticeDate: null, totalTimeAtLastNotice: 0 });
+        _directory.set(this, path_1.default.join(os_1.default.tmpdir(), 'dotcom-build-sass'));
+        _file.set(this, path_1.default.join(__classPrivateFieldGet(this, _directory), 'sass-stats.json'));
+        _startTime.set(this, void 0);
+        _endTime.set(this, void 0);
+        this.start = () => {
+            __classPrivateFieldGet(this, _read).call(this);
+            __classPrivateFieldSet(this, _startTime, performance.now());
+        };
+        this.end = () => {
+            __classPrivateFieldSet(this, _endTime, performance.now());
+            const updatedTotal = (__classPrivateFieldGet(this, _stats).totalTime += __classPrivateFieldGet(this, _endTime) - __classPrivateFieldGet(this, _startTime));
+            __classPrivateFieldGet(this, _write).call(this, { totalTime: updatedTotal });
+        };
+        _read.set(this, () => {
+            try {
+                // Restore stats from a temporary file if it exists.
+                // Reading from disk ensures that we can track stats across builds.
+                const statsFile = fs_1.default.readFileSync(__classPrivateFieldGet(this, _file), 'utf-8');
+                __classPrivateFieldSet(this, _stats, JSON.parse(statsFile));
+            }
+            catch (_a) { }
+            return __classPrivateFieldGet(this, _stats);
+        });
+        _write.set(this, (stats) => {
+            __classPrivateFieldSet(this, _stats, Object.assign(__classPrivateFieldGet(this, _stats), stats));
+            fs_1.default.writeFileSync(__classPrivateFieldGet(this, _file), JSON.stringify(__classPrivateFieldGet(this, _stats)));
+        });
+        this.sendMetric = () => {
+            if (!__classPrivateFieldGet(this, _monitorRemotely)) {
+                return;
+            }
+            if (!process.env.FT_SASS_BIZ_OPS_API_KEY) {
+                logError('We couldn\'t share your Sass build time, we\'re missing the environment variable "FT_SASS_BIZ_OPS_API_KEY". Please contact #origami-support with any questions.');
+                return;
+            }
+            if (!process.env.FT_SASS_BIZ_OPS_SYSTEM_CODE) {
+                logError('We couldn\'t share your Sass build time, we\'re missing the environment variable "FT_SASS_BIZ_OPS_SYSTEM_CODE". Please contact #origami-support with any questions.');
+                return;
+            }
+            const date = new Date();
+            const postData = JSON.stringify({
+                type: 'System',
+                metric: 'sass-build-time',
+                value: (__classPrivateFieldGet(this, _endTime) - __classPrivateFieldGet(this, _startTime)) / 1000,
+                date: date.toISOString(),
+                code: process.env.FT_SASS_BIZ_OPS_SYSTEM_CODE,
+                metadata: {
+                    'node-env': process.env.NODE_ENV
+                }
+            });
+            const options = {
+                hostname: 'api.ft.com',
+                port: 443,
+                path: '/biz-ops-metrics/metric/add',
+                method: 'POST',
+                headers: {
+                    'x-api-key': process.env.FT_SASS_BIZ_OPS_API_KEY,
+                    'client-id': 'page-kit',
+                    'Content-Type': 'application/json',
+                    'Content-Length': postData.length
+                }
+            };
+            const request = https_1.default
+                .request(options, (response) => {
+                if (response.statusCode !== 200) {
+                    logError(`We couldn\'t send your Sass build time metrics to biz-ops. Status code: ${response.statusCode}.`);
+                }
+            })
+                .on('error', (error) => {
+                logError(`We couldn\'t send your Sass build time metrics to biz-ops. Error: ${error}.`);
+            });
+            request.write(postData);
+            request.end();
+        };
+        this.reportAccordingToNoticeStrategy = () => {
+            let shouldReport;
+            switch (__classPrivateFieldGet(this, _noticeStrategy)) {
+                case 'never':
+                    shouldReport = false;
+                    break;
+                case 'always':
+                    shouldReport = true;
+                    break;
+                case 'throttle':
+                    // Throttle notices to show a limited number per hour, or if the total sass build time
+                    // has increased by a significant percentage. This favours more frequent reports to begin with.
+                    const noticeTimeThrottle = Date.now() >= __classPrivateFieldGet(this, _stats).noticeDate + __classPrivateFieldGet(this, _noticeThrottleSeconds) * 1000;
+                    const percentageTotalTimeThrottle = __classPrivateFieldGet(this, _stats).totalTime > 0 &&
+                        (__classPrivateFieldGet(this, _stats).totalTime / __classPrivateFieldGet(this, _stats).totalTimeAtLastNotice - 1) * 100 >= __classPrivateFieldGet(this, _noticeThrottlePercentage); // % increase
+                    shouldReport = !__classPrivateFieldGet(this, _stats).noticeDate || noticeTimeThrottle || percentageTotalTimeThrottle;
+                    break;
+                default:
+                    break;
+            }
+            if (shouldReport) {
+                __classPrivateFieldGet(this, _report).call(this);
+            }
+        };
+        _report.set(this, () => {
+            const seconds = __classPrivateFieldGet(this, _stats).totalTime / 1000;
+            const minutes = seconds / 60;
+            const hours = seconds / 3600;
+            const time = hours > 1
+                ? `${hours.toFixed(1)} hours`
+                : minutes > 1
+                    ? `${minutes.toFixed(0)} minutes`
+                    : `${seconds.toFixed(0)} seconds`;
+            const emoji = hours > 2 ? ['🔥', '😭', '😱'] : hours >= 1 ? ['🔥', '😱'] : minutes > 10 ? ['⏱️', '😬'] : ['⏱️'];
+            let cta = `Share your pain in Slack #sass-to-css, and help fix that! 🎉\n` +
+                `https://origami.ft.com/blog/2024/01/24/sass-build-times/\n\n`;
+            if (!__classPrivateFieldGet(this, _monitorRemotely)) {
+                cta =
+                    `Help us improve build times by setting the "FT_SASS_STATS_MONITOR" environment variable.\n` +
+                        `https://github.com/Financial-Times/biz-ops-metrics-api/blob/main/docs/API_DEFINITION.md#sass-build-monitoring \n\n`;
+            }
+            // eslint-disable-next-line no-console
+            console.log(`\n\ndotcom-build-sass:\nYou have spent at least ${emoji.join(' ')} ${time} ${emoji
+                .reverse()
+                .join(' ')} waiting on FT Sass to compile.\n${cta}`);
+            __classPrivateFieldGet(this, _write).call(this, { noticeDate: Date.now(), totalTimeAtLastNotice: __classPrivateFieldGet(this, _stats).totalTime });
+        });
+        fs_1.default.mkdirSync(__classPrivateFieldGet(this, _directory), { recursive: true });
+    }
+}
+_monitorRemotely = new WeakMap(), _noticeStrategies = new WeakMap(), _noticeStrategy = new WeakMap(), _noticeThrottleSeconds = new WeakMap(), _noticeThrottlePercentage = new WeakMap(), _stats = new WeakMap(), _directory = new WeakMap(), _file = new WeakMap(), _startTime = new WeakMap(), _endTime = new WeakMap(), _read = new WeakMap(), _write = new WeakMap(), _report = new WeakMap();
+// We're proxying a few functions for monitoring purposes,
+// we want to catch any monitoring errors silently.
+const forgivingProxy = (target, task) => {
+    return new Proxy(target, {
+        apply(...args) {
+            try {
+                return task(...args);
+            }
+            catch (error) {
+                Reflect.apply(...args);
+                logError(`Failed to monitor Sass build. Error: ${error}`);
+            }
+        }
+    });
+};
+const stats = new SassStats();
+const monitoredSassLoaderProxy = forgivingProxy(sass_loader_1.default, (target, sassLoaderThis, argumentsList) => {
+    // Start the timer, sass-loader has been called with Sass content.
+    // https://github.com/webpack-contrib/sass-loader/blob/03773152760434a2dd845008c504a09c0eb3fd91/src/index.js#L19
+    stats.start();
+    // Assign our proxy to sass-loaders async function.
+    // https://github.com/webpack-contrib/sass-loader/blob/03773152760434a2dd845008c504a09c0eb3fd91/src/index.js#L29
+    const sassLoaderAsyncProxy = forgivingProxy(sassLoaderThis.async, (target, thisArg, argumentsList) => {
+        // Run sass-loader's async function as normal.
+        // Proxy the callback it returns.
+        // https://github.com/webpack-contrib/sass-loader/blob/03773152760434a2dd845008c504a09c0eb3fd91/src/index.js#L113
+        const sassLoaderCallback = Reflect.apply(target, thisArg, argumentsList);
+        return forgivingProxy(sassLoaderCallback, (target, thisArg, argumentsList) => {
+            // sass-loader's callback has been... called.
+            // Either we have sass, or the build failed.
+            stats.end();
+            stats.reportAccordingToNoticeStrategy();
+            stats.sendMetric();
+            return Reflect.apply(target, thisArg, argumentsList);
+        });
+    });
+    sassLoaderThis.async = sassLoaderAsyncProxy;
+    // Run sass-loader as normal.
+    return Reflect.apply(target, sassLoaderThis, argumentsList);
+});
+exports.default = monitoredSassLoaderProxy;

package/dist/tsconfig.tsbuildinfo CHANGED Viewed

@@ -452,10 +452,15 @@
         "affectsGlobalScope": false
       },
       "../src/index.ts": {
-        "version": "eaea1831fa92562dc7cee11bbbe2fd591174f362cc7b0edd53a507ac9a4b0995",
+        "version": "7fb00d27970b40b6bb55e0082ba7f14114cc4e5d23fc9912cea1da42e24ba5bc",
         "signature": "38296bee587ffb2a33b5f3e8c31f22f263d27c65a68666824e3b2f717e212a84",
         "affectsGlobalScope": false
       },
+      "../src/monitored-sass-loader.ts": {
+        "version": "b4a57f13235d705d5db658149a2725d718016ceb68726c565632f5f9b1e9d084",
+        "signature": "d6c7e7fe7e8f3b80e77d715b5d0d632a6bdb41bfa6c96d464997d2f698366e9b",
+        "affectsGlobalScope": false
+      },
       "../../../node_modules/@types/aria-query/index.d.ts": {
         "version": "ae77d81a5541a8abb938a0efedf9ac4bea36fb3a24cc28cfa11c598863aba571",
         "signature": "ae77d81a5541a8abb938a0efedf9ac4bea36fb3a24cc28cfa11c598863aba571",
@@ -1828,6 +1833,12 @@
       ],
       "../src/index.ts": [
         "../../../node_modules/@types/webpack/index.d.ts"
+      ],
+      "../src/monitored-sass-loader.ts": [
+        "../../../node_modules/@types/node/fs.d.ts",
+        "../../../node_modules/@types/node/https.d.ts",
+        "../../../node_modules/@types/node/os.d.ts",
+        "../../../node_modules/@types/node/path.d.ts"
       ]
     },
     "exportedModulesMap": {
@@ -2792,7 +2803,8 @@
       "../../../node_modules/typescript/lib/lib.es2020.bigint.d.ts",
       "../../../node_modules/typescript/lib/lib.es5.d.ts",
       "../../../node_modules/typescript/lib/lib.esnext.intl.d.ts",
-      "../src/index.ts"
+      "../src/index.ts",
+      "../src/monitored-sass-loader.ts"
     ]
   },
   "version": "4.1.6"

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/dotcom-build-sass",
-  "version": "9.2.1",
+  "version": "9.3.1",
   "description": "",
   "main": "dist/node/index.js",
   "types": "dist/node/index.d.ts",

package/src/index.ts CHANGED Viewed

@@ -115,7 +115,7 @@ export class PageKitSassPlugin {
         // Enable use of Sass for CSS preprocessing
         // https://github.com/webpack-contrib/sass-loader
         {
-          loader: require.resolve('sass-loader'),
+          loader: require.resolve('./monitored-sass-loader'),
           options: sassLoaderOptions
         }
       ]

package/src/monitored-sass-loader.ts ADDED Viewed

@@ -0,0 +1,229 @@
+import fs from 'fs'
+import path from 'path'
+import os from 'os'
+import sassLoader from 'sass-loader'
+import https from 'https'
+const logError = (message) => {
+  // eslint-disable-next-line no-console
+  console.log(
+    `\n⛔️😭dotcom-build-sass: ${message}. Please report to #origami-support in Slack, so we can help move us away from Sass.\n`
+  )
+}
+class SassStats {
+  #monitorRemotely = process.env.FT_SASS_STATS_MONITOR === 'on'
+  #noticeStrategies = ['throttle', 'never', 'always']
+  #noticeStrategy = this.#noticeStrategies.includes(process.env.FT_SASS_STATS_NOTICE)
+    ? process.env.FT_SASS_STATS_NOTICE
+    : 'throttle'
+  #noticeThrottleSeconds =
+    typeof process.env.FT_SASS_STATS_NOTICE_THROTTLE_SECONDS === 'number'
+      ? process.env.FT_SASS_STATS_NOTICE_THROTTLE_SECONDS
+      : 60 * 60 * 0.5 // show throttled notice given 30 mins since last notice
+  #noticeThrottlePercentage =
+    typeof process.env.FT_SASS_STATS_NOTICE_THROTTLE_PERCENTAGE === 'number'
+      ? process.env.FT_SASS_STATS_NOTICE_THROTTLE_PERCENTAGE
+      : 30 // show throttled notice given a 30% increase
+  #stats = { totalTime: 0, noticeDate: null, totalTimeAtLastNotice: 0 }
+  #directory = path.join(os.tmpdir(), 'dotcom-build-sass')
+  #file = path.join(this.#directory, 'sass-stats.json')
+  #startTime
+  #endTime
+  constructor() {
+    fs.mkdirSync(this.#directory, { recursive: true })
+  }
+  start = () => {
+    this.#read()
+    this.#startTime = performance.now()
+  }
+  end = () => {
+    this.#endTime = performance.now()
+    const updatedTotal = (this.#stats.totalTime += this.#endTime - this.#startTime)
+    this.#write({ totalTime: updatedTotal })
+  }
+  #read = () => {
+    try {
+      // Restore stats from a temporary file if it exists.
+      // Reading from disk ensures that we can track stats across builds.
+      const statsFile = fs.readFileSync(this.#file, 'utf-8')
+      this.#stats = JSON.parse(statsFile)
+    } catch {}
+    return this.#stats
+  }
+  #write = (stats) => {
+    this.#stats = Object.assign(this.#stats, stats)
+    fs.writeFileSync(this.#file, JSON.stringify(this.#stats))
+  }
+  sendMetric = () => {
+    if (!this.#monitorRemotely) {
+      return
+    }
+    if (!process.env.FT_SASS_BIZ_OPS_API_KEY) {
+      logError(
+        'We couldn\'t share your Sass build time, we\'re missing the environment variable "FT_SASS_BIZ_OPS_API_KEY". Please contact #origami-support with any questions.'
+      )
+      return
+    }
+    if (!process.env.FT_SASS_BIZ_OPS_SYSTEM_CODE) {
+      logError(
+        'We couldn\'t share your Sass build time, we\'re missing the environment variable "FT_SASS_BIZ_OPS_SYSTEM_CODE". Please contact #origami-support with any questions.'
+      )
+      return
+    }
+    const date = new Date()
+    const postData = JSON.stringify({
+      type: 'System',
+      metric: 'sass-build-time',
+      value: (this.#endTime - this.#startTime) / 1000,
+      date: date.toISOString(),
+      code: process.env.FT_SASS_BIZ_OPS_SYSTEM_CODE,
+      metadata: {
+        'node-env': process.env.NODE_ENV
+      }
+    })
+    const options = {
+      hostname: 'api.ft.com',
+      port: 443,
+      path: '/biz-ops-metrics/metric/add',
+      method: 'POST',
+      headers: {
+        'x-api-key': process.env.FT_SASS_BIZ_OPS_API_KEY,
+        'client-id': 'page-kit',
+        'Content-Type': 'application/json',
+        'Content-Length': postData.length
+      }
+    }
+    const request = https
+      .request(options, (response) => {
+        if (response.statusCode !== 200) {
+          logError(
+            `We couldn\'t send your Sass build time metrics to biz-ops. Status code: ${response.statusCode}.`
+          )
+        }
+      })
+      .on('error', (error) => {
+        logError(`We couldn\'t send your Sass build time metrics to biz-ops. Error: ${error}.`)
+      })
+    request.write(postData)
+    request.end()
+  }
+  reportAccordingToNoticeStrategy = () => {
+    let shouldReport
+    switch (this.#noticeStrategy) {
+      case 'never':
+        shouldReport = false
+        break
+      case 'always':
+        shouldReport = true
+        break
+      case 'throttle':
+        // Throttle notices to show a limited number per hour, or if the total sass build time
+        // has increased by a significant percentage. This favours more frequent reports to begin with.
+        const noticeTimeThrottle = Date.now() >= this.#stats.noticeDate + this.#noticeThrottleSeconds * 1000
+        const percentageTotalTimeThrottle =
+          this.#stats.totalTime > 0 &&
+          (this.#stats.totalTime / this.#stats.totalTimeAtLastNotice - 1) * 100 >=
+            this.#noticeThrottlePercentage // % increase
+        shouldReport = !this.#stats.noticeDate || noticeTimeThrottle || percentageTotalTimeThrottle
+        break
+      default:
+        break
+    }
+    if (shouldReport) {
+      this.#report()
+    }
+  }
+  #report = () => {
+    const seconds = this.#stats.totalTime / 1000
+    const minutes = seconds / 60
+    const hours = seconds / 3600
+    const time =
+      hours > 1
+        ? `${hours.toFixed(1)} hours`
+        : minutes > 1
+        ? `${minutes.toFixed(0)} minutes`
+        : `${seconds.toFixed(0)} seconds`
+    const emoji =
+      hours > 2 ? ['🔥', '😭', '😱'] : hours >= 1 ? ['🔥', '😱'] : minutes > 10 ? ['⏱️', '😬'] : ['⏱️']
+    let cta =
+      `Share your pain in Slack #sass-to-css, and help fix that! 🎉\n` +
+      `https://origami.ft.com/blog/2024/01/24/sass-build-times/\n\n`
+    if (!this.#monitorRemotely) {
+      cta =
+        `Help us improve build times by setting the "FT_SASS_STATS_MONITOR" environment variable.\n` +
+        `https://github.com/Financial-Times/biz-ops-metrics-api/blob/main/docs/API_DEFINITION.md#sass-build-monitoring \n\n`
+    }
+    // eslint-disable-next-line no-console
+    console.log(
+      `\n\ndotcom-build-sass:\nYou have spent at least ${emoji.join(' ')} ${time} ${emoji
+        .reverse()
+        .join(' ')} waiting on FT Sass to compile.\n${cta}`
+    )
+    this.#write({ noticeDate: Date.now(), totalTimeAtLastNotice: this.#stats.totalTime })
+  }
+}
+// We're proxying a few functions for monitoring purposes,
+// we want to catch any monitoring errors silently.
+const forgivingProxy = (target, task) => {
+  return new Proxy(target, {
+    apply(...args) {
+      try {
+        return task(...args)
+      } catch (error) {
+        Reflect.apply(...args)
+        logError(`Failed to monitor Sass build. Error: ${error}`)
+      }
+    }
+  })
+}
+const stats = new SassStats()
+const monitoredSassLoaderProxy = forgivingProxy(sassLoader, (target, sassLoaderThis, argumentsList) => {
+  // Start the timer, sass-loader has been called with Sass content.
+  // https://github.com/webpack-contrib/sass-loader/blob/03773152760434a2dd845008c504a09c0eb3fd91/src/index.js#L19
+  stats.start()
+  // Assign our proxy to sass-loaders async function.
+  // https://github.com/webpack-contrib/sass-loader/blob/03773152760434a2dd845008c504a09c0eb3fd91/src/index.js#L29
+  const sassLoaderAsyncProxy = forgivingProxy(sassLoaderThis.async, (target, thisArg, argumentsList) => {
+    // Run sass-loader's async function as normal.
+    // Proxy the callback it returns.
+    // https://github.com/webpack-contrib/sass-loader/blob/03773152760434a2dd845008c504a09c0eb3fd91/src/index.js#L113
+    const sassLoaderCallback = Reflect.apply(target, thisArg, argumentsList)
+    return forgivingProxy(sassLoaderCallback, (target, thisArg, argumentsList) => {
+      // sass-loader's callback has been... called.
+      // Either we have sass, or the build failed.
+      stats.end()
+      stats.reportAccordingToNoticeStrategy()
+      stats.sendMetric()
+      return Reflect.apply(target, thisArg, argumentsList)
+    })
+  })
+  sassLoaderThis.async = sassLoaderAsyncProxy
+  // Run sass-loader as normal.
+  return Reflect.apply(target, sassLoaderThis, argumentsList)
+})
+export default monitoredSassLoaderProxy