wrangler 0.0.0-e178d6fb → 0.0.0-e1c2f5b9

package/src/inspect.ts

@@ -1,3 +1,4 @@
+import { readFile } from "fs/promises";
 import assert from "node:assert";
 import { createServer } from "node:http";
 import os from "node:os";
@@ -5,10 +6,12 @@ import { URL } from "node:url";
 
 import open from "open";
 import { useEffect, useRef, useState } from "react";
+import { SourceMapConsumer } from "source-map";
 import WebSocket, { WebSocketServer } from "ws";
 import { version } from "../package.json";
 import { logger } from "./logger";
 import { waitForPortToBeAvailable } from "./proxy";
+import { getAccessToken } from "./user/access";
 import type Protocol from "devtools-protocol";
 import type { IncomingMessage, Server, ServerResponse } from "node:http";
 import type { MessageEvent } from "ws";
@@ -52,6 +55,12 @@ interface InspectorProps {
 	 * logged to the terminal by nature of them actually running in node locally.)
 	 */
 	logToTerminal: boolean;
+	/**
+	 * Sourcemap path, so that stacktraces can be interpretted
+	 */
+	sourceMapPath?: string | undefined;
+
+	host?: string;
 }
 
 export default function useInspector(props: InspectorProps) {
@@ -198,14 +207,31 @@ export default function useInspector(props: InspectorProps) {
 	/** A simple incrementing id to attach to messages we send to devtools */
 	const messageCounterRef = useRef(1);
 
+	const cfAccessRef = useRef<string>();
+
+	useEffect(() => {
+		const run = async () => {
+			if (props.host && !cfAccessRef.current) {
+				const token = await getAccessToken(props.host);
+				cfAccessRef.current = token;
+			}
+		};
+		if (props.host) void run();
+	}, [props.host]);
+
 	// This effect tracks the connection to the remote websocket
 	// (stored in, no surprises here, `remoteWebSocket`)
 	useEffect(() => {
 		if (!props.inspectorUrl) {
 			return;
 		}
+
 		// The actual websocket instance
-		const ws = new WebSocket(props.inspectorUrl);
+		const ws = new WebSocket(props.inspectorUrl, {
+			headers: {
+				cookie: `CF_Authorization=${cfAccessRef.current}`,
+			},
+		});
 		setRemoteWebSocket(ws);
 
 		/**
@@ -252,15 +278,93 @@ export default function useInspector(props: InspectorProps) {
 		 * without having to open the devtools).
 		 */
 		if (props.logToTerminal) {
-			ws.addEventListener("message", (event: MessageEvent) => {
+			ws.addEventListener("message", async (event: MessageEvent) => {
 				if (typeof event.data === "string") {
 					const evt = JSON.parse(event.data);
 					if (evt.method === "Runtime.exceptionThrown") {
 						const params = evt.params as Protocol.Runtime.ExceptionThrownEvent;
-						logger.error(
-							params.exceptionDetails.text,
-							params.exceptionDetails.exception?.description ?? ""
-						);
+
+						// Parse stack trace with source map.
+						if (props.sourceMapPath) {
+							// Parse in the sourcemap
+							const mapContent = JSON.parse(
+								await readFile(props.sourceMapPath, "utf-8")
+							);
+
+							// Create the lines for the exception details log
+							const exceptionLines = [
+								params.exceptionDetails.exception?.description?.split("\n")[0],
+							];
+
+							await SourceMapConsumer.with(
+								mapContent,
+								null,
+								async (consumer) => {
+									// Pass each of the callframes into the consumer, and format the error
+									const stack = params.exceptionDetails.stackTrace?.callFrames;
+
+									stack?.forEach(
+										({ functionName, lineNumber, columnNumber }, i) => {
+											try {
+												if (lineNumber) {
+													// The line and column numbers in the stackTrace are zero indexed,
+													// whereas the sourcemap consumer indexes from one.
+													const pos = consumer.originalPositionFor({
+														line: lineNumber + 1,
+														column: columnNumber + 1,
+													});
+
+													// Print out line which caused error:
+													if (i === 0 && pos.source && pos.line) {
+														const fileSource = consumer.sourceContentFor(
+															pos.source
+														);
+														const fileSourceLine =
+															fileSource?.split("\n")[pos.line - 1] || "";
+														exceptionLines.push(fileSourceLine.trim());
+
+														// If we have a column, we can mark the position underneath
+														if (pos.column) {
+															exceptionLines.push(
+																`${" ".repeat(
+																	pos.column - fileSourceLine.search(/\S/)
+																)}^`
+															);
+														}
+													}
+
+													// From the way esbuild implements the "names" field:
+													// > To save space, the original name is only recorded when it's different from the final name.
+													// however, source-map consumer does not handle this
+													if (pos && pos.line != null) {
+														const convertedFnName =
+															pos.name || functionName || "";
+														exceptionLines.push(
+															`    at ${convertedFnName} (${pos.source}:${pos.line}:${pos.column})`
+														);
+													}
+												}
+											} catch {
+												// Line failed to parse through the sourcemap consumer
+												// We should handle this better
+											}
+										}
+									);
+								}
+							);
+
+							// Log the parsed stacktrace
+							logger.error(
+								params.exceptionDetails.text,
+								exceptionLines.join("\n")
+							);
+						} else {
+							// We log the stacktrace to the terminal
+							logger.error(
+								params.exceptionDetails.text,
+								params.exceptionDetails.exception?.description ?? ""
+							);
+						}
 					}
 					if (evt.method === "Runtime.consoleAPICalled") {
 						logConsoleMessage(
@@ -333,6 +437,7 @@ export default function useInspector(props: InspectorProps) {
 	}, [
 		props.inspectorUrl,
 		props.logToTerminal,
+		props.sourceMapPath,
 		wsServer,
 		// We use a state value as a sigil to trigger a retry of the
 		// remote websocket connection. It's not used inside the effect,
@@ -525,36 +630,36 @@ function logConsoleMessage(evt: Protocol.Runtime.ConsoleAPICalledEvent): void {
 							break;
 						case "weakmap":
 						case "map":
-							args.push(
-								"{\n" +
-									// Maps always have entries
-									// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-									ro.preview
-										.entries!.map(({ key, value }) => {
-											return `  ${key?.description ?? "<unknown>"} => ${
-												value.description
-											}`;
-										})
-										.join(",\n") +
-									(ro.preview.overflow ? "\n  ..." : "") +
-									"\n}"
-							);
+							ro.preview.entries === undefined
+								? args.push("{}")
+								: args.push(
+										"{\n" +
+											ro.preview.entries
+												.map(({ key, value }) => {
+													return `  ${key?.description ?? "<unknown>"} => ${
+														value.description
+													}`;
+												})
+												.join(",\n") +
+											(ro.preview.overflow ? "\n  ..." : "") +
+											"\n}"
+								  );
 
 							break;
 						case "weakset":
 						case "set":
-							args.push(
-								"{ " +
-									// Sets always have entries
-									// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-									ro.preview
-										.entries!.map(({ value }) => {
-											return `${value.description}`;
-										})
-										.join(", ") +
-									(ro.preview.overflow ? ", ..." : "") +
-									" }"
-							);
+							ro.preview.entries === undefined
+								? args.push("{}")
+								: args.push(
+										"{ " +
+											ro.preview.entries
+												.map(({ value }) => {
+													return `${value.description}`;
+												})
+												.join(", ") +
+											(ro.preview.overflow ? ", ..." : "") +
+											" }"
+								  );
 							break;
 						case "regexp":
 							break;

package/src/is-interactive.ts

@@ -4,6 +4,10 @@
  * or you're piping values from / to another process, etc
  */
 export default function isInteractive(): boolean {
+	if (process.env.CF_PAGES === "1") {
+		return false;
+	}
+
 	try {
 		return Boolean(process.stdin.isTTY && process.stdout.isTTY);
 	} catch {

package/src/jest.d.ts

@@ -0,0 +1,4 @@
+declare global {
+	const jest: unknown;
+}
+export {};

package/src/{kv.ts → kv/helpers.ts}

@@ -1,8 +1,8 @@
 import { URLSearchParams } from "node:url";
 import { FormData } from "undici";
-import { fetchListResult, fetchResult, fetchKVGetValue } from "./cfetch";
-import { logger } from "./logger";
-import type { Config } from "./config";
+import { fetchListResult, fetchResult, fetchKVGetValue } from "../cfetch";
+import { logger } from "../logger";
+import type { Config } from "../config";
 
 /** The largest number of kv items we can pass to the API in a single request. */
 const API_MAX = 10000;