From 8b02df1d815ffcbcd62a29bfc7fb6916c90ceeb7 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Tue, 20 Aug 2024 19:39:32 -0700 Subject: [PATCH] [Flight] use microtask for scheduling during prerenders In https://github.com/facebook/react/pull/29491 I updated the work scheduler for Flight to use microtasks to perform work when something pings. This is useful but it does have some downsides in terms of our ability to do task prioritization. Additionally the initial work is not instantiated using a microtask which is inconsistent with how pings work. In this change I update the scheduling logic to use microtasks consistently for prerenders and use regular tasks for renders both for the initial work and pings. --- .../ReactInternalTestUtils.js | 2 +- packages/internal-test-utils/internalAct.js | 87 +++++++++++++++++++ .../src/__tests__/ReactFlightDOMEdge-test.js | 9 +- .../react-server/src/ReactFlightServer.js | 24 ++++- 4 files changed, 109 insertions(+), 13 deletions(-) diff --git a/packages/internal-test-utils/ReactInternalTestUtils.js b/packages/internal-test-utils/ReactInternalTestUtils.js index 4d2fa37890850..317a07262c5ad 100644 --- a/packages/internal-test-utils/ReactInternalTestUtils.js +++ b/packages/internal-test-utils/ReactInternalTestUtils.js @@ -16,7 +16,7 @@ import { clearErrors, createLogAssertion, } from './consoleMock'; -export {act} from './internalAct'; +export {act, serverAct} from './internalAct'; const {assertConsoleLogsCleared} = require('internal-test-utils/consoleMock'); import {thrownErrors, actingUpdatesScopeDepth} from './internalAct'; diff --git a/packages/internal-test-utils/internalAct.js b/packages/internal-test-utils/internalAct.js index 22bb92c24fc26..66fa324984507 100644 --- a/packages/internal-test-utils/internalAct.js +++ b/packages/internal-test-utils/internalAct.js @@ -192,3 +192,90 @@ export async function act(scope: () => Thenable): Thenable { } } } + +export async function serverAct(scope: () => Thenable): Thenable { + // We require every `act` call to assert console logs + // with one of the assertion helpers. Fails if not empty. + assertConsoleLogsCleared(); + + // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object + if (!jest.isMockFunction(setTimeout)) { + throw Error( + "This version of `act` requires Jest's timer mocks " + + '(i.e. jest.useFakeTimers).', + ); + } + + // Create the error object before doing any async work, to get a better + // stack trace. + const error = new Error(); + Error.captureStackTrace(error, act); + + // Call the provided scope function after an async gap. This is an extra + // precaution to ensure that our tests do not accidentally rely on the act + // scope adding work to the queue synchronously. We don't do this in the + // public version of `act`, though we maybe should in the future. + await waitForMicrotasks(); + + const errorHandlerNode = function (err: mixed) { + thrownErrors.push(err); + }; + // We track errors that were logged globally as if they occurred in this scope and then rethrow them. + if (typeof process === 'object') { + // Node environment + process.on('uncaughtException', errorHandlerNode); + } else if ( + typeof window === 'object' && + typeof window.addEventListener === 'function' + ) { + throw new Error('serverAct is not supported in JSDOM environments'); + } + + try { + const result = await scope(); + + do { + // Wait until end of current task/microtask. + await waitForMicrotasks(); + + // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object + if (jest.isEnvironmentTornDown()) { + error.message = + 'The Jest environment was torn down before `act` completed. This ' + + 'probably means you forgot to `await` an `act` call.'; + throw error; + } + + // $FlowFixMe[cannot-resolve-name]: Flow doesn't know about global Jest object + const j = jest; + if (j.getTimerCount() > 0) { + // There's a pending timer. Flush it now. We only do this in order to + // force Suspense fallbacks to display; the fact that it's a timer + // is an implementation detail. If there are other timers scheduled, + // those will also fire now, too, which is not ideal. (The public + // version of `act` doesn't do this.) For this reason, we should try + // to avoid using timers in our internal tests. + j.runOnlyPendingTimers(); + // If a committing a fallback triggers another update, it might not + // get scheduled until a microtask. So wait one more time. + await waitForMicrotasks(); + } else { + break; + } + } while (true); + + if (thrownErrors.length > 0) { + // Rethrow any errors logged by the global error handling. + const thrownError = aggregateErrors(thrownErrors); + thrownErrors.length = 0; + throw thrownError; + } + + return result; + } finally { + if (typeof process === 'object') { + // Node environment + process.off('uncaughtException', errorHandlerNode); + } + } +} diff --git a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js index 0cb3897aea443..27dbcc067e91a 100644 --- a/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js +++ b/packages/react-server-dom-webpack/src/__tests__/ReactFlightDOMEdge-test.js @@ -23,10 +23,6 @@ if (typeof File === 'undefined' || typeof FormData === 'undefined') { // Patch for Edge environments for global scope global.AsyncLocalStorage = require('async_hooks').AsyncLocalStorage; -const { - patchMessageChannel, -} = require('../../../../scripts/jest/patchMessageChannel'); - let serverExports; let clientExports; let webpackMap; @@ -39,7 +35,6 @@ let ReactServerDOMServer; let ReactServerDOMStaticServer; let ReactServerDOMClient; let use; -let ReactServerScheduler; let reactServerAct; function normalizeCodeLocInfo(str) { @@ -55,9 +50,7 @@ describe('ReactFlightDOMEdge', () => { beforeEach(() => { jest.resetModules(); - ReactServerScheduler = require('scheduler'); - patchMessageChannel(ReactServerScheduler); - reactServerAct = require('internal-test-utils').act; + reactServerAct = require('internal-test-utils').serverAct; // Simulate the condition resolution jest.mock('react', () => require('react/react.react-server')); diff --git a/packages/react-server/src/ReactFlightServer.js b/packages/react-server/src/ReactFlightServer.js index efad2aa59ca81..df811a8c7fa99 100644 --- a/packages/react-server/src/ReactFlightServer.js +++ b/packages/react-server/src/ReactFlightServer.js @@ -1794,7 +1794,11 @@ function pingTask(request: Request, task: Task): void { pingedTasks.push(task); if (pingedTasks.length === 1) { request.flushScheduled = request.destination !== null; - scheduleMicrotask(() => performWork(request)); + if (request.type === PRERENDER) { + scheduleMicrotask(() => performWork(request)); + } else { + scheduleWork(() => performWork(request)); + } } } @@ -4056,10 +4060,20 @@ function flushCompletedChunks( export function startWork(request: Request): void { request.flushScheduled = request.destination !== null; - if (supportsRequestStorage) { - scheduleWork(() => requestStorage.run(request, performWork, request)); + if (request.type === PRERENDER) { + if (supportsRequestStorage) { + scheduleMicrotask(() => { + requestStorage.run(request, performWork, request); + }); + } else { + scheduleMicrotask(() => performWork(request)); + } } else { - scheduleWork(() => performWork(request)); + if (supportsRequestStorage) { + scheduleWork(() => requestStorage.run(request, performWork, request)); + } else { + scheduleWork(() => performWork(request)); + } } } @@ -4073,6 +4087,8 @@ function enqueueFlush(request: Request): void { request.destination !== null ) { request.flushScheduled = true; + // Unlike startWork and pingTask we intetionally use scheduleWork + // here even during prerenders to allow as much batching as possible scheduleWork(() => { request.flushScheduled = false; const destination = request.destination;