{"record":{"id":"bd1e8cab3c5adb09","repo":"remotion-dev/remotion","slug":"failed-to-render-gif-with-source-src-error-bd1e8c","errorCode":null,"errorMessage":"Failed to render GIF with source ${src}: \"${error.message}\".","messagePattern":"Failed to render GIF with source (.+?): \"(.+?)\"\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/gif/src/GifForDevelopment.tsx","lineNumber":115,"sourceCode":"\t\t\t\t});\n\n\t\t\treturn () => {\n\t\t\t\tif (!done) {\n\t\t\t\t\taborted = true;\n\t\t\t\t\tcancel();\n\t\t\t\t}\n\t\t\t};\n\t\t}, [cacheKey, resolvedSrc]);\n\n\t\tif (error) {\n\t\t\tconsole.error(error.stack);\n\t\t\tif (isCorsError(error)) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Failed to render GIF with source ${src}: \"${error.message}\". You must enable CORS for this URL. Open the Developer Tools to see exactly why this fetch failed.`,\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tthrow new Error(\n\t\t\t\t`Failed to render GIF with source ${src}: \"${error.message}\".`,\n\t\t\t);\n\t\t}\n\n\t\tconst index = useCurrentGifIndex({\n\t\t\tdelays: state.delays,\n\t\t\tloopBehavior,\n\t\t\tplaybackRate,\n\t\t});\n\n\t\tif (index === -1) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<Canvas\n\t\t\t\tfit={fit}\n\t\t\t\tindex={index}","sourceCodeStart":97,"sourceCodeEnd":133,"githubUrl":"https://github.com/remotion-dev/remotion/blob/78fe4bb3fdb5a2cd68724393d63cb223db333fa7/packages/gif/src/GifForDevelopment.tsx#L97-L133","documentation":"Thrown by the @remotion/gif <Gif> component (GifForDevelopment, used in Remotion Studio) when fetching or decoding the GIF failed for any reason OTHER than CORS. The component logs `error.stack` to the console and re-throws the original message wrapped with the `src`. It indicates the URL was reachable-or-unreachable but the response could not be turned into a usable GIF.","triggerScenarios":"`<Gif src=\"...\" />` where the URL returns HTTP 404/403/500, the response body is not valid GIF data (corrupt or a different format served with the wrong extension), the network is down, or the GIF parser rejects the bytes.","commonSituations":"Typo in the `src` URL pointing to a non-existent file; the remote server is temporarily down; a build process copied a non-GIF file with a .gif extension; the asset moved or was deleted between environments; an aborted fetch because the component unmounted mid-load.","solutions":["Open `src` directly in a browser to confirm it loads and is a valid GIF.","Check the console (the full `error.stack` is logged just before the throw) for the underlying cause such as a 404 or parse error.","Verify the URL is correct and the host returns HTTP 200 with image/gif content.","If the file is local, confirm it lives under `public/` and is referenced via `staticFile()`."],"exampleFix":"// before\n<Gif src=\"https://example.com/missing-file.gif\" />\n\n// after\n<Gif src={staticFile('confirmed-existing.gif')} />","handlingStrategy":"validation","validationCode":"// Validate the URL returns a 2xx image/gif before mounting the component.\nasync function gifIsReachable(url: string): Promise<boolean> {\n  try {\n    const res = await fetch(url, {method: 'HEAD'});\n    return res.ok && /image\\/(gif|webp)/.test(res.headers.get('content-type') ?? '');\n  } catch {\n    return false;\n  }\n}","typeGuard":null,"tryCatchPattern":"import {Component, type ReactNode} from 'react';\n\nclass GifBoundary extends Component<{children: ReactNode; fallback: ReactNode}, {hasError: boolean}> {\n  state = {hasError: false};\n  static getDerivedStateFromError() { return {hasError: true}; }\n  componentDidCatch(err: Error) { console.error('Gif failed:', err.message); }\n  render() { return this.state.hasError ? this.props.fallback : this.props.children; }\n}\n\n// <GifBoundary fallback={<div>Asset unavailable</div>}><Gif src={src} /></GifBoundary>","preventionTips":["Open the GIF URL in a browser before referencing it.","Use staticFile() for local assets to remove network as a failure source.","Wrap <Gif> in an ErrorBoundary so a broken asset shows a fallback instead of crashing Studio."],"tags":["gif","network","studio","fetch"],"backgroundTag":null,"analyzedSha":"78fe4bb3fdb5a2cd68724393d63cb223db333fa7","analyzedAt":"2026-08-12T17:18:50.444Z","schemaVersion":2},"datasetVersion":"2026-08-12T18:17:37.767Z"}