renderMedia setConcurrency will throw error

[winner106]

every time when I add concurrency: "80%" will throw error:

Attempting to render: out/video05.mp4
Rendering is 0% complete
K:\next-remotion\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@remotion\renderer\dist\set-props-and-env.js:118
                reject(new Error('Timed out while setting up the headless browser - the browser seems to not respond. This error is thrown to trigger a retry.'));
                       ^
Error: Timed out while setting up the headless browser - the browser seems to not respond. This error is thrown to trigger a retry.
    at Timeout._onTimeout (K:\next-remotion\node_modules\.pnpm\@[email protected][email protected][email protected]\node_modules\@remotion\renderer\dist\set-props-and-env.js:118:24)
    at listOnTimeout (node:internal/timers:564:17)
    at processTimers (node:internal/timers:507:7)
 ELIFECYCLE  Command failed with exit code 1.

when I delete the concurrency setting, everything is good:

[JonnyBurger]

Does it really only happen with this concurrency?

What is happening is that Remotion will open X browser tabs, navigate to the URL and set some local storage.
If this does not respond within 10 seconds, this error is being thrown.

Does this give you more hints?

[winner106]

Thanks for help，but absolutely only when I set concurrency，the error happens.

[JonnyBurger]

I could not verify that it is due to this, but maybe this timeout is set too low.
I increased it in 3.3.102 - can you try with it?

[winner106]

I just tried it, and after using version 3.3.102, no errors occurred, and the rendering process went smoothly. Thank you!

But why did it take so long to wait at this step:

🚀 Attempting to render: out/video04.mp4
➡️ Rendering is 0% complete

my VS Code version info:

Version: 1.79.2 (system setup)
Commit: 695af097c7bd098fbf017ce3ac85e09bbc5dda06
Date: 2023-06-14T08:57:04.379Z
Electron: 22.5.7
Chromium: 108.0.5359.215
Node.js: 16.17.1
V8: 10.8.168.25-electron.0
OS: Windows_NT x64 10.0.22621

[winner106]

@JonnyBurger I have figured out the reason. It was because I loaded multiple fonts (totaling 30MB) in the Root, which resulted in multiple time-consuming requests during rendering. I have resolved this issue by adding Cache-Control in the API route on my server. Thank you again for your help.

export function loadCustomFonts(fontFamilies: FontNamePath[]) {
  const waitForFont = delayRender("loading fonts...");

  const fontPromises = fontFamilies.map(async ({ fontFamily, url }) => {
    const font = new FontFace(fontFamily, `url('${url}') format('truetype')`);
    await font.load();
    document.fonts.add(font);
  });

  Promise.all(fontPromises)
    .then(() => continueRender(waitForFont))
    .catch((err) => console.error("✏️load fonts failed!", err));
}

and the Root Compositions:

loadCustomFonts([
  { fontFamily: "font1", url: "http://localhost:5000/api/assets/fonts/font1.ttf" },
  { fontFamily: "font2", url: "http://localhost:5000/api/assets/fonts/font2.ttf" },
  { fontFamily: "font3", url: "http://localhost:5000/api/assets/fonts/font3.ttf" },
  { fontFamily: "font4", url: "http://localhost:5000/api/assets/fonts/font4.ttf" },
  { fontFamily: "font5", url: "http://localhost:5000/api/assets/fonts/font5.ttf" },
]); 

export default function Compositions() {
  return (
    <>
      <Composition id="video" component={Chart} durationInFrames={120} width={1200} height={1200} fps={60} />
    </>
  );
}

[JonnyBurger]

This is interesting! You are not the only one who got this error before, I guess it all makes sense.
For the next release, I am improving the error message and allowing to customize the timeout using the regular timeoutInMilliseconds option: 692f3d1