[Bug?]: Unable to set response status code inside ErrorBoundary

[SuperGeekJake]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Attempting to use the <HttpStatusCode code={err.statusCode ?? 500} /> component inside the fallback prop of an <ErrorBoundary /> still results in 200 status. The response is unaffected.

Expected behavior 🤔

The response status should be updated to match the H3Error.statusCode or default to 500.

Steps to reproduce 🕹

Not sure how to create a project on codesandbox to reproduce this, but this should be the relatvent code:

// @refresh reload
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes, HttpStatusCode } from "@solidjs/start";
import { ErrorBoundary, Suspense } from "solid-js";

export default function App() {
  return (
    <Router
      root={(props) => (
        <MetaProvider>
          <Title>Example</Title>
          <Suspense>
            <ErrorBoundary
              fallback={(err, reset) => (
                <>
                  <HttpStatusCode code={err.statusCode ?? 500} />
                  <main>
                    <h1>Error</h1>
                    <p>{err.message}</p>
                    <button onclick={reset}>Reset</button>
                  </main>
                </>
              )}
            >
              <Suspense>{props.children}</Suspense>
            </ErrorBoundary>
          </Suspense>
        </MetaProvider>
      )}
    >
      <FileRoutes />
    </Router>
  );
}

Context 🔦

Attempting to handle any page errors by wrapping the file router in an ErrorBoundary. Besides unhandled server errors, I'm also intentionally throwing 404 H3Errors from the RPC server functions when the requested URL params don't point to valid data. Currently, its allowing me to show an error page, but the response status is still 200.

Your environment 🌎

System:
  OS: Windows 11 (WSL Ubuntu 20.04)
  Node: v20.6.1
  Browser: Chrome 120.0.6099.130
Packages:
  @solidjs/meta: ^0.29.3
  @solidjs/router: ^0.10.5
  @solidjs/start: ^0.4.2
  solid-js: ^1.8.7
  vinxi: ^0.0.54

[frenzzy]

I just added <HttpStatusCode code={500} /> to the default ErrorBoundary component (see PR #1204). After this change, I noticed that it started returning the correct status code, as you can see in this screenshot:

However, I observed that the onBeforeResponse middleware executes before the ErrorBoundary component. This behavior might be related to the issue, and it's possible that an await is missing somewhere, which could explain why it sometimes works correctly.

[ryansolid]

If the response is streaming then its possible I assume that onBeforeResponse could fire before the ErrorBoundary and the status code would never update. But it shouldn't happen in the synchronous case.

[ryansolid]

Yeah more specifically. Given the new ErrorBoundary works and I haven't reproduced it locally my suspicion is that this is a streaming response that has already flushed. Please provide a reproduction. Stackblitz should work now or a github repo.

[SuperGeekJake]

I wasn't able to replicate when using the latest version of solid-start and vinxi, works as expected 🙌 !
https://stackblitz.com/edit/github-huk5bu?file=src%2Fapp.tsx