chore: react-server (dynamic ssr and rsc) error handling e2e tests

[rmarscher]

The additional ErrorFallback and Suspense examples seem to work well.

The tests I added for using the browser back button and for throwing an exception from a server function are failing though.

ref: #967

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

1 Skipped Deployment

Name	Status	Preview	Updated (UTC)
waku	⬜️ Ignored (Inspect)	Visit Preview	Jan 4, 2025 10:40am

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[rmarscher]

We need a test case for fs router that calls a server function that throws. I think that will demonstrate the default <h1>Not Found</h1> error boundary in the router code. Should we create a new fixture or add to the use-router fixture and test suite?

[tylersayshi]

Should we create a new fixture or add to the use-router fixture and test suite?

Does this also happen with just createPages? Or is it specific to fs-router?

[rmarscher]

Should we create a new fixture or add to the use-router fixture and test suite?

Does this also happen with just createPages? Or is it specific to fs-router?

Ah right... the server function errors hit the ErrorBoundary for the Router component (import { Router } from 'waku/router/client'). So that should be the same with createPages.

edit: I'll try adding a test to create-pages.spec.ts.

[rmarscher]

edit: I'll try adding a test to create-pages.spec.ts.

I added tests in 99fed9d. The create-pages.spec.ts tests pass since they demonstrate the current behavior. The rsc-basic.spec.ts doesn't seem to catch the thrown server function error yet. [edit: It works! I think forgot to run pnpm run compile locally to rebuild waku after pulling.] Thanks for working on it @dai-shi!

[rmarscher]

Here are the remaining failing tests that I added:

create-pages.spec.ts:91 › server function unreachable
Empty blank shown after attempting to call unreachable server function (createPages / Router).

rsc-basic.spec.ts:74 › server handle network errors
Empty blank shown after attempting to call unreachable server function (minimal API).

ssr-catch-error.spec.ts:41 › navigate back after invalid page through client router
"Home Page" header not visible. Page has "Unauthorized" header instead.

[dai-shi]

The create-pages.spec.ts tests pass since they demonstrate the current behavior.

Should we fix it for the expected behavior?

ssr-catch-error.spec.ts

I'm currently working on this. This requires to change the way how we code. But, this is something I've been wondering, and the outcome will be more reasonable.

I'll check out other cases later. Thanks so much for helping this.

[rmarscher]

The create-pages.spec.ts tests pass since they demonstrate the current behavior.

Should we fix it for the expected behavior?

Yes, we should. With the server function unreachable test, we should see what error is caught by the error boundary for network errors and render a different message than Not Found.

The error seems to happen outside the layout/page render trees so it doesn't hit any of the developer defined error boundaries. I think we need a way to pass an ErrorBoundary into the <Router /> component as a prop so we can define custom behavior. Or maybe we can get an ErrorBoundary in _root.tsx to capture all errors like this. That would be pretty intuitive and not require a custom main.tsx.

[dai-shi]

I'm currently working on this.

Hm, maybe I should work on the create-pages one first.

[dai-shi]

8fa1216 @rmarscher Can you check it? If you want to show the error boundary, you should "throw" the error in render instead of displaying.

we should see what error is caught by the error boundary for network errors

Note that server actions are not part of rendering, so it's not something to catch.

Maybe we should add a new test for unreachable with rendering. You already have it: 'server page unreachable'

render a different message than Not Found.

Yeah, keep this mind and we should tackle it later.

[dai-shi]

@rmarscher I haven't received your review yet, but this is done. I'll merge it anyway, but feel free to review, discuss, and ask questions if any.

Two remaining things:

1. The default fallback <h1>Not Found</h1> is not appropriate.
2. Needs refactors as some code is no longer used.

I'll work on 2 first.

[dai-shi]

Both remaining tasks should be done in #1122.

[rmarscher]

Oh great. Sorry I missed reviewing the other updates. I'll take a look. Thank you!