Add source map tracing in error stack traces (#48)

.changeset/nervous-tips-unite.md

@@ -0,0 +1,5 @@
+---
+'nxjs-runtime': patch
+---
+
+Add source map tracing in error stack traces

apps/2048/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/2048/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js port of the 2048 game",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.js --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.js --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/ansi/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/ansi/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js app with colors and cursor movement using ANSI escapes",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/canvas/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/canvas/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js app using the web `Canvas` API",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/fonts/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/fonts/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js app using customs fonts",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/hello-world/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
-/romfs/main.js
+/romfs/main.js*
+/romfs/main.js.map

apps/hello-world/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "Simple 'Hello World' nx.js app",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 --format=esm src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/repl/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/repl/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js REPL (read-eval-print-loop) app",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/snake/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/snake/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "Classic 'snake' game using nx.js",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/starwars/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/starwars/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js app that renders the Star Wars ASCII text",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/svg/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/svg/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js app that renders an SVG image to the screen",
   "scripts": {
-    "build": "esbuild --bundle --banner:js='globalThis.global = globalThis;' --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --banner:js='globalThis.global = globalThis;' --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/tests/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/tests/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "description": "nx.js API tests",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 --format=esm src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --target=es2020 --sourcemap --sources-content=false --format=esm src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/touchscreen/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/touchscreen/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js app using the touchscreen",
   "scripts": {
-    "build": "esbuild --bundle --main-fields=module,main --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --main-fields=module,main --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/vibrate/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/vibrate/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js app demonstrating the `Switch.vibrate()` API",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

apps/wasm/.gitignore

@@ -1,3 +1,4 @@
 /*.nro
 /node_modules
 /romfs/main.js
+/romfs/main.js.map

apps/wasm/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "nx.js app that loads a WASM binary",
   "scripts": {
-    "build": "esbuild --bundle --target=es2020 src/main.ts --outfile=romfs/main.js",
+    "build": "esbuild --bundle --sourcemap --sources-content=false --target=es2020 src/main.ts --outfile=romfs/main.js",
     "nro": "nxjs-pack"
   },
   "license": "MIT",

build.sh

@@ -4,7 +4,7 @@ set -euo pipefail
 # Build JS runtime
 pnpm bundle
 mkdir -p romfs
-cp -v ./packages/runtime/runtime.js ./romfs/runtime.js
+cp -v ./packages/runtime/runtime.* ./romfs/
 
 # Build packages and example apps
 pnpm build

packages/runtime/.gitignore

@@ -1,2 +1,2 @@
-/runtime.js
+/runtime.js*
 /public

packages/runtime/bundle.mjs

@@ -4,7 +4,10 @@ await build({
 	bundle: true,
 	minify: process.env.MINIFY === '1',
 	mainFields: ['module', 'main'],
+	//conditions: ['nxjs', 'import', 'browser', 'require', 'default'],
 	target: 'es2020',
 	entryPoints: ['src/index.ts'],
+	sourcemap: true,
+	sourcesContent: false,
 	outfile: 'runtime.js',
 });

packages/runtime/package.json

@@ -15,6 +15,7 @@
   "author": "Nathan Rajlich <[email protected]>",
   "license": "MIT",
   "devDependencies": {
+    "@jridgewell/trace-mapping": "^0.3.19",
     "@types/color-rgba": "^2.1.0",
     "@types/to-px": "^1.1.2",
     "@ungap/event-target": "^0.2.4",

packages/runtime/src/index.ts

@@ -79,6 +79,8 @@ import './navigator';
 import * as WebAssembly from './wasm';
 def('WebAssembly', WebAssembly);
 
+import './source-map';
+
 /**
  * The `import.meta` meta-property exposes context-specific metadata to a JavaScript module.
  * It contains information about the module, such as the module's URL.

packages/runtime/src/source-map.ts

@@ -0,0 +1,75 @@
+import { dataUriToBuffer } from 'data-uri-to-buffer';
+import {
+	TraceMap,
+	originalPositionFor,
+	type EncodedSourceMap,
+} from '@jridgewell/trace-mapping';
+import type { SwitchClass } from './switch';
+
+declare const Switch: SwitchClass;
+
+const SOURCE_MAPPING_URL_PREFIX = '//# sourceMappingURL=';
+const sourceMapCache = new Map<string, TraceMap | null>();
+
+function filenameToTracer(filename: string) {
+	let tracer = sourceMapCache.get(filename);
+	if (typeof tracer !== 'undefined') return tracer;
+
+	// `null` means the source map could not be retrieved for this file
+	tracer = null;
+
+	const contentsBuffer = Switch.readFileSync(filename);
+	const contents = new TextDecoder().decode(contentsBuffer).trimEnd();
+	const lastNewline = contents.lastIndexOf('\n');
+	const lastLine = contents.slice(lastNewline + 1);
+	if (lastLine.startsWith(SOURCE_MAPPING_URL_PREFIX)) {
+		const sourceMappingURL = lastLine.slice(
+			SOURCE_MAPPING_URL_PREFIX.length
+		);
+		let sourceMapBuffer: ArrayBuffer;
+		if (sourceMappingURL.startsWith('data:')) {
+			sourceMapBuffer = dataUriToBuffer(sourceMappingURL).buffer;
+		} else {
+			sourceMapBuffer = Switch.readFileSync(
+				new URL(sourceMappingURL, filename)
+			);
+		}
+		const sourceMap: EncodedSourceMap = JSON.parse(
+			new TextDecoder().decode(sourceMapBuffer)
+		);
+		tracer = new TraceMap(sourceMap);
+	}
+	sourceMapCache.set(filename, tracer);
+	return tracer;
+}
+
+(Error as any).prepareStackTrace = (_: Error, stack: string) => {
+	return stack
+		.split('\n')
+		.map((line) => {
+			try {
+				const m = line.match(/(\s+at )(.*) \((.*)\:(\d+)\)$/);
+				if (!m) return line;
+
+				const [_, at, name, filename, lineNo] = m;
+				const tracer = filenameToTracer(filename);
+				if (!tracer) return line;
+
+				const traced = originalPositionFor(tracer, {
+					line: +lineNo,
+					// QuickJS doesn't provide column number.
+					// Unfortunately that means that minification
+					// doesn't work well with source maps :(
+					column: 0,
+				});
+				if (!traced.source || !traced.line) return line;
+
+				const proto = filename === 'romfs:/runtime.js' ? 'nxjs' : 'app';
+				return `${at}${traced.name || name} (${proto}:${
+					traced.source
+				}:${traced.line})`;
+			} catch (_) {}
+			return line;
+		})
+		.join('\n');
+};

upload.sh

@@ -1,7 +1,16 @@
-#!/bin/bash
+#!/usr/bin/env bash
 set -euo pipefail
 APP="${1-hello-world}"
 SWITCH_HOST="${2-192.168.86.115:5000}"
-curl --netrc-optional \
-    --upload-file nxjs.nro "ftp://${SWITCH_HOST}/switch/nxjs.nro" \
+
+ARGS=(
+    --upload-file nxjs.nro "ftp://${SWITCH_HOST}/switch/nxjs.nro"
     --upload-file "./apps/${APP}/romfs/main.js" "ftp://${SWITCH_HOST}/switch/nxjs.js"
+)
+
+# Upload source map file, if it exists
+if [ -f "./apps/${APP}/romfs/main.js.map" ]; then
+    ARGS+=(--upload-file "./apps/${APP}/romfs/main.js.map" "ftp://${SWITCH_HOST}/switch/main.js.map")
+fi
+
+curl --netrc-optional "${ARGS[@]}"