From 61b01f51e7f03eadec38a234bc9c39bc9c8905ea Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sat, 28 Oct 2023 15:38:55 +0900 Subject: [PATCH] refactor: inject code via transformIndexHtml --- packages/app/index.html | 1 - packages/app/src/error-overlay.ts | 19 ------------ packages/app/vite.config.ts | 50 ++++++++++++++++++++++++++++--- 3 files changed, 46 insertions(+), 24 deletions(-) delete mode 100644 packages/app/src/error-overlay.ts diff --git a/packages/app/index.html b/packages/app/index.html index 25deb94b..6f0709ed 100644 --- a/packages/app/index.html +++ b/packages/app/index.html @@ -19,7 +19,6 @@ height: 100%; } -
diff --git a/packages/app/src/error-overlay.ts b/packages/app/src/error-overlay.ts deleted file mode 100644 index d68f38db..00000000 --- a/packages/app/src/error-overlay.ts +++ /dev/null @@ -1,19 +0,0 @@ -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 index 7787f64d..0fbeef5c 100644 --- a/packages/app/vite.config.ts +++ b/packages/app/vite.config.ts @@ -12,7 +12,7 @@ export default defineConfig({ unocss(), unocssDepHmrPlugin([require.resolve("@hiogawa/unocss-preset-antd")]), vitePluginTinyRefresh(), - errorOverlayPlugin(), + runtimeErrorOverlayDisplay(), themeScriptPlugin({ storageKey: "unocss-preset-antd-app:theme", }), @@ -45,12 +45,27 @@ 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 { +export function runtimeErrorOverlayDisplay(): Plugin { return { - name: "local:" + errorOverlayPlugin.name, + name: "local:" + runtimeErrorOverlayDisplay.name, + + apply(_config, env) { + return env.command === "serve" && !env.ssrBuild; + }, + + transformIndexHtml() { + return [ + { + tag: "script", + attrs: { type: "module" }, + children: RUNTIME_ERROR_OVERLAY_CLIENT_SCRIPT, + }, + ]; + }, + configureServer(server) { server.ws.on( - "runtime-error", + RUNTIME_ERROR_OVERLAY_MESSAGE_TYPE, (data: unknown, client: WebSocketClient) => { // deserialize error const error = Object.assign(new Error(), data); @@ -69,3 +84,30 @@ export function errorOverlayPlugin(): Plugin { }, }; } + +const RUNTIME_ERROR_OVERLAY_MESSAGE_TYPE = "custom:runtime-error"; + +const RUNTIME_ERROR_OVERLAY_CLIENT_SCRIPT = /* js */ ` +import { createHotContext } from "/@vite/client"; + +const hot = createHotContext("/__runtimeErrorOverlayPlugin_client.js"); + +function sendError(error) { + if (!(error instanceof Error)) { + error = new Error("(unknown runtime error)"); + } + const serialized = { + message: error.message, + stack: error.stack, + }; + hot.send("${RUNTIME_ERROR_OVERLAY_MESSAGE_TYPE}", serialized); +} + +window.addEventListener("error", (evt) => { + sendError(evt.error); +}); + +window.addEventListener("unhandledrejection", (evt) => { + sendError(evt.reason); +}); +`;