diff --git a/.changeset/strange-melons-provide.md b/.changeset/strange-melons-provide.md new file mode 100644 index 000000000000..5892f771c9c2 --- /dev/null +++ b/.changeset/strange-melons-provide.md @@ -0,0 +1,9 @@ +--- +"wrangler": patch +--- + +feature: add more types that get logged via `console` methods + +This PR adds more special logic for some data types that get logged via `console` methods. Types like `Promise`, `Date`, `WeakMaps`, and some more, now get logged correctly (or at least, better than they used to). + +This PR also fixes a sinister bug - the `type` of the `ConsoleAPICalled` events don't match 1:1 with actual console methods (eg: `console.warn` message type is `warning`). This PR adds a mapping between those types and method names. Some methods don't seem to have a message type, I'm not sure why, but we'll get to them later. diff --git a/packages/wrangler/src/dev.tsx b/packages/wrangler/src/dev.tsx index cd5132dd0b9e..f079697e68d3 100644 --- a/packages/wrangler/src/dev.tsx +++ b/packages/wrangler/src/dev.tsx @@ -569,7 +569,7 @@ function useWorker(props: { if (!startedRef.current) { startedRef.current = true; } else { - console.log("⎔ Detected changes, restarting server..."); + console.log("⎔ Detected changes, restarted server."); } const assets = await syncAssets( diff --git a/packages/wrangler/src/inspect.ts b/packages/wrangler/src/inspect.ts index 24cd7945cf0e..bfb5471a9b98 100644 --- a/packages/wrangler/src/inspect.ts +++ b/packages/wrangler/src/inspect.ts @@ -432,6 +432,33 @@ function randomId(): string { * we're just doing a little bit of the work of the devtools console, * directly in the terminal. */ + +export const mapConsoleAPIMessageTypeToConsoleMethod: { + [key in Protocol.Runtime.ConsoleAPICalledEvent["type"]]: Exclude< + keyof Console, + "Console" + >; +} = { + log: "log", + debug: "debug", + info: "info", + warning: "warn", + error: "error", + dir: "dir", + dirxml: "dirxml", + table: "table", + trace: "trace", + clear: "clear", + count: "count", + assert: "assert", + profile: "profile", + profileEnd: "profileEnd", + timeEnd: "timeEnd", + startGroup: "group", + startGroupCollapsed: "groupCollapsed", + endGroup: "groupEnd", +}; + function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void { const args: string[] = []; for (const ro of evt.args) { @@ -449,7 +476,11 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void { break; case "object": if (!ro.preview) { - args.push(ro.description ?? ""); + args.push( + ro.subtype === "null" + ? "null" + : ro.description ?? "" + ); } else { args.push(ro.preview.description ?? ""); @@ -467,6 +498,7 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void { ); break; + case "weakmap": case "map": args.push( "{\n" + @@ -484,6 +516,7 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void { ); break; + case "weakset": case "set": args.push( "{ " + @@ -497,27 +530,33 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void { (ro.preview.overflow ? ", ..." : "") + " }" ); - - break; - case "null": - args.push("null"); break; - case "node": case "regexp": + break; case "date": - case "weakmap": - case "weakset": - case "iterator": + break; case "generator": - case "error": - case "proxy": + args.push(ro.preview.properties[0].value || ""); + break; case "promise": + if (ro.preview.properties[0].value === "pending") { + args.push(`{<${ro.preview.properties[0].value}>}`); + } else { + args.push( + `{<${ro.preview.properties[0].value}>: ${ro.preview.properties[1].value}}` + ); + } + break; + case "node": + case "iterator": + case "proxy": case "typedarray": case "arraybuffer": case "dataview": case "webassemblymemory": case "wasmvalue": break; + case "error": default: // just a pojo args.push( @@ -539,5 +578,13 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void { } } - console[evt.type](...args); + const method = mapConsoleAPIMessageTypeToConsoleMethod[evt.type]; + + if (method in console) { + // eslint-disable-next-line prefer-spread + console[method].apply(console, args); + } else { + console.warn(`Unsupported console method: ${method}`); + console.log("console event:", evt); + } }