@remotion/renderer 4.0.0-alpha.4 → 4.0.0-alpha4

package/dist/puppeteer-evaluate.js

@@ -99,18 +99,26 @@ async function puppeteerEvaluateWithCatch({ page, pageFunction, frame, args, })
             error.message += ' Are you passing a nested JSHandle?';
         throw error;
     }
-    const { exceptionDetails, result: remoteObject } = await callFunctionOnPromise;
-    if (exceptionDetails) {
-        const err = new symbolicateable_error_1.SymbolicateableError({
-            stack: (_c = exceptionDetails.exception) === null || _c === void 0 ? void 0 : _c.description,
-            name: (_d = exceptionDetails.exception) === null || _d === void 0 ? void 0 : _d.className,
-            message: (_f = (_e = exceptionDetails.exception) === null || _e === void 0 ? void 0 : _e.description) === null || _f === void 0 ? void 0 : _f.split('\n')[0],
-            frame,
-            stackFrame: (0, parse_browser_error_stack_1.parseStack)(((_g = exceptionDetails.exception) === null || _g === void 0 ? void 0 : _g.description).split('\n')),
-        });
-        throw err;
+    try {
+        const { exceptionDetails, result: remoteObject } = await callFunctionOnPromise;
+        if (exceptionDetails) {
+            const err = new symbolicateable_error_1.SymbolicateableError({
+                stack: (_c = exceptionDetails.exception) === null || _c === void 0 ? void 0 : _c.description,
+                name: (_d = exceptionDetails.exception) === null || _d === void 0 ? void 0 : _d.className,
+                message: (_f = (_e = exceptionDetails.exception) === null || _e === void 0 ? void 0 : _e.description) === null || _f === void 0 ? void 0 : _f.split('\n')[0],
+                frame,
+                stackFrame: (0, parse_browser_error_stack_1.parseStack)(((_g = exceptionDetails.exception) === null || _g === void 0 ? void 0 : _g.description).split('\n')),
+            });
+            throw err;
+        }
+        return valueFromRemoteObject(remoteObject);
+    }
+    catch (error) {
+        if (error === null || error === void 0 ? void 0 : error.originalMessage.startsWith("Object couldn't be returned by value")) {
+            throw new Error('Could not serialize the return value of the function. Did you pass non-serializable values to defaultProps?');
+        }
+        throw error;
     }
-    return valueFromRemoteObject(remoteObject);
 }
 exports.puppeteerEvaluateWithCatch = puppeteerEvaluateWithCatch;
 /**

package/dist/puppeteer-screenshot.d.ts

@@ -1,4 +1,13 @@
 /// <reference types="node" />
+import type { ClipRegion } from 'remotion';
 import type { Page } from './browser/BrowserPage';
-import type { ScreenshotOptions } from './browser/ScreenshotOptions';
-export declare const screenshot: (page: Page, options: ScreenshotOptions) => Promise<Buffer | string | void>;
+export declare const screenshot: (options: {
+    page: Page;
+    type: 'png' | 'jpeg';
+    path?: string;
+    quality?: number;
+    omitBackground: boolean;
+    width: number;
+    height: number;
+    clipRegion: ClipRegion | null;
+}) => Promise<Buffer | string>;

package/dist/puppeteer-screenshot.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.screenshot = void 0;
 const assert = __importStar(require("assert"));
 const screenshot_task_1 = require("./screenshot-task");
-const screenshot = (page, options) => {
+const screenshot = (options) => {
     let screenshotType = null;
     // options.type takes precedence over inferring the type from options.path
     // because it may be a 0-length file with no extension created beforehand
@@ -58,18 +58,15 @@ const screenshot = (page, options) => {
         assert.ok(options.quality >= 0 && options.quality <= 100, 'Expected options.quality to be between 0 and 100 (inclusive), got ' +
             options.quality);
     }
-    if (options.clip) {
-        assert.ok(typeof options.clip.x === 'number', 'Expected options.clip.x to be a number but found ' +
-            typeof options.clip.x);
-        assert.ok(typeof options.clip.y === 'number', 'Expected options.clip.y to be a number but found ' +
-            typeof options.clip.y);
-        assert.ok(typeof options.clip.width === 'number', 'Expected options.clip.width to be a number but found ' +
-            typeof options.clip.width);
-        assert.ok(typeof options.clip.height === 'number', 'Expected options.clip.height to be a number but found ' +
-            typeof options.clip.height);
-        assert.ok(options.clip.width !== 0, 'Expected options.clip.width not to be 0.');
-        assert.ok(options.clip.height !== 0, 'Expected options.clip.height not to be 0.');
-    }
-    return page.screenshotTaskQueue.postTask(() => (0, screenshot_task_1._screenshotTask)(page, screenshotType, options));
+    return options.page.screenshotTaskQueue.postTask(() => (0, screenshot_task_1.screenshotTask)({
+        page: options.page,
+        format: screenshotType,
+        height: options.height,
+        width: options.width,
+        omitBackground: options.omitBackground,
+        path: options.path,
+        quality: options.quality,
+        clipRegion: options.clipRegion,
+    }));
 };
 exports.screenshot = screenshot;

package/dist/redirect-status-codes.d.ts

@@ -0,0 +1 @@
+export declare const redirectStatusCodes: number[];

package/dist/redirect-status-codes.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.redirectStatusCodes = void 0;
+// Don't handle 304 status code (Not Modified) as a redirect,
+// since the browser will display the right page.
+exports.redirectStatusCodes = [301, 302, 303, 307, 308];

package/dist/render-frames.d.ts

@@ -20,14 +20,21 @@ declare type ConfigOrComposition = {
 } | {
     composition: SmallTCompMetadata;
 };
+declare type ConcurrencyOrParallelism = {
+    concurrency?: number | string | null;
+} | {
+    /**
+     * @deprecated This field has been renamed to `concurrency`
+     */
+    parallelism?: number | null;
+};
 declare type RenderFramesOptions = {
     onStart: (data: OnStartData) => void;
-    onFrameUpdate: (framesRendered: number, frameIndex: number) => void;
+    onFrameUpdate: (framesRendered: number, frameIndex: number, timeToRenderInMilliseconds: number) => void;
     outputDir: string | null;
     inputProps: unknown;
     envVariables?: Record<string, string>;
     imageFormat: ImageFormat;
-    parallelism?: number | null;
     quality?: number;
     frameRange?: FrameRange | null;
     everyNthFrame?: number;
@@ -48,6 +55,11 @@ declare type RenderFramesOptions = {
      * @deprecated Only for Remotion internal usage
      */
     downloadMap?: DownloadMap;
-} & ConfigOrComposition & ServeUrlOrWebpackBundle;
+    muted?: boolean;
+} & ConfigOrComposition & ConcurrencyOrParallelism & ServeUrlOrWebpackBundle;
+/**
+ * @description Renders a series of images using Puppeteer and computes information for mixing audio.
+ * @see [Documentation](https://www.remotion.dev/docs/renderer/render-frames)
+ */
 export declare const renderFrames: (options: RenderFramesOptions) => Promise<RenderFramesOutput>;
 export {};

