Revert Suspense cache Thenable.catch() change (#22280)
Reverts part of #22275 (adding .catch() to Thenables in Suspense caches) in response to #22275 (comment). After taking another look with fresh eyes, I think I see the "uncaught error" issue I initially noticed was in checkForUpdate() (which did not pass an error handler to .then)
Brian Vaughn committed
Sep 9, 2021 at 15:26 UTC
96814e71b2ec13af64cd2670c9e69ab982ab2951
2 files changed
+60
-63
packages/react-devtools-shared/src/hookNamesCache.js
+36
-41
@@ -110,51 +110,46 @@ export function loadHookNames(
110
111
let didTimeout = false;
112
113
- const onSuccess = hookNames => {
114
- if (didTimeout) {
115
- return;
116
- }
117
-
118
- if (__DEBUG__) {
119
- console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
120
- }
121
-
122
- if (hookNames) {
123
- const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
124
- resolvedRecord.status = Resolved;
125
- resolvedRecord.value = hookNames;
126
- } else {
127
- const notFoundRecord = ((newRecord: any): RejectedRecord);
128
- notFoundRecord.status = Rejected;
129
- notFoundRecord.value = null;
130
- }
131
-
132
- wake();
133
- };
134
-
135
- const onError = error => {
136
- if (didTimeout) {
137
- return;
138
- }
139
-
140
- if (__DEBUG__) {
141
- console.log('[hookNamesCache] onError()');
142
- }
113
+ loadHookNamesFunction(hooksTree, fetchFileWithCaching).then(
114
+ function onSuccess(hookNames) {
115
+ if (didTimeout) {
116
+ return;
117
+ }
118
+
119
+ if (__DEBUG__) {
120
+ console.log('[hookNamesCache] onSuccess() hookNames:', hookNames);
121
+ }
122
+
123
+ if (hookNames) {
124
+ const resolvedRecord = ((newRecord: any): ResolvedRecord<HookNames>);
125
+ resolvedRecord.status = Resolved;
126
+ resolvedRecord.value = hookNames;
127
+ } else {
128
+ const notFoundRecord = ((newRecord: any): RejectedRecord);
129
+ notFoundRecord.status = Rejected;
130
+ notFoundRecord.value = null;
131
+ }
132
+
133
+ wake();
134
+ },
135
+ function onError(error) {
136
+ if (didTimeout) {
137
+ return;
138
+ }
139
144
- console.error(error);
140
+ if (__DEBUG__) {
141
+ console.log('[hookNamesCache] onError()');
142
+ }
143
146
- const thrownRecord = ((newRecord: any): RejectedRecord);
147
- thrownRecord.status = Rejected;
148
- thrownRecord.value = null;
144
+ console.error(error);
145
150
- wake();
151
- };
146
+ const thrownRecord = ((newRecord: any): RejectedRecord);
147
+ thrownRecord.status = Rejected;
148
+ thrownRecord.value = null;
149
153
- const thenable = loadHookNamesFunction(hooksTree, fetchFileWithCaching);
154
- thenable.then(onSuccess, onError);
155
- if (typeof (thenable: any).catch === 'function') {
156
- (thenable: any).catch(onError);
157
- }
150
+ wake();
151
+ },
152
+ );
153
154
// Eventually timeout and stop trying to load names.
155
let timeoutID = setTimeout(function onTimeout() {
packages/react-devtools-shared/src/inspectedElementCache.js
+24
-22
@@ -116,34 +116,30 @@ export function inspectElement(
116
return null;
117
}
118
119
- const onSuccess = ([inspectedElement: InspectedElementFrontend]) => {
120
- const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
121
- resolvedRecord.status = Resolved;
122
- resolvedRecord.value = inspectedElement;
123
- wake();
124
- };
125
-
126
- const onError = error => {
127
- if (newRecord.status === Pending) {
128
- const rejectedRecord = ((newRecord: any): RejectedRecord);
129
- rejectedRecord.status = Rejected;
130
- rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
131
- wake();
132
- }
133
- };
134
-
135
- const thenable = inspectElementMutableSource({
119
+ inspectElementMutableSource({
120
bridge,
121
element,
122
path,
123
rendererID: ((rendererID: any): number),
140
- });
141
- thenable.then(onSuccess, onError);
124
+ }).then(
125
+ ([inspectedElement: InspectedElementFrontend]) => {
126
+ const resolvedRecord = ((newRecord: any): ResolvedRecord<InspectedElementFrontend>);
127
+ resolvedRecord.status = Resolved;
128
+ resolvedRecord.value = inspectedElement;
129
143
- if (typeof (thenable: any).catch === 'function') {
144
- (thenable: any).catch();
145
- }
130
+ wake();
131
+ },
132
+
133
+ error => {
134
+ console.error(error);
135
+
136
+ const rejectedRecord = ((newRecord: any): RejectedRecord);
137
+ rejectedRecord.status = Rejected;
138
+ rejectedRecord.value = `Could not inspect element with id "${element.id}". Error thrown:\n${error.message}`;
139
140
+ wake();
141
+ },
142
+ );
143
map.set(element, record);
144
}
145
@@ -192,6 +188,12 @@ export function checkForUpdate({
188
});
189
}
190
},
191
+
192
+ // There isn't much to do about errors in this case,
193
+ // but we should at least log them so they aren't silent.
194
+ error => {
195
+ console.error(error);
196
+ },
197
);
198
}
199
}