[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs.
bomb.sh/docs
fix(WebContainer): handle boot errors and improve snapshot fetching (#28)
authored by
paul valladares
and committed by
GitHub
(Jan 30, 2026, 11:10 AM EST)
f0eaf354
2b1efeae
+26
-4
+3
public/_headers
+3
public/_headers
+23
-4
src/components/WebContainer/WebContainer.astro
+23
-4
src/components/WebContainer/WebContainer.astro
···
17
17
import { WebContainer } from "@webcontainer/api";
18
18
const sleep = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
19
19
let host: WebContainer;
20
+
let bootError: string | null = null;
20
21
21
-
host = await WebContainer.boot({ coep: 'require-corp', workdirName: 'demo' });
22
-
const snapshotResponse = await fetch(`/docs/snapshot`);
23
-
const snapshot = await snapshotResponse.arrayBuffer();
24
-
await host.mount(snapshot, { mountPoint: "/" });
22
+
try {
23
+
host = await WebContainer.boot({ coep: 'require-corp', workdirName: 'demo' });
24
+
const base = (import.meta.env.BASE_URL || '/').replace(/\/?$/, '');
25
+
const snapshotUrl = `${base}/snapshot`;
26
+
const snapshotResponse = await fetch(snapshotUrl);
27
+
if (!snapshotResponse.ok) {
28
+
throw new Error(`Snapshot failed (${snapshotResponse.status}). Run \`pnpm run snapshot\` and ensure the dev server can serve ${snapshotUrl}.`);
29
+
}
30
+
const snapshot = await snapshotResponse.arrayBuffer();
31
+
await host.mount(snapshot, { mountPoint: "/" });
32
+
} catch (e) {
33
+
bootError = e instanceof Error ? e.message : String(e);
34
+
}
25
35
26
36
customElements.define(
27
37
"web-container",
···
43
53
return (this.querySelector("docs-terminal") as any)?.instance;
44
54
}
45
55
async connectedCallback() {
56
+
if (bootError) {
57
+
this.innerHTML = `<div style="padding:1rem;background:var(--sl-color-accent-low);color:var(--sl-color-text);border-radius:0.5rem;font-family:monospace;font-size:0.875rem;">WebContainer: ${bootError}</div>`;
58
+
return;
59
+
}
60
+
const termEl = this.querySelector("docs-terminal") as any;
61
+
const deadline = Date.now() + 10000;
62
+
while (!termEl?.instance && Date.now() < deadline) {
63
+
await sleep(50);
64
+
}
46
65
await host.fs.mkdir(this.dir, { recursive: true });
47
66
await host.fs.writeFile(
48
67
this.file,