show errors (sveltejs#91)

* display errors (sveltejs#59)

* tweak error messages

* goddamn

* oops

* tweaks

Author: Rich-Harris

package.json

@@ -28,7 +28,7 @@
 	"type": "module",
 	"dependencies": {
 		"@fontsource/roboto-mono": "^4.5.7",
-		"@webcontainer/api": "^0.0.1",
+		"@webcontainer/api": "^0.0.4",
 		"adm-zip": "^0.5.9",
 		"base64-js": "^1.5.1",
 		"marked": "^4.0.16",

pnpm-lock.yaml

@@ -2,8 +2,6 @@ import { load } from '@webcontainer/api';
 import base64 from 'base64-js';
 import { ready } from '../common/index.js';
 
-const WebContainer = await load();
-
 /**
  * @param {import('$lib/types').Stub[]} stubs
  * @returns {Promise<import('$lib/types').Adapter>}
@@ -19,31 +17,49 @@ export async function create(stubs) {
 		file: { contents: common.unzip }
 	};
 
-	const vm = await WebContainer.boot();
-	await vm.loadFiles(tree);
+	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
+		throw new Error('WebContainers are not supported by Safari');
+	}
 
-	const unzip = await vm.run(
-		{
-			command: 'node',
-			args: ['unzip.cjs']
-		},
-		{
-			stderr: (data) => console.error(`[unzip] ${data}`)
-		}
-	);
+	/** @type {import('@webcontainer/api').WebContainer} */
+	let vm;
+
+	const base = await new Promise(async (fulfil, reject) => {
+		setTimeout(() => {
+			reject(new Error('Timed out'));
+		}, 15000);
 
-	const code = await unzip.onExit;
+		const WebContainer = await load();
 
-	if (code !== 0) {
-		throw new Error('Failed to initialize WebContainer');
-	}
+		vm = await WebContainer.boot();
+
+		vm.on('error', (error) => {
+			reject(new Error(error.message));
+		});
 
-	const base = await new Promise(async (fulfil, reject) => {
 		vm.on('server-ready', (port, base) => {
 			console.log(`server ready on port ${port} at ${performance.now()}: ${base}`);
 			fulfil(base);
 		});
 
+		await vm.loadFiles(tree);
+
+		const unzip = await vm.run(
+			{
+				command: 'node',
+				args: ['unzip.cjs']
+			},
+			{
+				stderr: (data) => console.error(`[unzip] ${data}`)
+			}
+		);
+
+		const code = await unzip.onExit;
+
+		if (code !== 0) {
+			reject(new Error('Failed to initialize WebContainer'));
+		}
+
 		await vm.run(
 			{ command: 'turbo', args: ['run', 'dev'] },
 			{

src/lib/client/adapters/webcontainer/index.js

@@ -1,23 +1,43 @@
 <script>
 	/** @type {boolean} */
 	export let initial;
+
+	/** @type {Error | null} */
+	export let error;
+
+	/** @param {Error} error */
+	function get_error_message(error) {
+		if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
+			return '<p>This app requires modern web platform features. Please use a browser other than Safari.</p>';
+		}
+
+		if (/firefox/i.test(navigator.userAgent)) {
+			return `<p>Failed to start WebContainer. You may need to enable third party cookies and disable Enhanced Tracking Protection.</p><small>Error message: ${error.message}</small>`;
+		}
+
+		return `<p>Failed to start WebContainer. You may need to enable third party cookies.</p><small>Error message: ${error.message}</small>`;
+	}
 </script>
 
-<div class="loading">
-	{#if initial}
-		<p>initializing... this may take a few seconds</p>
-	{/if}
+<div class="loading" class:error>
+	{#if error}
+		{@html get_error_message(error)}
+	{:else}
+		{#if initial}
+			<p>initializing... this may take a few seconds</p>
+		{/if}
 
-	<svg width="107" height="128" viewBox="0 0 107 128">
-		<path
-			d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
-			style="fill: #ff3e00"
-		/>
-		<path
-			d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287"
-			style="fill: #fff"
-		/>
-	</svg>
+		<svg width="107" height="128" viewBox="0 0 107 128">
+			<path
+				d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157"
+				style="fill: #ff3e00"
+			/>
+			<path
+				d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287"
+				style="fill: #fff"
+			/>
+		</svg>
+	{/if}
 </div>
 
 <style>
@@ -40,6 +60,15 @@
 		color: #999;
 	}
 
+	.error {
+		align-items: start;
+		justify-content: start;
+	}
+
+	.error :global(p) {
+		color: #f00;
+	}
+
 	svg {
 		width: 100px;
 		height: 100px;

src/routes/tutorial/[slug]/_/Loading.svelte

@@ -49,6 +49,9 @@
 	let loading = true;
 	let initial = true;
 
+	/** @type {Error | null} */
+	let error = null;
+
 	/** @type {Record<string, boolean>}*/
 	let complete_states = {};
 	let completed = false;
@@ -142,7 +145,12 @@
 				? await import('$lib/client/adapters/filesystem/index.js')
 				: await import('$lib/client/adapters/webcontainer/index.js');
 
-			adapter = await module.create(Object.values(b));
+			try {
+				adapter = await module.create(Object.values(b));
+			} catch (e) {
+				error = /** @type {Error} */ (e);
+				return;
+			}
 		}
 
 		set_iframe_src(adapter.base);
@@ -404,8 +412,8 @@
 					<div class="content">
 						<iframe bind:this={iframe} title="Output" />
 
-						{#if loading}
-							<Loading {initial} />
+						{#if loading || error}
+							<Loading {initial} {error} />
 						{/if}
 					</div>
 				</section>