Skip to content

@remotion/studio: Errors inside composition don't go fullscreen anymore#6962

Merged
JonnyBurger merged 2 commits intomainfrom
feature/studio-error-boundary
Apr 1, 2026
Merged

@remotion/studio: Errors inside composition don't go fullscreen anymore#6962
JonnyBurger merged 2 commits intomainfrom
feature/studio-error-boundary

Conversation

@JonnyBurger
Copy link
Copy Markdown
Member

Summary

  • Adds an error boundary around the composition component inside <Composition>'s portal (Studio only)
  • When a composition throws a render error, the error is displayed in the canvas area using the existing ErrorLoader UI, while the rest of the Studio (timeline, sidebar, controls) stays alive
  • React Fast Refresh automatically resets the error boundary when the user fixes the errored component

Closes #6704

Test plan

  • Open the Studio, add an invalid prop (e.g. trimBefore={-20} on a <Video>) to a composition
  • Verify the error shows in the canvas area, not a fullscreen overlay
  • Verify the timeline, sidebar, and controls remain functional
  • Fix the error in code, verify the composition recovers via HMR without a full reload
  • Verify editing an unrelated file does not dismiss the error

🤖 Generated with Claude Code

Instead of the whole app unmounting when a composition throws a render
error, catch it with an error boundary inside <Composition>'s portal.
The error is forwarded via context to CanvasOrLoading which displays it
in the canvas area using the existing ErrorLoader UI. React Fast Refresh
automatically resets the boundary when the errored component is fixed.

Closes #6704

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@vercel
Copy link
Copy Markdown
Contributor

vercel bot commented Apr 1, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
bugs Ready Ready Preview, Comment Apr 1, 2026 2:08pm
remotion Ready Ready Preview, Comment Apr 1, 2026 2:08pm

Request Review

@pullfrog
Copy link
Copy Markdown
Contributor

pullfrog bot commented Apr 1, 2026

Reviewed PR #6962. Submitted feedback on CompositionErrorBoundarycomponentDidUpdate is not called on initial mount, so onClear is never invoked when switching compositions or after HMR recovery until the next re-render. Suggested adding componentDidMount to close the gap.

Task list (5/5 completed)
  • Read the full diff to understand all changes
  • Read each changed file in context
  • Trace data flow and check error boundary logic
  • Check for impact on exports and existing consumers
  • Draft and submit review

Pullfrog  | View workflow run | Triggered by Pullfrog | Using Big Pickle (free) | 𝕏

@JonnyBurger JonnyBurger changed the title Add error boundary for composition rendering in Studio @remotion/studio: Errors inside composition don't go fullscreen anymore Apr 1, 2026
@JonnyBurger JonnyBurger enabled auto-merge April 1, 2026 14:08
@JonnyBurger JonnyBurger merged commit a5a6cc9 into main Apr 1, 2026
18 checks passed
@JonnyBurger JonnyBurger deleted the feature/studio-error-boundary branch April 1, 2026 14:16
Copy link
Copy Markdown
Contributor

@pullfrog pullfrog bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Clean design — two contexts bridge core ↔ studio nicely. One potential correctness issue with the error boundary's clear lifecycle.

Pullfrog  | Fix all ➔Fix 👍s ➔View workflow run | Using Big Pickle (free) | 𝕏

Comment on lines +24 to +28
componentDidUpdate(_prevProps: Props): void {
if (!this.state.hasError) {
this.props.onClear();
}
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

componentDidUpdate is not called on initial mount — only componentDidMount is. This means onClear is never called when:

  1. Switching compositions: the old (errored) boundary unmounts without clearing the error (no componentWillUnmount handler), and the new boundary's first render triggers componentDidMount, not componentDidUpdate. The stale error persists in Editor's state until the new boundary happens to re-render.
  2. HMR recovery: React Fast Refresh remounts error boundaries in an error state, creating a fresh instance. Same issue — componentDidMount fires, not componentDidUpdate.

In practice the gap may be very short (the next child re-render triggers componentDidUpdateonClear), but the error overlay will flash briefly in the canvas between mount and the first update.

Fix: also call onClear in componentDidMount.

componentDidMount(): void {
	if (!this.state.hasError) {
		this.props.onClear();
	}
}

This is cheap (it's a no-op setRenderError(null) when there's no error) and closes the gap.

}

componentDidUpdate(_prevProps: Props): void {
if (!this.state.hasError) {
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Calling onClear on every update when hasError is false (not just the error→clear transition) is noisy — every prop/child re-render triggers it. It's technically harmless since setRenderError(null) bails out when already null, but the previous prevState.hasError && !this.state.hasError check was more precise. Was there a specific reason for broadening this? If it was to handle the HMR recovery case, componentDidMount (see above) would be a more targeted fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Can we provide a better error recovery in the studio?

1 participant