Skip to content
This repository was archived by the owner on Aug 5, 2025. It is now read-only.

show errors #91

Merged
merged 5 commits into from
Jun 27, 2022
Merged

show errors #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b49961e
display errors (#59)
Rich-Harris Jun 24, 2022
4d414f4
tweak error messages
Rich-Harris Jun 24, 2022
ecb3db0
goddamn
Rich-Harris Jun 24, 2022
dbd4028
oops
Rich-Harris Jun 24, 2022
fe0fb9b
tweaks
Rich-Harris Jun 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
44 changes: 22 additions & 22 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 34 additions & 18 deletions src/lib/client/adapters/webcontainer/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>}
Expand All @@ -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'] },
{
Expand Down
57 changes: 43 additions & 14 deletions src/routes/tutorial/[slug]/_/Loading.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -40,6 +60,15 @@
color: #999;
}

.error {
align-items: start;
justify-content: start;
}

.error :global(p) {
color: #f00;
}

svg {
width: 100px;
height: 100px;
Expand Down
14 changes: 11 additions & 3 deletions src/routes/tutorial/[slug]/index.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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>
Expand Down