feat: overlay displays unhandled promise rejection (#4849)

Author: malcolm-kee

Diff for: client-src/overlay.js

@@ -5,6 +5,7 @@ import ansiHTML from "ansi-html-community";
 import { encode } from "html-entities";
 import {
   listenToRuntimeError,
+  listenToUnhandledRejection,
   parseErrorToStacks,
 } from "./overlay/runtime-error.js";
 import createOverlayMachine from "./overlay/state-machine.js";
@@ -282,16 +283,13 @@ const createOverlay = (options) => {
   });
 
   if (options.catchRuntimeError) {
-    listenToRuntimeError((errorEvent) => {
-      // error property may be empty in older browser like IE
-      const { error, message } = errorEvent;
-
-      if (!error && !message) {
-        return;
-      }
-
+    /**
+     * @param {Error | undefined} error
+     * @param {string} fallbackMessage
+     */
+    const handleError = (error, fallbackMessage) => {
       const errorObject =
-        error instanceof Error ? error : new Error(error || message);
+        error instanceof Error ? error : new Error(error || fallbackMessage);
 
       const shouldDisplay =
         typeof options.catchRuntimeError === "function"
@@ -309,6 +307,23 @@ const createOverlay = (options) => {
           ],
         });
       }
+    };
+
+    listenToRuntimeError((errorEvent) => {
+      // error property may be empty in older browser like IE
+      const { error, message } = errorEvent;
+
+      if (!error && !message) {
+        return;
+      }
+
+      handleError(error, message);
+    });
+
+    listenToUnhandledRejection((promiseRejectionEvent) => {
+      const { reason } = promiseRejectionEvent;
+
+      handleError(reason, "Unknown promise rejection reason");
     });
   }
 

Diff for: client-src/overlay/runtime-error.js

@@ -30,4 +30,21 @@ function listenToRuntimeError(callback) {
   };
 }
 
-export { listenToRuntimeError, parseErrorToStacks };
+/**
+ * @callback UnhandledRejectionCallback
+ * @param {PromiseRejectionEvent} rejectionEvent
+ * @returns {void}
+ */
+
+/**
+ * @param {UnhandledRejectionCallback} callback
+ */
+function listenToUnhandledRejection(callback) {
+  window.addEventListener("unhandledrejection", callback);
+
+  return function cleanup() {
+    window.removeEventListener("unhandledrejection", callback);
+  };
+}
+
+export { listenToRuntimeError, listenToUnhandledRejection, parseErrorToStacks };

Diff for: examples/client/overlay/README.md

@@ -31,3 +31,54 @@ npx webpack serve --open --no-client-overlay
 2. You should see an overlay in browser for compilation errors.
 3. Update `entry` in webpack.config.js to `app.js` and save.
 4. You should see the text on the page itself change to read `Success!`.
+
+## Additional Configurations
+
+### Filter errors by function
+
+**webpack.config.js**
+
+```js
+module.exports = {
+  devServer: {
+    client: {
+      overlay: {
+        runtimeErrors: (msg) => {
+          if (msg) {
+            if (msg instanceof DOMException && msg.name === "AbortError") {
+              return false;
+            }
+
+            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;
+        },
+      },
+    },
+  },
+};
+```
+
+Run the command:
+
+```shell
+npx webpack serve --open
+```
+
+What should happens:
+
+1. When you click the "Click to throw error" button, the overlay should appears.
+1. When you click the "Click to throw ignored error" button, the overlay should not appear but you should see an error is logged in console (default browser behavior).
+1. When you click the "Click to throw unhandled promise rejection" button, the overlay should appears.
+1. When you click the "Click to throw ignored promise rejection" button, the overlay should not appear but you should see an error is logged in console (default browser behavior).

Diff for: examples/client/overlay/app.js

@@ -1,18 +1,50 @@
 "use strict";
 
 // eslint-disable-next-line import/order
-const createErrorBtn = require("./error-button");
+const createButton = require("./create-button");
+
+/**
+ * @param {string} errorMessage
+ */
+function unsafeOperation(errorMessage) {
+  throw new Error(errorMessage);
+}
 
 const target = document.querySelector("#target");
 
 target.insertAdjacentElement(
   "afterend",
-  createErrorBtn("Click to throw error", "Error message thrown from JS")
+  createButton("Click to throw ignored promise rejection", () => {
+    const abortController = new AbortController();
+
+    fetch("https://google.com", {
+      signal: abortController.signal,
+      mode: "no-cors",
+    });
+
+    setTimeout(() => abortController.abort(), 100);
+  })
+);
+
+target.insertAdjacentElement(
+  "afterend",
+  createButton("Click to throw unhandled promise rejection", () => {
+    setTimeout(() => Promise.reject(new Error("Async error")), 100);
+  })
+);
+
+target.insertAdjacentElement(
+  "afterend",
+  createButton("Click to throw ignored error", () => {
+    unsafeOperation("something something");
+  })
 );
 
 target.insertAdjacentElement(
   "afterend",
-  createErrorBtn("Click to throw ignored error", "something something")
+  createButton("Click to throw error", () => {
+    unsafeOperation("Error message thrown from JS");
+  })
 );
 
 // eslint-disable-next-line import/no-unresolved, import/extensions

Diff for: examples/client/overlay/create-button.js

@@ -0,0 +1,16 @@
+"use strict";
+
+/**
+ *
+ * @param {string} label
+ * @param {() => void} onClick
+ * @returns HTMLButtonElement
+ */
+module.exports = function createButton(label, onClick) {
+  const button = document.createElement("button");
+
+  button.addEventListener("click", onClick);
+  button.innerHTML = label;
+
+  return button;
+};

Diff for: examples/client/overlay/error-button.js

@@ -14,6 +14,10 @@ module.exports = setup({
         warnings: false,
         runtimeErrors: (msg) => {
           if (msg) {
+            if (msg instanceof DOMException && msg.name === "AbortError") {
+              return false;
+            }
+
             let msgString;
 
             if (msg instanceof Error) {

Diff for: examples/client/overlay/webpack.config.js

@@ -2136,6 +2136,90 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
 "
 `;
 
+exports[`overlay should show error for uncaught promise rejection: overlay html 1`] = `
+"<body>
+  <div
+    id=\\"webpack-dev-server-client-overlay-div\\"
+    style=\\"
+      position: fixed;
+      box-sizing: border-box;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      font-size: large;
+      padding: 2rem 2rem 4rem;
+      line-height: 1.2;
+      white-space: pre-wrap;
+      overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
+    \\"
+  >
+    <div
+      style=\\"
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Uncaught runtime errors:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
+        cursor: pointer;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div>
+      <div
+        style=\\"
+          background-color: rgba(206, 17, 38, 0.1);
+          color: rgb(252, 207, 207);
+          padding: 1rem 1rem 1.5rem;
+        \\"
+      >
+        <div
+          style=\\"
+            color: rgb(232, 59, 70);
+            font-size: 1.2em;
+            margin-bottom: 1rem;
+            font-family: sans-serif;
+          \\"
+        >
+          ERROR
+        </div>
+        <div
+          style=\\"
+            line-height: 1.5;
+            font-size: 1rem;
+            font-family: Menlo, Consolas, monospace;
+          \\"
+        >
+          Async error at &lt;anonymous&gt;:3:26
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+"
+`;
+
 exports[`overlay should show error for uncaught runtime error: overlay html 1`] = `
 "<body>
   <div