From 20d5e2b0e5eb2fbb17a5c2382c4e91feda30eeee Mon Sep 17 00:00:00 2001
From: Andrew Clark
Date: Mon, 21 Aug 2023 16:59:05 -0400
Subject: [PATCH] Regression test: Load stylesheet in error UI
Adds a failing test for a case discovered by Next.js. An error boundary is
triggered during initial hydration, and the error fallback includes a
stylesheet. If the stylesheet has not yet been loaded, the commit suspends, but
never resolves even after the stylesheet finishes loading.
Triggering this bug depends on several very specific code paths being triggered
simultaneously. There are a few ways we could fix the bug; I'll submit as one or
more separate PRs to show that each one is sufficient.
---
.../src/__tests__/ReactDOMFloat-test.js | 87 +++++++++++++++++++
1 file changed, 87 insertions(+)
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index b00be036ed94c..b23f45fb3174e 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -3385,6 +3385,93 @@ body {
);
});
+ // @gate FIXME
+ it('loading a stylesheet as part of an error boundary UI, during initial render', async () => {
+ class ErrorBoundary extends React.Component {
+ state = {error: null};
+ static getDerivedStateFromError(error) {
+ return {error};
+ }
+ render() {
+ const error = this.state.error;
+ if (error !== null) {
+ return (
+ <>
+
+ {error.message}
+
+ );
+ }
+ return this.props.children;
+ }
+ }
+
+ function Throws() {
+ throw new Error('Oops!');
+ }
+
+ function App() {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ // Initial server render. Because something threw, a Suspense fallback
+ // is shown.
+ await act(() => {
+ renderToPipeableStream(, {
+ onError(x) {
+ Scheduler.log('Caught server error: ' + x.message);
+ },
+ }).pipe(writable);
+ });
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+ Loading...
+ ,
+ );
+ assertLog(['Caught server error: Oops!']);
+
+ // Hydrate the tree. The error boundary will capture the error and attempt
+ // to show an error screen. However, the error screen includes a stylesheet,
+ // so the commit should suspend until the stylesheet loads.
+ ReactDOMClient.hydrateRoot(document, );
+ await waitForAll([]);
+
+ // A preload for the stylesheet is inserted, but we still haven't committed
+ // the error screen.
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+
+
+ Loading...
+ ,
+ );
+
+ // Finish loading the stylesheets. The commit should be unblocked, and the
+ // error screen should appear.
+ await clientAct(() => loadStylesheets());
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+
+
+
+ Oops!
+ ,
+ );
+ });
+
it('will not flush a preload for a new rendered Stylesheet Resource if one was already flushed', async () => {
function Component() {
ReactDOM.preload('foo', {as: 'style'});