Tweak error message for missing fallback

Author: sophiebits

packages/react-reconciler/src/ReactCurrentFiber.js

@@ -17,6 +17,7 @@ import {
   HostComponent,
   Mode,
   LazyComponent,
+  SuspenseComponent,
 } from 'shared/ReactWorkTags';
 import describeComponentFrame from 'shared/describeComponentFrame';
 import getComponentName from 'shared/getComponentName';
@@ -33,6 +34,7 @@ function describeFiber(fiber: Fiber): string {
     case ClassComponent:
     case HostComponent:
     case Mode:
+    case SuspenseComponent:
       const owner = fiber._debugOwner;
       const source = fiber._debugSource;
       const name = getComponentName(fiber.type);

packages/react-reconciler/src/ReactFiberUnwindWork.js

@@ -46,6 +46,7 @@ import {
   CaptureUpdate,
 } from './ReactUpdateQueue';
 import {logError} from './ReactFiberCommitWork';
+import {getStackByFiberInDevAndProd} from './ReactCurrentFiber';
 import {popHostContainer, popHostContext} from './ReactFiberHostContext';
 import {
   isContextProvider as isLegacyContextProvider,
@@ -315,8 +316,14 @@ function throwException(
       workInProgress = workInProgress.return;
     } while (workInProgress !== null);
     // No boundary was found. Fallthrough to error mode.
+    // TODO: Use invariant so the message is stripped in prod?
     value = new Error(
-      'An update was suspended, but no placeholder UI was provided.',
+      (getComponentName(sourceFiber.type) || 'A React component') +
+        ' suspended while rendering, but no fallback UI was specified.\n' +
+        '\n' +
+        'Add a <Suspense fallback=...> component higher in the tree to ' +
+        'provide a loading indicator or placeholder to display.' +
+        getStackByFiberInDevAndProd(sourceFiber),
     );
   }
 

packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js

@@ -312,8 +312,19 @@ describe('ReactSuspense', () => {
       },
     );
 
-    expect(root).toFlushAndThrow(
-      'An update was suspended, but no placeholder UI was provided.',
+    let err;
+    try {
+      root.unstable_flushAll();
+    } catch (e) {
+      err = e;
+    }
+    expect(err.message.replace(/at .+?:\d+/g, 'at **')).toBe(
+      'AsyncText suspended while rendering, but no fallback UI was specified.\n' +
+      '\n' +
+      'Add a <Suspense fallback=...> component higher in the tree to provide ' +
+      'a loading indicator or placeholder to display.\n' +
+      '    in AsyncText (at **)\n' +
+      '    in Suspense (at **)',
     );
     expect(ReactTestRenderer).toHaveYielded(['Suspend! [Hi]', 'Suspend! [Hi]']);
   });

packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js

@@ -652,7 +652,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
   it('throws a helpful error when an update is suspends without a placeholder', () => {
     expect(() => {
       ReactNoop.flushSync(() => ReactNoop.render(<AsyncText text="Async" />));
-    }).toThrow('An update was suspended, but no placeholder UI was provided.');
+    }).toThrow(
+      'AsyncText suspended while rendering, but no fallback UI was specified.',
+    );
   });
 
   it('a Suspense component correctly handles more than one suspended child', async () => {