Problem
When a <Video> references a file that fails to load (e.g. missing asset, 404), the browser reports a media error. In Remotion Studio the failure is surfaced through the fullscreen error overlay (the #remotion-error-overlay UI), with a message like:
The browser threw an error while playing the video … Code 4 - MEDIA_ELEMENT_ERROR: Format error …
That dominates the whole viewport instead of staying in the preview/canvas area where other composition/runtime errors appear.
Likely cause
MediaPlaybackError is thrown from the <video> element’s error event handler. React error boundaries do not catch errors thrown from native event handlers, so the throw becomes an unhandled exception and is picked up by the Studio runtime error path (e.g. listenToRuntimeErrors → setErrorsRef / fullscreen overlay), rather than the same path used for errors that go through CompositionErrorBoundary and CompositionRenderErrorContext (which drive CanvasOrLoading / ErrorLoader).
Expected / desired behavior
Surface this class of error in the preview panel (same UX as other render errors), e.g. via ErrorLoader and optionally MediaPlaybackErrorExplainer, and avoid taking over the full screen unless that’s intentional for all unhandled errors.
References
Problem
When a
<Video>references a file that fails to load (e.g. missing asset, 404), the browser reports a media error. In Remotion Studio the failure is surfaced through the fullscreen error overlay (the#remotion-error-overlayUI), with a message like:That dominates the whole viewport instead of staying in the preview/canvas area where other composition/runtime errors appear.
Likely cause
MediaPlaybackErroris thrown from the<video>element’serrorevent handler. React error boundaries do not catch errors thrown from native event handlers, so the throw becomes an unhandled exception and is picked up by the Studio runtime error path (e.g.listenToRuntimeErrors→setErrorsRef/ fullscreen overlay), rather than the same path used for errors that go throughCompositionErrorBoundaryandCompositionRenderErrorContext(which driveCanvasOrLoading/ErrorLoader).Expected / desired behavior
Surface this class of error in the preview panel (same UX as other render errors), e.g. via
ErrorLoaderand optionallyMediaPlaybackErrorExplainer, and avoid taking over the full screen unless that’s intentional for all unhandled errors.References
packages/studio/src/error-overlay/remotion-overlay/Overlay.tsx(fullscreen),packages/studio/src/components/CanvasOrLoading.tsx(preview-area errors)