mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Janka UrygaandGitHub
2dc45422a1
`unstable_isUnrecognizedActionError` is a new API that lets user code
check if a server action call failed because the action id wasn't
recognized by the server. This usually happens as a result of version
skew between client and server.
Example usage:
```ts
try {
await myServerAction();
} catch (err) {
if (unstable_isUnrecognizedActionError(err)) {
// The client is from a different deployment than the server.
// Reloading the page will fix this mismatch.
window.alert("Please refresh the page and try again");
return;
}
}
```
It can also be used to create a special error boundary, like we do in
the tests added here.
Note that this API is not a complete solution to this problem, as it
doesn't allow handling failures for MPA actions (sent without JS). We
might add a more complete API for this in the future to address that.
60 lines
1.7 KiB
TypeScript
60 lines
1.7 KiB
TypeScript
import * as React from 'react'
|
|
import { FormWithArg, Form, UnrecognizedActionBoundary } from './client'
|
|
|
|
const action = async (...args: any[]) => {
|
|
'use server'
|
|
console.log('hello from server', ...args)
|
|
return 'state-from-server'
|
|
}
|
|
|
|
// simulate client-side version skew by changing the action ID to something the server won't recognize
|
|
setServerActionId(action, 'decafc0ffeebad01')
|
|
|
|
export default function Page() {
|
|
return (
|
|
<div>
|
|
<div>
|
|
<UnrecognizedActionBoundary>
|
|
<Form action={action} />
|
|
</UnrecognizedActionBoundary>
|
|
</div>
|
|
<div>
|
|
<UnrecognizedActionBoundary>
|
|
<FormWithArg
|
|
action={action}
|
|
id="form-simple-argument"
|
|
argument={{ foo: 'bar' }}
|
|
>
|
|
Submit client form with simple argument
|
|
</FormWithArg>
|
|
</UnrecognizedActionBoundary>
|
|
</div>
|
|
<div>
|
|
<UnrecognizedActionBoundary>
|
|
<FormWithArg
|
|
action={action}
|
|
id="form-complex-argument"
|
|
argument={new Map([['foo', Promise.resolve('bar')]])}
|
|
>
|
|
Submit client form with complex argument
|
|
</FormWithArg>
|
|
</UnrecognizedActionBoundary>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function setServerActionId(action: (...args: any[]) => any, id: string) {
|
|
// React implementation detail: `registerServerReference(func, id)` sets `func.$$id = id`.
|
|
const actionWithMetadata = action as typeof action & { $$id?: string }
|
|
if (!actionWithMetadata.$$id) {
|
|
throw new Error(
|
|
`Expected to find server action metadata properties on ${action}`
|
|
)
|
|
}
|
|
Object.defineProperty(actionWithMetadata, '$$id', {
|
|
value: id,
|
|
configurable: true,
|
|
})
|
|
}
|