package/dist/render-frames.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.renderFrames = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
+const perf_hooks_1 = require("perf_hooks");
 const remotion_1 = require("remotion");
 const download_and_map_assets_to_file_1 = require("./assets/download-and-map-assets-to-file");
 const download_map_1 = require("./assets/download-map");
@@ -13,23 +14,27 @@ const browser_1 = require("./browser");
 const compress_assets_1 = require("./compress-assets");
 const cycle_browser_tabs_1 = require("./cycle-browser-tabs");
 const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
+const find_closest_package_json_1 = require("./find-closest-package-json");
 const get_concurrency_1 = require("./get-concurrency");
 const get_duration_from_frame_range_1 = require("./get-duration-from-frame-range");
 const get_frame_padded_index_1 = require("./get-frame-padded-index");
 const get_frame_to_render_1 = require("./get-frame-to-render");
 const image_format_1 = require("./image-format");
 const legacy_webpack_config_1 = require("./legacy-webpack-config");
+const make_cancel_signal_1 = require("./make-cancel-signal");
 const open_browser_1 = require("./open-browser");
 const perf_1 = require("./perf");
 const pool_1 = require("./pool");
 const prepare_server_1 = require("./prepare-server");
-const provide_screenshot_1 = require("./provide-screenshot");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const quality_1 = require("./quality");
+const replace_browser_1 = require("./replace-browser");
 const seek_to_frame_1 = require("./seek-to-frame");
 const set_props_and_env_1 = require("./set-props-and-env");
+const take_frame_and_compose_1 = require("./take-frame-and-compose");
 const truthy_1 = require("./truthy");
 const validate_scale_1 = require("./validate-scale");
