[Bug?]: syntax errors in ./app.tsx causes uncaught 500 error

[bigmistqke]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

When editing app.tsx the website will 500 when the app i in an incorrect state. The dev-overlay is visible for a fraction of a second and then the default browser display is shown. The app is then not being able to get recovered with hmr.

Screen.Recording.2024-10-06.at.04.45.41.mov

When editing a file that app.tsx imports (and renders), the error does not occur:

Screen.Recording.2024-10-06.at.04.47.21.mov

It was slightly different behavior in the context of where I found out about the bug. I am making a sveltelab thingy for the hackathon, a repl powered by stackblitz' webcontainers. There some imports did cause similar 500s.

solidlab2.mp4

routes that are currently rendered can also be edited without 500, it's only app.tsx

basic.mp4

Expected behavior 🤔

To be able to write invalid code without the app getting in to an unrecoverable 500-error.

Steps to reproduce 🕹

Steps:

1. clone the bare solid start example
2. pnpm install && pnpm dev
3. edit src/app.tsx so it is invalid javascript and save
4. see that page 500s without dev-overlay
5. edit src/app.tsx so it is valid again
6. see that it does not reload

Context 🔦

No response

Your environment 🌎

No response

[ryansolid]

Hmm.. trying to think about who to get to look at this one. HMR behavior here could be related to Vinxi (@nksaraf) or it could be related to solid refresh or the overlay (@lxsmnsyc). Maybe either of them would have a better idea of how this should be working.

[atilafassina]

@lxsmnsyc can you please let us know if this is a Solid-Refresh issue? 👀

[birkskyum]

Revisited on v2. The setup in the original report is fixed; the bug is still reproducible with Nitro, and the real fix belongs upstream.

Fixed for the no-Nitro case. This was filed against v1, on Vinxi. The dev server now serves an error page that mounts Vite's ErrorOverlay (added in #1942, the PR that removed Vinxi), and Vite's client reloads it on the next update (if (isFirstUpdate && hasErrorOverlay()) location.reload()). Verified on unmodified main with a plugins: [solidStart()] app: break app.tsx, fix it, the page comes back on its own in ~0.5s.

Still broken with nitro(). Nitro implements dispatchFetch, so devServer() steps aside and Nitro renders SSR errors itself using Youch. That page has no /@vite/client and no vite-error-overlay, so it has no HMR connection and qualifies for neither of Vite's recovery paths. Fix the file and nothing reaches the browser. Same app, only difference is nitro() in the plugin list.

Fix belongs in Nitro. I tried patching the src/runtime/internal/error/dev.ts locally to append a Vite client + reload script to the HTML error page, removed all SolidStart-side changes, and the Nitro setup recovered in ~0.5s. So an upstream fix is sufficient on its own.

Leaving this open to track until that lands.

[birkskyum]

The exact patch i applied to nitro is insrc/runtime/internal/error/dev.ts:83-96, where

-    body: await youch.toHTML(error, {
-      request: {
-        url: url.href,
-        method: event.req.method,
-        headers: Object.fromEntries(event.req.headers.entries()),
-      },
-    }),
+    body:
+      (await youch.toHTML(error, {
+        request: {
+          url: url.href,
+          method: event.req.method,
+          headers: Object.fromEntries(event.req.headers.entries()),
+        },
+      })) + VITE_DEV_RECOVERY_SCRIPT,

With VITE_DEV_RECOVERY_SCRIPT being:

const VITE_DEV_RECOVERY_SCRIPT = `<script type="module">
  import { createHotContext } from "/@vite/client";
  let pending = false;
  async function reloadWhenServerRecovers() {
    if (pending) return;
    pending = true;
    for (const delay of [0, 100, 200, 400, 800]) {
      await new Promise(r => setTimeout(r, delay));
      const res = await fetch(location.href, {
        cache: "no-store",
        headers: { accept: "text/html" },
      }).catch(() => null);
      if (res && res.status < 500) return location.reload();
    }
    pending = false;
  }
  const hot = createHotContext("/@nitro/dev-error-page");
  hot.on("vite:beforeUpdate", reloadWhenServerRecovers);
  hot.on("vite:error", reloadWhenServerRecovers);
</script>`;