feat: allow filter overlay errors/warnings with function (#4813)

Author: malcolm-kee

client-src/index.js

@@ -10,12 +10,20 @@ import sendMessage from "./utils/sendMessage.js";
 import reloadApp from "./utils/reloadApp.js";
 import createSocketURL from "./utils/createSocketURL.js";
 
+/**
+ * @typedef {Object} OverlayOptions
+ * @property {boolean | (error: Error) => boolean} [warnings]
+ * @property {boolean | (error: Error) => boolean} [errors]
+ * @property {boolean | (error: Error) => boolean} [runtimeErrors]
+ * @property {string} [trustedTypesPolicyName]
+ */
+
 /**
  * @typedef {Object} Options
  * @property {boolean} hot
  * @property {boolean} liveReload
  * @property {boolean} progress
- * @property {boolean | { warnings?: boolean, errors?: boolean, runtimeErrors?: boolean, trustedTypesPolicyName?: string }} overlay
+ * @property {boolean | OverlayOptions} overlay
  * @property {string} [logging]
  * @property {number} [reconnect]
  */
@@ -27,6 +35,30 @@ import createSocketURL from "./utils/createSocketURL.js";
  * @property {string} [previousHash]
  */
 
+/**
+ * @param {boolean | { warnings?: boolean | string; errors?: boolean | string; runtimeErrors?: boolean | string; }} overlayOptions
+ */
+const decodeOverlayOptions = (overlayOptions) => {
+  if (typeof overlayOptions === "object") {
+    ["warnings", "errors", "runtimeErrors"].forEach((property) => {
+      if (typeof overlayOptions[property] === "string") {
+        const overlayFilterFunctionString = decodeURIComponent(
+          overlayOptions[property]
+        );
+
+        // eslint-disable-next-line no-new-func
+        const overlayFilterFunction = new Function(
+          "message",
+          `var callback = ${overlayFilterFunctionString}
+        return callback(message)`
+        );
+
+        overlayOptions[property] = overlayFilterFunction;
+      }
+    });
+  }
+};
+
 /**
  * @type {Status}
  */
@@ -83,6 +115,8 @@ if (parsedResourceQuery.overlay) {
       runtimeErrors: true,
       ...options.overlay,
     };
+
+    decodeOverlayOptions(options.overlay);
   }
   enabledFeatures.Overlay = true;
 }
@@ -173,6 +207,7 @@ const onSocketMessage = {
     }
 
     options.overlay = value;
+    decodeOverlayOptions(options.overlay);
   },
   /**
    * @param {number} value
@@ -266,17 +301,24 @@ const onSocketMessage = {
       log.warn(printableWarnings[i]);
     }
 
-    const needShowOverlayForWarnings =
+    const overlayWarningsSetting =
       typeof options.overlay === "boolean"
         ? options.overlay
         : options.overlay && options.overlay.warnings;
 
-    if (needShowOverlayForWarnings) {
-      overlay.send({
-        type: "BUILD_ERROR",
-        level: "warning",
-        messages: warnings,
-      });
+    if (overlayWarningsSetting) {
+      const warningsToDisplay =
+        typeof overlayWarningsSetting === "function"
+          ? warnings.filter(overlayWarningsSetting)
+          : warnings;
+
+      if (warningsToDisplay.length) {
+        overlay.send({
+          type: "BUILD_ERROR",
+          level: "warning",
+          messages: warnings,
+        });
+      }
     }
 
     if (params && params.preventReloading) {
@@ -303,17 +345,24 @@ const onSocketMessage = {
       log.error(printableErrors[i]);
     }
 
-    const needShowOverlayForErrors =
+    const overlayErrorsSettings =
       typeof options.overlay === "boolean"
         ? options.overlay
         : options.overlay && options.overlay.errors;
 
-    if (needShowOverlayForErrors) {
-      overlay.send({
-        type: "BUILD_ERROR",
-        level: "error",
-        messages: errors,
-      });
+    if (overlayErrorsSettings) {
+      const errorsToDisplay =
+        typeof overlayErrorsSettings === "function"
+          ? errors.filter(overlayErrorsSettings)
+          : errors;
+
+      if (errorsToDisplay.length) {
+        overlay.send({
+          type: "BUILD_ERROR",
+          level: "error",
+          messages: errors,
+        });
+      }
     }
   },
   /**

client-src/overlay.js

@@ -78,7 +78,7 @@ function formatProblem(type, item) {
 /**
  * @typedef {Object} CreateOverlayOptions
  * @property {string | null} trustedTypesPolicyName
- * @property {boolean} [catchRuntimeError]
+ * @property {boolean | (error: Error) => void} [catchRuntimeError]
  */
 
 /**
@@ -90,6 +90,8 @@ const createOverlay = (options) => {
   let iframeContainerElement;
   /** @type {HTMLDivElement | null | undefined} */
   let containerElement;
+  /** @type {HTMLDivElement | null | undefined} */
+  let headerElement;
   /** @type {Array<(element: HTMLDivElement) => void>} */
   let onLoadQueue = [];
   /** @type {TrustedTypePolicy | undefined} */
