What does 'Timed out evaluating page function' mean in Remotion?
It looks like a delayRender problem and it is not. The browser stopped responding because it is overloaded. The fix is usually to lower concurrency, not to hunt for an uncleared handle.
Error: Timed out evaluating page function (f, c) => { window.remotion_setFrame(f, c); }Error: Timed out evaluating page function (f, c) => {
window.remotion_setFrame(f, c);
}
What it means
The Remotion renderer tried to send a JavaScript command to the browser and the browser did not respond within the timeout. The timeout is the --timeout flag from v4.0.73, which is 30 seconds by default (it was 5 seconds before that).
This means the browser is hanging because of CPU and memory overload. It does not mean a delayRender() was left uncleared, so do not start there.
Fix
In order:
- Lower the concurrency. More parallel tabs means more contention for the same CPU and memory.
- Measure. Watch the memory and CPU of the render, and add resources if it is simply too heavy for the machine.
- Raise
--timeoutif a frame is legitimately slow. - Look at your own JavaScript. Watch out for infinite loops, and debug the render to find the slow part.
npx remotion render --concurrency=2 --timeout=60000
Find the right concurrency, do not guess
Remotion's performance guide says a concurrency that is too high and one that is too low can both slow a render. Use its benchmark command, which tries different values for you:
npx remotion benchmark
Check it worked
Render with --log=verbose, which lists the slowest frames. The first frames rendered in a thread may be slow because of initialisation, so judge by the rest.
If your frames are slow because of GPU-type effects (WebGL, canvas, box-shadow, filter: blur()) on a cloud instance with no GPU, consider replacing the effect with a precomputed image. See why Remotion renders are slow.
No concurrency setting to tune
This error is a browser overloaded by rendering many frames in parallel, a problem that comes with running the pipeline yourself. GenMotion renders on your own machine from the editor you already have open, so there is no concurrency setting to tune. GenMotion does not render Remotion projects: it builds Three.js and HyperFrames videos. Remotion alternatives, compared honestly.
Related answers
What does 'A delayRender() was called but not cleared after 28000ms' mean in Remotion?
Remotion waited for something to finish before capturing a frame and gave up after about 30 seconds. The causes, in order of how often they bite: continueRender never called, blocked network, too much concurrency, a large OffthreadVideo, rate-limited remote assets.
Why is my Remotion render slow, and why does more concurrency make it worse?
Concurrency is not a dial you turn up. Too high and too low are both slow. Remotion's own performance guide, in order: video tag, concurrency benchmark, GPU effects, slow JavaScript, data fetching, codec, resolution, and Lambda.
Why is my Remotion render stuck, and what do I check first?
A Remotion render that hangs at a percentage, or at the last frame, with no error. Four checks in order: a delayRender longer than your Lambda timeout, verbose logs, Chrome Headless Shell, and the Lambda errors field.
What does 'delayRender "Loading root component" was called but not cleared' mean in Remotion?
This one is not about your code. It means Remotion was pointed at a file that never calls registerRoot(). Pass the right entry point and it goes away.
Sources
This answer as plain Markdown, for agents: /answers/remotion-timed-out-evaluating-page-function.md