feat: create vite runtime error overlay plugin

hi-ogawa · Oct 28, 2023 · 69232d3 · 69232d3
1 parent 447cab3
commit 69232d3
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 1 deletion.
diff --git a/packages/app/index.html b/packages/app/index.html
@@ -19,6 +19,7 @@
         height: 100%;
       }
     </style>
+    <script src="./src/error-overlay.ts" type="module"></script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/app/src/components/stories.tsx b/packages/app/src/components/stories.tsx
@@ -956,3 +956,31 @@ export function StoryCubicBezier() {
     );
   }
 }
+
+export function StoryRuntimeErrorOverlay() {
+  return (
+    <main className="flex flex-col items-center gap-3 m-2">
+      <section className="flex flex-col gap-3 w-full max-w-lg border p-3">
+        <h2 className="text-xl">Runtime Error Overlay</h2>
+        <div className="flex gap-3">
+          <button
+            className="flex-1 antd-btn antd-btn-default"
+            onClick={() => {
+              throw new Error("error!");
+            }}
+          >
+            error
+          </button>
+          <button
+            className="flex-1 antd-btn antd-btn-default"
+            onClick={async () => {
+              throw new Error("unhandledrejection!");
+            }}
+          >
+            unhandledrejection
+          </button>
+        </div>
+      </section>
+    </main>
+  );
+}
diff --git a/packages/app/src/error-overlay.ts b/packages/app/src/error-overlay.ts
@@ -0,0 +1,19 @@
+if (import.meta.hot) {
+  const hot = import.meta.hot;
+
+  function sendError(data: unknown) {
+    const error = data instanceof Error ? data : new Error("unknown");
+    hot.send("runtime-error", {
+      message: error.message,
+      stack: error.stack,
+    });
+  }
+
+  window.addEventListener("error", (evt) => {
+    sendError(evt.error);
+  });
+
+  window.addEventListener("unhandledrejection", (evt) => {
+    sendError(evt.reason);
+  });
+}
diff --git a/packages/app/vite.config.ts b/packages/app/vite.config.ts
@@ -2,7 +2,7 @@ import { execSync } from "node:child_process";
 import { themeScriptPlugin } from "@hiogawa/theme-script/dist/vite";
 import { vitePluginTinyRefresh } from "@hiogawa/tiny-refresh/dist/vite";
 import unocss from "unocss/vite";
-import { type Plugin, defineConfig } from "vite";
+import { type Plugin, WebSocketClient, defineConfig } from "vite";
 
 export default defineConfig({
   build: {
@@ -12,6 +12,7 @@ export default defineConfig({
     unocss(),
     unocssDepHmrPlugin([require.resolve("@hiogawa/unocss-preset-antd")]),
     vitePluginTinyRefresh(),
+    errorOverlayPlugin(),
     themeScriptPlugin({
       storageKey: "unocss-preset-antd-app:theme",
     }),
@@ -40,3 +41,31 @@ export function unocssDepHmrPlugin(deps: string[]): Plugin {
     },
   };
 }
+
+// based on the idea in
+// https://github.com/vitejs/vite/pull/6274#issuecomment-1087749460
+// https://github.com/vitejs/vite/issues/2076
+export function errorOverlayPlugin(): Plugin {
+  return {
+    name: "local:" + errorOverlayPlugin.name,
+    configureServer(server) {
+      server.ws.on(
+        "runtime-error",
+        (data: unknown, client: WebSocketClient) => {
+          // deserialize error
+          const error = Object.assign(new Error(), data);
+
+          // https://vitejs.dev/guide/api-plugin.html#client-server-communication
+          // https://github.com/vitejs/vite/blob/5b58eca05939c0667cf9698e83f4f4849f3296f4/packages/vite/src/node/server/middlewares/error.ts#L54-L57
+          client.send({
+            type: "error",
+            err: {
+              message: error.message,
+              stack: error.stack ?? "",
+            },
+          });
+        }
+      );
+    },
+  };
+}