+const MAX_RETRIES_PER_FRAME = 1;
 const getComposition = (others) => {
     if ('composition' in others) {
         return others.composition;
@@ -39,15 +44,16 @@ const getComposition = (others) => {
     }
     return undefined;
 };
-const getPool = async (pages) => {
-    const puppeteerPages = await Promise.all(pages);
-    const pool = new pool_1.Pool(puppeteerPages);
-    return pool;
-};
-const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, quality, imageFormat = image_format_1.DEFAULT_IMAGE_FORMAT, frameRange, puppeteerInstance, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale, actualParallelism, everyNthFrame = 1, proxyPort, cancelSignal, downloadMap, }) => {
-    if (!puppeteerInstance) {
-        throw new Error('no puppeteer instance passed to innerRenderFrames - internal error');
+const getConcurrency = (others) => {
+    if ('concurrency' in others) {
+        return others.concurrency;
+    }
+    if ('parallelism' in others) {
+        return others.parallelism;
     }
+    return undefined;
+};
+const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, quality, imageFormat = image_format_1.DEFAULT_IMAGE_FORMAT, frameRange, onError, envVariables, onBrowserLog, onFrameBuffer, onDownload, pagesArray, serveUrl, composition, timeoutInMilliseconds, scale = 1, actualConcurrency, everyNthFrame = 1, proxyPort, cancelSignal, downloadMap, muted, makeBrowser, browserReplacer, }) => {
     if (outputDir) {
         if (!fs_1.default.existsSync(outputDir)) {
             fs_1.default.mkdirSync(outputDir, {
@@ -59,8 +65,8 @@ const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, qual
     const realFrameRange = (0, get_frame_to_render_1.getRealFrameRange)(composition.durationInFrames, frameRange !== null && frameRange !== void 0 ? frameRange : null);
     const framesToRender = (0, get_duration_from_frame_range_1.getFramesToRender)(realFrameRange, everyNthFrame);
     const lastFrame = framesToRender[framesToRender.length - 1];
-    const pages = new Array(actualParallelism).fill(true).map(async () => {
-        const page = await puppeteerInstance.newPage();
+    const makePage = async () => {
+        const page = await browserReplacer.getBrowser().newPage();
         pagesArray.push(page);
         await page.setViewport({
             width: composition.width,
@@ -87,21 +93,42 @@ const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, qual
             timeoutInMilliseconds,
             proxyPort,
             retriesRemaining: 2,
+            audioEnabled: !muted,
+            videoEnabled: imageFormat !== 'none',
         });
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
-            pageFunction: (id) => {
+            // eslint-disable-next-line max-params
+            pageFunction: (id, defaultProps, durationInFrames, fps, height, width) => {
                 window.setBundleMode({
                     type: 'composition',
                     compositionName: id,
+                    compositionDefaultProps: defaultProps,
+                    compositionDurationInFrames: durationInFrames,
+                    compositionFps: fps,
+                    compositionHeight: height,
+                    compositionWidth: width,
                 });
             },
-            args: [composition.id],
+            args: [
+                composition.id,
+                composition.defaultProps,
+                composition.durationInFrames,
+                composition.fps,
+                composition.height,
+                composition.width,
+            ],
             frame: null,
             page,
         });
         page.off('console', logCallback);
         return page;
-    });
+    };
+    const getPool = async () => {
+        const pages = new Array(actualConcurrency).fill(true).map(() => makePage());
+        const puppeteerPages = await Promise.all(pages);
+        const pool = new pool_1.Pool(puppeteerPages);
+        return pool;
+    };
     // If rendering a GIF and skipping frames, we must ensure it starts from 0
     // and then is consecutive so FFMPEG recognizes the sequence
     const countType = everyNthFrame === 1 ? 'actual-frames' : 'from-zero';
@@ -111,7 +138,7 @@ const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, qual
         countType,
     });
     let framesRendered = 0;
-    const poolPromise = getPool(pages);
+    const poolPromise = getPool();
     onStart({
         frameCount: framesToRender.length,
     });
@@ -120,14 +147,15 @@ const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, qual
     cancelSignal === null || cancelSignal === void 0 ? void 0 : cancelSignal(() => {
         stopped = true;
     });
-    const progress = Promise.all(framesToRender.map(async (frame, index) => {
+    const renderFrameWithOptionToReject = async ({ frame, index, reject, width, height, }) => {
         const pool = await poolPromise;
         const freePage = await pool.acquire();
         if (stopped) {
-            throw new Error('Render was stopped');
+            return reject(new Error('Render was stopped'));
         }
+        const startTime = perf_hooks_1.performance.now();
         const errorCallbackOnFrame = (err) => {
-            onError(err);
+            reject(err);
         };
         const cleanupPageError = (0, handle_javascript_exception_1.handleJavascriptException)({
             page: freePage,
@@ -136,52 +164,40 @@ const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, qual
         });
         freePage.on('error', errorCallbackOnFrame);
         await (0, seek_to_frame_1.seekToFrame)({ frame, page: freePage });
-        if (imageFormat !== 'none') {
-            if (onFrameBuffer) {
-                const id = (0, perf_1.startPerfMeasure)('save');
-                const buffer = await (0, provide_screenshot_1.provideScreenshot)({
-                    page: freePage,
-                    imageFormat,
-                    quality,
-                    options: {
-                        frame,
-                        output: null,
-                    },
-                });
-                (0, perf_1.stopPerfMeasure)(id);
-                onFrameBuffer(buffer, frame);
-            }
-            else {
-                if (!outputDir) {
-                    throw new Error('Called renderFrames() without specifying either `outputDir` or `onFrameBuffer`');
-                }
-                const output = path_1.default.join(outputDir, (0, get_frame_padded_index_1.getFrameOutputFileName)({
-                    frame,
-                    imageFormat,
-                    index,
-                    countType,
-                    lastFrame,
-                    totalFrames: framesToRender.length,
-                }));
-                await (0, provide_screenshot_1.provideScreenshot)({
-                    page: freePage,
-                    imageFormat,
-                    quality,
-                    options: {
-                        frame,
-                        output,
-                    },
-                });
-            }
+        if (!outputDir && !onFrameBuffer && imageFormat !== 'none') {
+            throw new Error('Called renderFrames() without specifying either `outputDir` or `onFrameBuffer`');
         }
-        const collectedAssets = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
-            pageFunction: () => {
-                return window.remotion_collectAssets();
-            },
-            args: [],
+        if (outputDir && onFrameBuffer && imageFormat !== 'none') {
+            throw new Error('Pass either `outputDir` or `onFrameBuffer` to renderFrames(), not both.');
+        }
+        const id = (0, perf_1.startPerfMeasure)('save');
+        const frameDir = outputDir !== null && outputDir !== void 0 ? outputDir : downloadMap.compositingDir;
+        const { buffer, collectedAssets } = await (0, take_frame_and_compose_1.takeFrameAndCompose)({
             frame,
-            page: freePage,
+            freePage,
+            height,
+            imageFormat,
+            output: path_1.default.join(frameDir, (0, get_frame_padded_index_1.getFrameOutputFileName)({
+                frame,
+                imageFormat,
+                index,
+                countType,
+                lastFrame,
+                totalFrames: framesToRender.length,
+            })),
+            quality,
+            width,
+            scale,
+            downloadMap,
+            wantsBuffer: Boolean(onFrameBuffer),
         });
+        if (onFrameBuffer) {
+            if (!buffer) {
+                throw new Error('unexpected null buffer');
+            }
+            onFrameBuffer(buffer, frame);
+        }
+        (0, perf_1.stopPerfMeasure)(id);
         const compressedAssets = collectedAssets.map((asset) => (0, compress_assets_1.compressAsset)(assets.filter(truthy_1.truthy).flat(1), asset));
         assets[index] = compressedAssets;
         compressedAssets.forEach((asset) => {
@@ -193,19 +209,71 @@ const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, qual
                 onError(new Error(`Error while downloading asset: ${err.stack}`));
             });
         });
-        pool.release(freePage);
         framesRendered++;
-        onFrameUpdate(framesRendered, frame);
+        onFrameUpdate(framesRendered, frame, perf_hooks_1.performance.now() - startTime);
         cleanupPageError();
         freePage.off('error', errorCallbackOnFrame);
-        return compressedAssets;
-    }));
+        pool.release(freePage);
+    };
+    const renderFrame = (frame, index) => {
+        return new Promise((resolve, reject) => {
+            renderFrameWithOptionToReject({
+                frame,
+                index,
+                reject,
+                width: composition.width,
+                height: composition.height,
+            })
+                .then(() => {
+                resolve();
+            })
+                .catch((err) => {
+                reject(err);
+            });
+        });
+    };
+    const renderFrameAndRetryTargetClose = async (frame, index, retriesLeft, attempt) => {
+        var _a, _b;
+        try {
+            await renderFrame(frame, index);
+        }
+        catch (err) {
+            if (!((_a = err === null || err === void 0 ? void 0 : err.message) === null || _a === void 0 ? void 0 : _a.includes('Target closed')) &&
+                !((_b = err === null || err === void 0 ? void 0 : err.message) === null || _b === void 0 ? void 0 : _b.includes('Session closed'))) {
+                throw err;
+            }
+            if ((0, make_cancel_signal_1.isUserCancelledRender)(err)) {
+                throw err;
+            }
+            if (stopped) {
+                return;
+            }
+            if (retriesLeft === 0) {
+                console.warn(`The browser crashed ${attempt} times while rendering frame ${frame}. Not retrying anymore. Learn more about this error under https://www.remotion.dev/docs/target-closed`);
+                throw err;
+            }
+            console.warn(`The browser crashed while rendering frame ${frame}, retrying ${retriesLeft} more times. Learn more about this error under https://www.remotion.dev/docs/target-closed`);
+            await browserReplacer.replaceBrowser(makeBrowser, async () => {
+                const pages = new Array(actualConcurrency)
+                    .fill(true)
+                    .map(() => makePage());
+                const puppeteerPages = await Promise.all(pages);
+                const pool = await poolPromise;
+                for (const newPage of puppeteerPages) {
+                    pool.release(newPage);
+                }
+            });
+            await renderFrameAndRetryTargetClose(frame, index, retriesLeft - 1, attempt + 1);
+        }
+    };
+    const progress = Promise.all(framesToRender.map((frame, index) => renderFrameAndRetryTargetClose(frame, index, MAX_RETRIES_PER_FRAME, 1)));
     const happyPath = progress.then(() => {
+        const firstFrameIndex = countType === 'from-zero' ? 0 : framesToRender[0];
         const returnValue = {
             assetsInfo: {
                 assets,
                 imageSequenceName: `element-%0${filePadLength}d.${imageFormat}`,
-                firstFrameIndex: framesToRender[0],
+                firstFrameIndex,
                 downloadMap,
             },
             frameCount: framesToRender.length,
@@ -218,35 +286,51 @@ const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, qual
     })
         .then(() => happyPath);
 };
+/**
+ * @description Renders a series of images using Puppeteer and computes information for mixing audio.
+ * @see [Documentation](https://www.remotion.dev/docs/renderer/render-frames)
+ */
 const renderFrames = (options) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c;
     const composition = getComposition(options);
+    const concurrency = getConcurrency(options);
     if (!composition) {
         throw new Error('No `composition` option has been specified for renderFrames()');
     }
     remotion_1.Internals.validateDimension(composition.height, 'height', 'in the `config` object passed to `renderFrames()`');
     remotion_1.Internals.validateDimension(composition.width, 'width', 'in the `config` object passed to `renderFrames()`');
     remotion_1.Internals.validateFps(composition.fps, 'in the `config` object of `renderFrames()`', false);
-    remotion_1.Internals.validateDurationInFrames(composition.durationInFrames, 'in the `config` object passed to `renderFrames()`');
+    remotion_1.Internals.validateDurationInFrames({
+        durationInFrames: composition.durationInFrames,
+        component: 'in the `config` object passed to `renderFrames()`',
+        allowFloats: false,
+    });
     if (options.quality !== undefined && options.imageFormat !== 'jpeg') {
         throw new Error("You can only pass the `quality` option if `imageFormat` is 'jpeg'.");
     }
     const selectedServeUrl = (0, legacy_webpack_config_1.getServeUrlWithFallback)(options);
     (0, quality_1.validateQuality)(options.quality);
     (0, validate_scale_1.validateScale)(options.scale);
-    const browserInstance = (_a = options.puppeteerInstance) !== null && _a !== void 0 ? _a : (0, open_browser_1.openBrowser)(browser_1.DEFAULT_BROWSER, {
-        shouldDumpIo: options.dumpBrowserLogs,
-        browserExecutable: options.browserExecutable,
-        chromiumOptions: options.chromiumOptions,
-        forceDeviceScaleFactor: (_b = options.scale) !== null && _b !== void 0 ? _b : 1,
-    });
-    const downloadMap = (_c = options.downloadMap) !== null && _c !== void 0 ? _c : (0, download_map_1.makeDownloadMap)();
-    const onDownload = (_d = options.onDownload) !== null && _d !== void 0 ? _d : (() => () => undefined);
-    const actualParallelism = (0, get_concurrency_1.getActualConcurrency)((_e = options.parallelism) !== null && _e !== void 0 ? _e : null);
+    const makeBrowser = () => {
+        var _a;
+        return (0, open_browser_1.openBrowser)(browser_1.DEFAULT_BROWSER, {
+            shouldDumpIo: options.dumpBrowserLogs,
+            browserExecutable: options.browserExecutable,
+            chromiumOptions: options.chromiumOptions,
+            forceDeviceScaleFactor: (_a = options.scale) !== null && _a !== void 0 ? _a : 1,
+        });
+    };
+    const browserInstance = (_a = options.puppeteerInstance) !== null && _a !== void 0 ? _a : makeBrowser();
+    const downloadMap = (_b = options.downloadMap) !== null && _b !== void 0 ? _b : (0, download_map_1.makeDownloadMap)();
+    const onDownload = (_c = options.onDownload) !== null && _c !== void 0 ? _c : (() => () => undefined);
+    const actualConcurrency = (0, get_concurrency_1.getActualConcurrency)(concurrency !== null && concurrency !== void 0 ? concurrency : null);
     const openedPages = [];
     return new Promise((resolve, reject) => {
         var _a, _b, _c;
         const cleanup = [];
+        if (!options.downloadMap) {
+            cleanup.push(() => (0, download_map_1.cleanDownloadMap)(downloadMap));
+        }
         const onError = (err) => {
             reject(err);
         };
@@ -254,7 +338,7 @@ const renderFrames = (options) => {
             new Promise((_, rej) => {
                 var _a;
                 (_a = options.cancelSignal) === null || _a === void 0 ? void 0 : _a.call(options, () => {
-                    rej(new Error('renderFrames() got cancelled'));
+                    rej(new Error(make_cancel_signal_1.cancelErrorMessages.renderFrames));
                 });
             }),
             Promise.all([
@@ -266,12 +350,14 @@ const renderFrames = (options) => {
                     ffprobeExecutable: (_b = options.ffprobeExecutable) !== null && _b !== void 0 ? _b : null,
                     port: (_c = options.port) !== null && _c !== void 0 ? _c : null,
                     downloadMap,
+                    remotionRoot: (0, find_closest_package_json_1.findRemotionRoot)(),
                 }),
                 browserInstance,
             ]).then(([{ serveUrl, closeServer, offthreadPort }, puppeteerInstance]) => {
-                const { stopCycling } = (0, cycle_browser_tabs_1.cycleBrowserTabs)(puppeteerInstance, actualParallelism);
+                const browserReplacer = (0, replace_browser_1.handleBrowserCrash)(puppeteerInstance);
+                const { stopCycling } = (0, cycle_browser_tabs_1.cycleBrowserTabs)(browserReplacer, actualConcurrency);
                 cleanup.push(stopCycling);
-                cleanup.push(closeServer);
+                cleanup.push(() => closeServer(false));
                 return innerRenderFrames({
                     ...options,
                     puppeteerInstance,
@@ -279,10 +365,12 @@ const renderFrames = (options) => {
                     pagesArray: openedPages,
                     serveUrl,
                     composition,
-                    actualParallelism,
+                    actualConcurrency,
                     onDownload,
                     proxyPort: offthreadPort,
                     downloadMap,
+                    makeBrowser,
+                    browserReplacer,
                 });
             }),
         ])
@@ -296,16 +384,20 @@ const renderFrames = (options) => {
             // If new browser was opened, then closing the browser as a cleanup.
             if (options.puppeteerInstance) {
                 Promise.all(openedPages.map((p) => p.close())).catch((err) => {
-                    console.log('Unable to close browser tab', err);
+                    if (!(err === null || err === void 0 ? void 0 : err.message.includes('Target closed'))) {
+                        console.log('Unable to close browser tab', err);
+                    }
                 });
             }
             else {
                 Promise.resolve(browserInstance)
                     .then((puppeteerInstance) => {
-                    return puppeteerInstance.close();
+                    return puppeteerInstance.close(true);
                 })
                     .catch((err) => {
-                    console.log('Unable to close browser', err);
+                    if (!(err === null || err === void 0 ? void 0 : err.message.includes('Target closed'))) {
+                        console.log('Unable to close browser', err);
+                    }
                 });
             }
             cleanup.forEach((c) => {