chore(rsc): server function error handling example (#971)

Author: hi-ogawa

packages/plugin-rsc/e2e/basic.test.ts

@@ -1,6 +1,11 @@
 import { createHash } from 'node:crypto'
 import { readFileSync } from 'node:fs'
-import { type Page, expect, test } from '@playwright/test'
+import {
+  type Page,
+  type Response as PlaywrightResponse,
+  expect,
+  test,
+} from '@playwright/test'
 import { type Fixture, useCreateEditor, useFixture } from './fixture'
 import {
   expectNoPageError,
@@ -1107,14 +1112,74 @@ function defineTest(f: Fixture) {
     // this need to be verified manually on browser devtools console.
     await page.goto(f.url())
     await waitForHydration(page)
+    const errorResponse = new Promise((resolve) => {
+      page.on('response', async (response) => {
+        if (response.request().method() === 'POST') {
+          resolve(response.status())
+        }
+      })
+    })
     await page.getByRole('button', { name: 'test-server-action-error' }).click()
-    await expect(page.getByText('ErrorBoundary caught')).toBeVisible()
+    await expect(page.getByTestId('action-error-boundary')).toContainText(
+      'ErrorBoundary triggered',
+    )
+    await expect(errorResponse).resolves.toEqual(500)
+    if (f.mode === 'dev') {
+      await expect(page.getByTestId('action-error-boundary')).toContainText(
+        '(Error: boom!)',
+      )
+    } else {
+      await expect(page.getByTestId('action-error-boundary')).toContainText(
+        '(Error: An error occurred in the Server Components render.',
+      )
+    }
     await page.getByRole('button', { name: 'reset-error' }).click()
     await expect(
       page.getByRole('button', { name: 'test-server-action-error' }),
     ).toBeVisible()
   })
 
+  test.describe(() => {
+    test.use({ javaScriptEnabled: false })
+
+    test('server action error @nojs', async ({ page }) => {
+      await page.goto(f.url())
+      const responsePromise = new Promise<PlaywrightResponse>((resolve) => {
+        page.on('response', async (response) => {
+          if (response.request().method() === 'POST') {
+            resolve(response)
+          }
+        })
+      })
+      await page
+        .getByRole('button', { name: 'test-server-action-error' })
+        .click()
+      const response = await responsePromise
+      expect(response.status()).toBe(500)
+      await expect(response.text()).resolves.toBe('Internal Server Error')
+    })
+  })
+
+  test('client error', async ({ page }) => {
+    await page.goto(f.url())
+    await waitForHydration(page)
+    const locator = page.getByTestId('test-client-error')
+    await expect(locator).toHaveText('test-client-error: 0')
+    await locator.click()
+    await expect(locator).toHaveText('test-client-error: 1')
+    await locator.click()
+    await expect(page.getByText('Caught an unexpected error')).toBeVisible()
+    if (f.mode === 'dev') {
+      await expect(
+        page.getByText('Error: Client error triggered'),
+      ).toBeVisible()
+    } else {
+      await expect(page.getByText('Error: (Unknown)')).toBeVisible()
+    }
+    await page.getByRole('button', { name: 'Reset' }).click()
+    await expect(locator).toHaveText('test-client-error: 0')
+  })
+
   test('hydrate while streaming @js', async ({ page }) => {
     // client is interactive before suspense is resolved
     await page.goto(f.url('./?test-suspense=1000'), { waitUntil: 'commit' })

packages/plugin-rsc/examples/basic/src/framework/entry.browser.tsx

@@ -9,6 +9,7 @@ import React from 'react'
 import { hydrateRoot } from 'react-dom/client'
 import { rscStream } from 'rsc-html-stream/client'
 import type { RscPayload } from './entry.rsc'
+import { GlobalErrorBoundary } from './error-boundary'
 
 async function main() {
   // stash `setPayload` function to trigger re-rendering
@@ -61,13 +62,17 @@ async function main() {
       { temporaryReferences },
     )
     setPayload(payload)
-    return payload.returnValue
+    const { ok, data } = payload.returnValue!
+    if (!ok) throw data
+    return data
   })
 
   // hydration
   const browserRoot = (
     <React.StrictMode>
-      <BrowserRoot />
+      <GlobalErrorBoundary>
+        <BrowserRoot />
+      </GlobalErrorBoundary>
     </React.StrictMode>
   )
   hydrateRoot(document, browserRoot, {

packages/plugin-rsc/examples/basic/src/framework/entry.rsc.tsx

@@ -17,7 +17,7 @@ export type RscPayload = {
   // based on your own route conventions.
   root: React.ReactNode
   // server action return value of non-progressive enhancement case
-  returnValue?: unknown
+  returnValue?: { ok: boolean; data: unknown }
   // server action form state (e.g. useActionState) of progressive enhancement case
   formState?: ReactFormState
 }
@@ -36,7 +36,7 @@ export async function handleRequest({
 }): Promise<Response> {
   // handle server function request
   const isAction = request.method === 'POST'
-  let returnValue: unknown | undefined
+  let returnValue: RscPayload['returnValue'] | undefined
   let formState: ReactFormState | undefined
   let temporaryReferences: unknown | undefined
   if (isAction) {
@@ -50,7 +50,12 @@ export async function handleRequest({
       temporaryReferences = createTemporaryReferenceSet()
       const args = await decodeReply(body, { temporaryReferences })
       const action = await loadServerAction(actionId)
-      returnValue = await action.apply(null, args)
+      try {
+        const data = await action.apply(null, args)
+        returnValue = { ok: true, data }
+      } catch (e) {
+        returnValue = { ok: false, data: e }
+      }
     } else {
       // otherwise server function is called via `<form action={...}>`
       // before hydration (e.g. when javascript is disabled).
@@ -77,6 +82,7 @@ export async function handleRequest({
 
   if (isRscRequest) {
     return new Response(rscStream, {
+      status: returnValue?.ok === false ? 500 : undefined,
       headers: {
         'content-type': 'text/x-component;charset=utf-8',
         vary: 'accept',

packages/plugin-rsc/examples/basic/src/framework/error-boundary.tsx

@@ -0,0 +1,81 @@
+'use client'
+
+import React from 'react'
+
+// Minimal ErrorBoundary example to handel errors globally on browser
+export function GlobalErrorBoundary(props: { children?: React.ReactNode }) {
+  return (
+    <ErrorBoundary errorComponent={DefaultGlobalErrorPage}>
+      {props.children}
+    </ErrorBoundary>
+  )
+}
+
+// https://github.com/vercel/next.js/blob/33f8428f7066bf8b2ec61f025427ceb2a54c4bdf/packages/next/src/client/components/error-boundary.tsx
+// https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary
+class ErrorBoundary extends React.Component<{
+  children?: React.ReactNode
+  errorComponent: React.FC<{
+    error: Error
+    reset: () => void
+  }>
+}> {
+  state: { error?: Error } = {}
+
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+
+  reset = () => {
+    this.setState({ error: null })
+  }
+
+  render() {
+    const error = this.state.error
+    if (error) {
+      return <this.props.errorComponent error={error} reset={this.reset} />
+    }
+    return this.props.children
+  }
+}
+
+// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/build/webpack/loaders/next-app-loader.ts#L73
+// https://github.com/vercel/next.js/blob/677c9b372faef680d17e9ba224743f44e1107661/packages/next/src/client/components/error-boundary.tsx#L145
+function DefaultGlobalErrorPage(props: { error: Error; reset: () => void }) {
+  return (
+    <html>
+      <head>
+        <title>Unexpected Error</title>
+      </head>
+      <body
+        style={{
+          height: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          placeContent: 'center',
+          placeItems: 'center',
+          fontSize: '16px',
+          fontWeight: 400,
+          lineHeight: '24px',
+        }}
+      >
+        <p>Caught an unexpected error</p>
+        <pre>
+          Error:{' '}
+          {import.meta.env.DEV && 'message' in props.error
+            ? props.error.message
+            : '(Unknown)'}
+        </pre>
+        <button
+          onClick={() => {
+            React.startTransition(() => {
+              props.reset()
+            })
+          }}
+        >
+          Reset
+        </button>
+      </body>
+    </html>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/action-error/error-boundary.tsx

@@ -2,19 +2,10 @@
 
 import * as React from 'react'
 
-interface Props {
+export default class ErrorBoundary extends React.Component<{
   children?: React.ReactNode
-}
-
-interface State {
-  error: Error | null
-}
-
-export default class ErrorBoundary extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { error: null }
-  }
+}> {
+  state: { error?: Error } = {}
 
   static getDerivedStateFromError(error: Error) {
     return { error }
@@ -23,15 +14,16 @@ export default class ErrorBoundary extends React.Component<Props, State> {
   render() {
     if (this.state.error) {
       return (
-        <div>
-          ErrorBoundary caught '{this.state.error.message}'
+        <div data-testid="action-error-boundary">
+          ErrorBoundary triggered
           <button
             onClick={() => {
               this.setState({ error: null })
             }}
           >
             reset-error
           </button>
+          (<code>Error: {this.state.error.message}</code>)
         </div>
       )
     }

packages/plugin-rsc/examples/basic/src/routes/client-error/client.tsx

@@ -0,0 +1,24 @@
+'use client'
+
+import React from 'react'
+
+export function TestClientError() {
+  const [count, setCount] = React.useState(0)
+
+  React.useEffect(() => {
+    if (count === 2) {
+      throw new Error('Client error triggered')
+    }
+  }, [count])
+
+  return (
+    <button
+      data-testid="test-client-error"
+      onClick={() => {
+        setCount((c) => c + 1)
+      }}
+    >
+      test-client-error: {count}
+    </button>
+  )
+}

packages/plugin-rsc/examples/basic/src/routes/root.tsx

@@ -46,6 +46,7 @@ import { TestHmrClientDep2 } from './hmr-client-dep2/client'
 import { TestHmrClientDep3 } from './hmr-client-dep3/server'
 import { TestChunk2 } from './chunk2/server'
 import { TestUseId } from './use-id/server'
+import { TestClientError } from './client-error/client'
 
 export function Root(props: { url: URL }) {
   return (
@@ -78,6 +79,7 @@ export function Root(props: { url: URL }) {
         <TestHmrSwitchClient />
         <TestTemporaryReference />
         <TestServerActionError />
+        <TestClientError />
         <TestReplayConsoleLogs url={props.url} />
         <TestSuspense url={props.url} />
         <TestActionFromClient />

packages/plugin-rsc/examples/browser-mode/src/framework/entry.browser.tsx

@@ -62,7 +62,9 @@ export async function main() {
       { temporaryReferences },
     )
     setPayload(payload)
-    return payload.returnValue
+    const { ok, data } = payload.returnValue!
+    if (!ok) throw data
+    return data
   })
 
   const browserRoot = (

packages/plugin-rsc/examples/browser-mode/src/framework/entry.rsc.tsx

@@ -14,7 +14,7 @@ import buildServerReferences from 'virtual:vite-rsc-browser-mode/build-server-re
 
 export type RscPayload = {
   root: React.ReactNode
-  returnValue?: unknown
+  returnValue?: { ok: boolean; data: unknown }
   formState?: ReactFormState
 }
 
@@ -38,7 +38,7 @@ export function initialize() {
 
 export async function fetchServer(request: Request): Promise<Response> {
   const isAction = request.method === 'POST'
-  let returnValue: unknown | undefined
+  let returnValue: RscPayload['returnValue'] | undefined
   let formState: ReactFormState | undefined
   let temporaryReferences: unknown | undefined
   if (isAction) {
@@ -51,7 +51,12 @@ export async function fetchServer(request: Request): Promise<Response> {
       temporaryReferences = createTemporaryReferenceSet()
       const args = await decodeReply(body, { temporaryReferences })
       const action = await loadServerAction(actionId)
-      returnValue = await action.apply(null, args)
+      try {
+        const data = await action.apply(null, args)
+        returnValue = { ok: true, data }
+      } catch (e) {
+        returnValue = { ok: false, data: e }
+      }
     } else {
       const formData = await request.formData()
       const decodedAction = await decodeAction(formData)
@@ -65,6 +70,7 @@ export async function fetchServer(request: Request): Promise<Response> {
   const rscStream = renderToReadableStream<RscPayload>(rscPayload, rscOptions)
 
   return new Response(rscStream, {
+    status: returnValue?.ok === false ? 500 : undefined,
     headers: {
       'content-type': 'text/x-component;charset=utf-8',
       vary: 'accept',

packages/plugin-rsc/examples/browser/src/framework/entry.browser.tsx

@@ -65,7 +65,9 @@ async function main() {
       { temporaryReferences },
     )
     setPayload(payload)
-    return payload.returnValue
+    const { ok, data } = payload.returnValue!
+    if (!ok) throw data
+    return data
   })
 
   // hydration