Repository: facebook/react
Pull request: Revert Suspense cache Thenable.catch() change

Stacks on top of PR #22263 to avoid causing merge conflicts in `hookNamesCache.js`.

### [Compare the two branches only](https://github.com/facebook/react/compare/bvaughn:devtools-dynamic-import-suspense-cache...bvaughn:devtools-suspense-cache-follow-up?expand=1&w=1)

Reverts part of #22275 (adding `.catch()` to Thenables in Suspense caches) in response to https://github.com/facebook/react/pull/22275#discussion_r705545366.

After taking another look with fresh eyes, I think I see the "uncaught error" issue I initially noticed was here:
https://github.com/facebook/react/blob/8f96c6b2ac3ff0e38f60c87b1f08deb9993526b5/packages/react-devtools-shared/src/inspectedElementCache.js#L178-L195


Changed files:
filename: packages/react-devtools-shared/src/hookNamesCache.js
patch: @@ -110,51 +110,46 @@ export function loadHookNames(
 
     let didTimeout = false;
 
-    const onSuccess = hookNames => {
-      if (didTimeout) {
-        return;
-      }
-
-      if (__DEBUG__) {
-        console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
-      }
-
-      if (hookNames) {
-        const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
-        resolvedRecord.status = Resolved;
-        resolvedRecord.value = hookNames;
-      } else {
-        const notFoundRecord = ((newRecord: any): RejectedRecord);
-        notFoundRecord.status = Rejected;
-        notFoundRecord.value = null;
-      }
-
-      wake();
-    };
-
-    const onError = error => {
-      if (didTimeout) {
-        return;
-      }
-
-      if (__DEBUG__) {
-        console.log('[hookNamesCache] onError()');
-      }
+    loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
+      function onSuccess(hookNames) {
+        if (didTimeout) {
+          return;
+        }
+
+        if (__DEBUG__) {
+          console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
+        }
+
+        if (hookNames) {
+          const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
+          resolvedRecord.status = Resolved;
+          resolvedRecord.value = hookNames;
+        } else {
+          const notFoundRecord = ((newRecord: any): RejectedRecord);
+          notFoundRecord.status = Rejected;
+          notFoundRecord.value = null;
+        }
+
+        wake();
+      },
+      function onError(error) {
+        if (didTimeout) {
+          return;
+        }
 
-      console.error(error);
+        if (__DEBUG__) {
+          console.log('[hookNamesCache] onError()');
+        }
 
-      const thrownRecord = ((newRecord: any): RejectedRecord);
-      thrownRecord.status = Rejected;
-      thrownRecord.value = null;
+        console.error(error);
 
-      wake();
-    };
+        const thrownRecord = ((newRecord: any): RejectedRecord);
+        thrownRecord.status = Rejected;
+        thrownRecord.value = null;
 
-    const thenable = loadHookNamesFunction(hooksTree, fetchFileWithCaching);
-    thenable.then(onSuccess, onError);
-    if (typeof (thenable: any).catch === 'function') {
-      (thenable: any).catch(onError);
-    }
+        wake();
+      },
+    );
 
     // Eventually timeout and stop trying to load names.
     let timeoutID = setTimeout(function onTimeout() {

filename: packages/react-devtools-shared/src/inspectedElementCache.js
patch: @@ -116,34 +116,30 @@ export function inspectElement(
       return null;
     }
 
-    const onSuccess = ([inspectedElement: InspectedElementFrontend]) => {
-      const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
-      resolvedRecord.status = Resolved;
-      resolvedRecord.value = inspectedElement;
-      wake();
-    };
-
-    const onError = error => {
-      if (newRecord.status === Pending) {
-        const rejectedRecord = ((newRecord: any): RejectedRecord);
-        rejectedRecord.status = Rejected;
-        rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
-        wake();
-      }
-    };
-
-    const thenable = inspectElementMutableSource({
+    inspectElementMutableSource({
       bridge,
       element,
       path,
       rendererID: ((rendererID: any): number),
-    });
-    thenable.then(onSuccess, onError);
+    }).then(
+      ([inspectedElement: InspectedElementFrontend]) => {
+        const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
+        resolvedRecord.status = Resolved;
+        resolvedRecord.value = inspectedElement;
 
-    if (typeof (thenable: any).catch === 'function') {
-      (thenable: any).catch();
-    }
+        wake();
+      },
+
+      error => {
+        console.error(error);
+
+        const rejectedRecord = ((newRecord: any): RejectedRecord);
+        rejectedRecord.status = Rejected;
+        rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
 
+        wake();
+      },
+    );
     map.set(element, record);
   }
 
@@ -192,6 +188,12 @@ export function checkForUpdate({
           });
         }
       },
+
+      // There isn't much to do about errors in this case,
+      // but we should at least log them so they aren't silent.
+      error => {
+        console.error(error);
+      },
     );
   }
 }