@@ -124,6 +126,7 @@ const createOverlay = (options) => {
     iframeContainerElement.id = "webpack-dev-server-client-overlay";
     iframeContainerElement.src = "about:blank";
     applyStyle(iframeContainerElement, iframeStyle);
+
     iframeContainerElement.onload = () => {
       const contentElement =
         /** @type {Document} */
@@ -141,7 +144,7 @@ const createOverlay = (options) => {
       contentElement.id = "webpack-dev-server-client-overlay-div";
       applyStyle(contentElement, containerStyle);
 
-      const headerElement = document.createElement("div");
+      headerElement = document.createElement("div");
 
       headerElement.innerText = "Compiled with problems:";
       applyStyle(headerElement, headerStyle);
@@ -219,9 +222,15 @@ const createOverlay = (options) => {
    * @param {string} type
    * @param {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
    * @param {string | null} trustedTypesPolicyName
+   * @param {'build' | 'runtime'} messageSource
    */
-  function show(type, messages, trustedTypesPolicyName) {
+  function show(type, messages, trustedTypesPolicyName, messageSource) {
     ensureOverlayExists(() => {
+      headerElement.innerText =
+        messageSource === "runtime"
+          ? "Uncaught runtime errors:"
+          : "Compiled with problems:";
+
       messages.forEach((message) => {
         const entryElement = document.createElement("div");
         const msgStyle =
@@ -267,8 +276,8 @@ const createOverlay = (options) => {
   }
 
   const overlayService = createOverlayMachine({
-    showOverlay: ({ level = "error", messages }) =>
-      show(level, messages, options.trustedTypesPolicyName),
+    showOverlay: ({ level = "error", messages, messageSource }) =>
+      show(level, messages, options.trustedTypesPolicyName, messageSource),
     hideOverlay: hide,
   });
 
@@ -284,15 +293,22 @@ const createOverlay = (options) => {
       const errorObject =
         error instanceof Error ? error : new Error(error || message);
 
-      overlayService.send({
-        type: "RUNTIME_ERROR",
-        messages: [
-          {
-            message: errorObject.message,
-            stack: parseErrorToStacks(errorObject),
-          },
-        ],
-      });
+      const shouldDisplay =
+        typeof options.catchRuntimeError === "function"
+          ? options.catchRuntimeError(errorObject)
+          : true;
+
+      if (shouldDisplay) {
+        overlayService.send({
+          type: "RUNTIME_ERROR",
+          messages: [
+            {
+              message: errorObject.message,
+              stack: parseErrorToStacks(errorObject),
+            },
+          ],
+        });
+      }
     });
   }
 

client-src/overlay/state-machine.js

@@ -4,6 +4,7 @@ import createMachine from "./fsm.js";
  * @typedef {Object} ShowOverlayData
  * @property {'warning' | 'error'} level
  * @property {Array<string  | { moduleIdentifier?: string, moduleName?: string, loc?: string, message?: string }>} messages
+ * @property {'build' | 'runtime'} messageSource
  */
 
 /**
@@ -23,6 +24,7 @@ const createOverlayMachine = (options) => {
       context: {
         level: "error",
         messages: [],
+        messageSource: "build",
       },
       states: {
         hidden: {
@@ -73,18 +75,21 @@ const createOverlayMachine = (options) => {
           return {
             messages: [],
             level: "error",
+            messageSource: "build",
           };
         },
         appendMessages: (context, event) => {
           return {
             messages: context.messages.concat(event.messages),
             level: event.level || context.level,
+            messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build",
           };
         },
         setMessages: (context, event) => {
           return {
             messages: event.messages,
             level: event.level || context.level,
+            messageSource: event.type === "RUNTIME_ERROR" ? "runtime" : "build",
           };
         },
         hideOverlay,

examples/client/overlay/app.js

@@ -5,7 +5,15 @@ const createErrorBtn = require("./error-button");
 
 const target = document.querySelector("#target");
 
-target.insertAdjacentElement("afterend", createErrorBtn());
+target.insertAdjacentElement(
+  "afterend",
+  createErrorBtn("Click to throw error", "Error message thrown from JS")
+);
+
+target.insertAdjacentElement(
+  "afterend",
+  createErrorBtn("Click to throw ignored error", "something something")
+);
 
 // eslint-disable-next-line import/no-unresolved, import/extensions
 const invalid = require("./invalid.js");

examples/client/overlay/error-button.js

@@ -1,18 +1,24 @@
 "use strict";
 
-function unsafeOperation() {
-  throw new Error("Error message thrown from JS");
-}
+/**
+ *
+ * @param {string} label
+ * @param {string} errorMessage
+ * @returns HTMLButtonElement
+ */
+module.exports = function createErrorButton(label, errorMessage) {
+  function unsafeOperation() {
+    throw new Error(errorMessage);
+  }
 
-function handleButtonClick() {
-  unsafeOperation();
-}
+  function handleButtonClick() {
+    unsafeOperation();
+  }
 
-module.exports = function createErrorButton() {
   const errorBtn = document.createElement("button");
 
   errorBtn.addEventListener("click", handleButtonClick);
-  errorBtn.innerHTML = "Click to throw error";
+  errorBtn.innerHTML = label;
 
   return errorBtn;
 };

examples/client/overlay/webpack.config.js

@@ -10,7 +10,26 @@ module.exports = setup({
   entry: "./app.js",
   devServer: {
     client: {
-      overlay: true,
+      overlay: {
+        warnings: false,
+        runtimeErrors: (msg) => {
+          if (msg) {
+            let msgString;
+
+            if (msg instanceof Error) {
+              msgString = msg.message;
+            } else if (typeof msg === "string") {
+              msgString = msg;
+            }
+
+            if (msgString) {
+              return !/something/i.test(msgString);
+            }
+          }
+
+          return true;
+        },
+      },
     },
   },
   // uncomment to test for IE