Description
Link to the code that reproduces this issue
https://github.com/knpwrs/nextjs-skew-recovery-bug
To Reproduce
- Run
npm run build
- Run
npm start
- Open
http://localhost:3000
and make sure the browser development tools are open. - Press the
Server Action
button. - Observe logs on the server indicating the function was called.
- The network response has a
200
response code indicating no errors and atext/x-component
mime type. - Shutdown the server, leave the app running in the web browser.
- Rename the
logServer
function inactions.ts
and update the import and usage incomponents.tsx
to match (for instance,logServer
can be renamed tologServer2
). - Run
npm run build
- Run
npm start
- Go to the already running app
- Press the
Server Action
button. - Observe an error on the server:
[Error: Failed to find Server Action "006c3c7b08402d18959b82a9692db1011f32bcc8fd". This request might be from an older or newer deployment. Original error: Cannot read properties of undefined (reading 'workers')]
- There are no errors on the client. Error boundaries do not trigger. There are no uncaught errors in the console. There is no way for the client to know that the function call failed and no way for the client to recover.
- The network response has a
200
response code indicating no errors and atext/html
mime type. - Press the
Throw Error
button. Observe an uncaught error in the console.
Note that I couldn't get error.tsx
or global-error.tsx
to work for either the failed function call or the thrown client-side error.
Current vs. Expected behavior
Currently the client is not able to recover from version skew when a server action cannot be called. Everything appears normal to the client.
I would expect the error boundary to catch an error so the client can refresh and recover.
Provide environment information
Operating System:
Platform: darwin
Arch: arm64
Version: Darwin Kernel Version 24.2.0: Fri Dec 6 19:01:59 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6000
Available memory (MB): 32768
Available CPU cores: 10
Binaries:
Node: 23.6.0
npm: 10.9.2
Yarn: 1.22.19
pnpm: 9.12.2
Relevant Packages:
next: 15.2.0-canary.33 // Latest available version is detected (15.2.0-canary.33).
eslint-config-next: N/A
react: 19.0.0
react-dom: 19.0.0
typescript: 5.7.3
Next.js Config:
output: N/A
Which area(s) are affected? (Select all that apply)
Server Actions, Error Handling
Which stage(s) are affected? (Select all that apply)
next start (local), Other (Deployed), Vercel (Deployed)
Additional context
This is particularly problematic given the following quote from this blog post:
Secure action IDs: Next.js now creates unguessable, non-deterministic IDs to allow the client to reference and call the Server Action. These IDs are periodically recalculated between builds for enhanced security.
I couldn't find any documentation about this. It appears that action IDs can change at any time and clients which haven't refreshed yet won't have any way to deal with this.