👍 Show esbuild errors on UI

takker99 · Nov 11, 2021 · f8d1947 · f8d1947
1 parent 00fde6d
commit f8d1947
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 25 deletions.
diff --git a/App.tsx b/App.tsx
@@ -100,22 +100,46 @@ const HeadlessApp = (props: { options: BundleOptions }) => {
             case "cache":
               setLog((old) => `${old}\nUse cache: ${decodeURI(data.url)}`);
               break;
+            case "fetch error":
+              setLog((old) =>
+                `${old}\nNetwork Error: ${data.data.status} ${data.data.statusText}\n\tat ${
+                  decodeURI(data.url)
+                }: `
+              );
+              break;
+            case "build error":
+              setLog((old) =>
+                [
+                  old,
+                  ...data.data.errors.map((
+                    { location, pluginName, text },
+                  ) =>
+                    `[${
+                      pluginName || "esbuild"
+                    }]Build error: ${text} \n\tat ${location
+                      ?.file}\n\t${location
+                      ?.lineText}\n\t${location?.suggestion}`
+                  ),
+                  ...data.data.warnings.map((
+                    { location, pluginName, text },
+                  ) =>
+                    `[${
+                      pluginName || "esbuild"
+                    }]Build warning: ${text} \n\tat ${location
+                      ?.file}\n\t${location
+                      ?.lineText}\n\t${location?.suggestion}`
+                  ),
+                ].join("\n")
+              );
+              break;
           }
         }
       } catch (e) {
-        if (!e?.type) throw e;
-        const error = e as (ErrorInfo | UnexpectedErrorInfo);
-        if (error.type === "error") {
-          setLog((old) =>
-            `${old}\nNetwork Error: ${error.data.status} ${error.data.statusText}\n\tat ${
-              decodeURI(error.url)
-            }: `
-          );
-        } else {
-          setLog((old) =>
-            `${old}\nUnexpected Error: ${JSON.stringify(error.data)}`
-          );
-        }
+        if (e?.type !== "unexpected error") throw e;
+        const error = e as UnexpectedErrorInfo;
+        setLog((old) =>
+          `${old}\nUnexpected Error: ${JSON.stringify(error.data)}`
+        );
       }
       console.groupEnd();
     })();

diff --git a/build.ts b/build.ts
@@ -22,9 +22,7 @@ export async function* build(params: BundleOptions) {
   try {
     while (true) {
       const data = await waitMessage();
-      if (data.type === "error" || data.type === "unexpected") {
-        throw data;
-      }
+      if (data.type === "unexpected error") throw data;
       yield data;
       if (data.type === "built") break;
       continue;

diff --git a/build.worker.ts b/build.worker.ts
@@ -1,7 +1,7 @@
 /// <reference no-default-lib="true" />
 /// <reference lib="esnext" />
 /// <reference lib="webworker" />
-import { build, initialize } from "./deps/esbuild-wasm.ts";
+import { build, BuildFailure, initialize } from "./deps/esbuild-wasm.ts";
 import { getLoader, remoteLoader } from "./loader.ts";
 import { fetch } from "./fetch.ts";
 import type { BuildResult, BundleOptions } from "./types.ts";
@@ -45,13 +45,17 @@ self.addEventListener<"message">("message", async (event) => {
   } catch (e) {
     if (e instanceof Response) {
       postMessage({
-        type: "error",
+        type: "fetch error",
         url: e.url,
         data: { status: e.status, statusText: e.statusText },
       });
       return;
     }
+    if (e instanceof Error) {
+      postMessage({ type: "build error", data: { ...e } as BuildFailure });
+      return;
+    }
     console.error(e);
-    postMessage({ type: "unexpected", data: { ...e } });
+    postMessage({ type: "unexpected error", data: { ...e } });
   }
 });
diff --git a/loader.ts b/loader.ts
@@ -104,7 +104,7 @@ export const remoteLoader = (
           throw e;
         }
         progressCallback?.({
-          type: "error",
+          type: "fetch error",
           url: e.url,
           data: { status: e.status, statusText: e.statusText },
         });

diff --git a/types.ts b/types.ts
@@ -1,5 +1,7 @@
-export type ErrorInfo = {
-  type: "error";
+import type { BuildFailure } from "./deps/esbuild-wasm.ts";
+
+export type FetchErrorInfo = {
+  type: "fetch error";
   url: string;
   data: {
     status: number;
@@ -14,17 +16,26 @@ export type CacheInfo = {
   url: string;
   type: "cache";
 };
-export type ImportInfo = RemoteInfo | CacheInfo | ErrorInfo;
+export type ImportInfo = RemoteInfo | CacheInfo | FetchErrorInfo;
 
 export type BuiltInfo = {
   type: "built";
   code: Uint8Array;
 };
+export type BuildErrorInfo = {
+  type: "build error";
+  data: BuildFailure;
+};
 export type UnexpectedErrorInfo = {
-  type: "unexpected";
+  type: "unexpected error";
   data: unknown;
 };
-export type BuildResult = ImportInfo | BuiltInfo | UnexpectedErrorInfo;
+export type BuildResult =
+  | ImportInfo
+  | BuiltInfo
+  | BuildErrorInfo
+  | UnexpectedErrorInfo;
+export type ErrorInfo = FetchErrorInfo | BuildErrorInfo | UnexpectedErrorInfo;
 
 const formatList = ["esm", "iife", "cjs"] as const;
 export type Format = (typeof formatList)[number];