Server crashes due to multiple runtime errors in Astro component (Astro + React)

[frendyguo]

Astro Info

Astro                    v4.4.15
Node                     v18.19.0
System                   macOS (x64)
Package Manager          npm
Output                   server
Adapter                  @astrojs/node
Integrations             @astrojs/react

If this issue only occurs in one browser, which browser is a problem?

All browsers

Describe the Bug

When rendering an Astro component (index.astro), if there is an error in a React component preceded by another runtime error, it will result in a server crash.

Example:

---
// index.astro
import ReactComp from '../components/react-comp';

const foo = { bar: null } as unknown as { bar: { baz: string[] } };
---

<!-- React component has to error first -->
<ReactComp foo={foo} />
{ foo.bar.baz.length > 0 && (
  <div />
)}

Steps to reproduce

1. Run npm run build
2. Run npm run preview
3. Go to localhost
4. Go to / page, server crashes.

What's the expected result?

Should not crash the server no matter how the error happen.

Link to Minimal Reproducible Example

https://github.com/frendyguo/astro-react-runtime-error-crash

Participation

• I am willing to submit a pull request for this issue.

[bluwy]

I looked into this, and it seems trickier to fix than expected. For example, the generated code from the repro is this (prettified so easier to read):

const $$Index = createComponent(
  async ($$result, $$props, $$slots) => {
    const Astro2 = $$result.createAstro($$Astro, $$props, $$slots)
    Astro2.self = $$Index
    const foo = { bar: null }
    return renderTemplate`<!-- React component has to error first -->
      ${renderComponent($$result, 'ReactComp', ReactComp, { foo: foo })}
      ${foo.bar.baz.length > 0 && renderTemplate`${maybeRenderHead()}<div></div>`}`
  },
  '/Users/.../src/pages/index.astro',
  void 0
)

The first renderComponent call would error, but it only returns a promise that rejects. The second foo.bar.baz.length > 0 && ... also errors but returns synchronously. So when rendering this Astro component, the second error will immediately return synchronously so the server responds with a 500 status. However, that leaves the first promise that rejects "hanging" or unhandled.

It's tricky the capture the first promise. Some ideas would be:

1. renderComponent (or any async APIs) could tell $$result to wait for the promise?
2. renderComponent (or any async APIs) could tell $$result to wait unhandledRejection event?
3. Make sure compiler injects await before renderComponent?

no3 doesn't feel right, but it's kinda the easiest fix. If we want something more robust, no1 or no2 would be it, but they don't look like the cleanest fix. I'm leaning on no3 currently.