feat: show error if fetching the tar fails

Author: paoloricciuti

packages/repl/src/lib/Bundler.ts

@@ -20,7 +20,7 @@ export default class Bundler {
 	}: {
 		packages_url: string;
 		svelte_url: string;
-		onstatus: (val: string | null) => void;
+		onstatus: (val: string | null, kind?: 'status' | 'error') => void;
 	}) {
 		this.hash = `${packages_url}:${svelte_url}`;
 
@@ -39,8 +39,8 @@ export default class Bundler {
 
 			if (handler) {
 				// if no handler, was meant for a different REPL
-				if (event.data.type === 'status') {
-					onstatus(event.data.message);
+				if (event.data.type === 'status' || event.data.type === 'error') {
+					onstatus(event.data.message, event.data.type);
 					return;
 				}
 

packages/repl/src/lib/Repl.svelte

@@ -116,14 +116,15 @@
 	let width = $state(0);
 	let show_output = $state(false);
 	let status: string | null = $state(null);
+	let runtime_error: Error | null = $state(null);
 	let status_visible = $state(false);
 	let status_timeout: NodeJS.Timeout | undefined = undefined;
 
 	const bundler = BROWSER
 		? new Bundler({
 				packages_url: packagesUrl,
 				svelte_url: svelteUrl,
-				onstatus: (message) => {
+				onstatus: (message, kind) => {
 					if (message) {
 						// show bundler status, but only after time has elapsed, to
 						// prevent the banner flickering
@@ -137,8 +138,11 @@
 						status_visible = false;
 						status_timeout = undefined;
 					}
-
-					status = message;
+					if (kind === 'status') {
+						status = message;
+					} else {
+						runtime_error = new Error(message);
+					}
 				}
 			})
 		: null;
@@ -192,6 +196,7 @@
 					{injectedCSS}
 					{previewTheme}
 					{workspace}
+					runtimeError={status_visible ? runtime_error : null}
 				/>
 			</section>
 		</SplitPane>

packages/repl/src/lib/workers/bundler/index.ts

@@ -28,8 +28,10 @@ let version: string;
 let current_id: number;
 
 let fulfil_ready: (arg?: never) => void;
-const ready = new Promise((f) => {
+let reject_ready: (arg?: Error) => void;
+const ready = new Promise((f, r) => {
 	fulfil_ready = f;
+	reject_ready = r;
 });
 
 let files: Map<string, () => string>;
@@ -49,18 +51,26 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 				const ref = starts_with_pr
 					? svelte_url.substring('pr-'.length)
 					: svelte_url.substring('commit-'.length);
-
-				const maybe_tar = await fetch(`https://pkg.pr.new/svelte@${ref}`);
-				if (maybe_tar.headers.get('content-type') === 'application/tar+gzip') {
-					const buffer = await maybe_tar.arrayBuffer();
-					local_files = await parseTar(buffer);
-					files = new Map(
-						local_files.map((file) => [file.name.substring('package'.length), () => file.text])
-					);
-					const package_json_content = files.get('/package.json')?.();
-					if (package_json_content) {
-						package_json = JSON.parse(package_json_content);
+				try {
+					const maybe_tar = await fetch(`https://pkg.pr.new/svelte@${ref}`);
+					if (!maybe_tar.ok)
+						throw new Error(
+							`impossible to fetch the compiler from this ${starts_with_pr ? 'PR' : 'commit'}`
+						);
+					if (maybe_tar.headers.get('content-type') === 'application/tar+gzip') {
+						const buffer = await maybe_tar.arrayBuffer();
+						local_files = await parseTar(buffer);
+						files = new Map(
+							local_files.map((file) => [file.name.substring('package'.length), () => file.text])
+						);
+						const package_json_content = files.get('/package.json')?.();
+						if (package_json_content) {
+							package_json = JSON.parse(package_json_content);
+						}
 					}
+				} catch (e) {
+					reject_ready(e);
+					return;
 				}
 			}
 			({ version } =
@@ -91,7 +101,15 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 		}
 
 		case 'bundle': {
-			await ready;
+			try {
+				await ready;
+			} catch (e) {
+				self.postMessage({
+					type: 'error',
+					uid: event.data.uid,
+					message: `Error loading the compiler: ${e.message}`
+				});
+			}
 			const { uid, files, options } = event.data;
 
 			if (files.length === 0) return;

packages/repl/src/lib/workers/workers.d.ts

@@ -50,7 +50,7 @@ export interface MigrateOutput {
 
 export type BundleMessageData = {
 	uid: number;
-	type: 'init' | 'bundle' | 'status';
+	type: 'init' | 'bundle' | 'status' | 'error';
 	message: string;
 	packages_url: string;
 	svelte_url: string;