Skip to content

Commit 0ee0a32

Browse files
committed
Warn for invalid type in renderer with the correct RSC stack (#30102)
This is all behind the `enableOwnerStacks` flag. This is a follow up to #29088. In that I moved type validation into the renderer since that's the one that knows what types are allowed. However, I only removed it from `React.createElement` and not the JSX which was an oversight. However, I also noticed that for invalid types we don't have the right stack trace for throws because we're not yet inside the JSX element that itself is invalid. We should use its stack for the stack trace. That's the reason it's enough to just use the throw now because we can get a good stack trace from the owner stack. This is fixed by creating a fake Throw Fiber that gets assigned the right stack. Additionally, I noticed that for certain invalid types like the most common one `undefined` we error in Flight so a missing import in RSC leads to a generic error. Instead of erroring on the Flight side we should just let anything that's not a Server Component through to the client and then let the Client renderer determine whether it's a valid type or not. Since we now have owner stacks through the server too, this will still be able to provide a good stack trace on the client that points to the server in that case. <img width="571" alt="Screenshot 2024-06-25 at 6 46 35 PM" src="https://github.com/facebook/react/assets/63648/6812c24f-e274-4e09-b4de-21deda9ea1d4"> To get the best stack you have to expand the little icon and the regular stack is noisy [due to this Chrome bug](https://issues.chromium.org/issues/345248263) which makes it a little harder to find but once that's fixed it might be easier. DiffTrain build for commit e02baf6.
1 parent 54bd813 commit 0ee0a32

File tree

14 files changed

+155
-137
lines changed

14 files changed

+155
-137
lines changed

compiled-rn/VERSION_NATIVE_FB

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.0.0-native-fb-ffec9ec5b5-20240627
1+
19.0.0-native-fb-e02baf6c92-20240627

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-dev.js

Lines changed: 35 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<44d1ab19516f0dc7115b3084b1b6983a>>
10+
* @generated SignedSource<<42baca610fefec93b87cf45e12c0249d>>
1111
*/
1212

1313
"use strict";
@@ -2442,6 +2442,7 @@ __DEV__ &&
24422442
if ("children" !== key && "key" !== key) {
24432443
null === fiber &&
24442444
((fiber = createFiberFromElement(element, returnFiber.mode, 0)),
2445+
(fiber._debugInfo = currentDebugInfo),
24452446
(fiber.return = returnFiber));
24462447
runWithFiberInDEV(
24472448
fiber,
@@ -12527,34 +12528,32 @@ __DEV__ &&
1252712528
break;
1252812529
case REACT_PROFILER_TYPE:
1252912530
return (
12531+
(type = pendingProps),
1253012532
(owner = mode),
12531-
"string" !== typeof pendingProps.id &&
12533+
"string" !== typeof type.id &&
1253212534
error$jscomp$0(
1253312535
'Profiler must specify an "id" of type `string` as a prop. Received the type `%s` instead.',
12534-
typeof pendingProps.id
12536+
typeof type.id
1253512537
),
12536-
(owner = createFiber(12, pendingProps, key, owner | 2)),
12537-
(owner.elementType = REACT_PROFILER_TYPE),
12538-
(owner.lanes = lanes),
12539-
(owner.stateNode = {
12540-
effectDuration: 0,
12541-
passiveEffectDuration: 0
12542-
}),
12543-
owner
12538+
(key = createFiber(12, type, key, owner | 2)),
12539+
(key.elementType = REACT_PROFILER_TYPE),
12540+
(key.lanes = lanes),
12541+
(key.stateNode = { effectDuration: 0, passiveEffectDuration: 0 }),
12542+
key
1254412543
);
1254512544
case REACT_SUSPENSE_TYPE:
1254612545
return (
12547-
(owner = createFiber(13, pendingProps, key, mode)),
12548-
(owner.elementType = REACT_SUSPENSE_TYPE),
12549-
(owner.lanes = lanes),
12550-
owner
12546+
(key = createFiber(13, pendingProps, key, mode)),
12547+
(key.elementType = REACT_SUSPENSE_TYPE),
12548+
(key.lanes = lanes),
12549+
key
1255112550
);
1255212551
case REACT_SUSPENSE_LIST_TYPE:
1255312552
return (
12554-
(owner = createFiber(19, pendingProps, key, mode)),
12555-
(owner.elementType = REACT_SUSPENSE_LIST_TYPE),
12556-
(owner.lanes = lanes),
12557-
owner
12553+
(key = createFiber(19, pendingProps, key, mode)),
12554+
(key.elementType = REACT_SUSPENSE_LIST_TYPE),
12555+
(key.lanes = lanes),
12556+
key
1255812557
);
1255912558
case REACT_OFFSCREEN_TYPE:
1256012559
return createFiberFromOffscreen(pendingProps, mode, lanes, key);
@@ -12580,40 +12579,43 @@ __DEV__ &&
1258012579
resolvedType = null;
1258112580
break a;
1258212581
}
12583-
lanes = "";
12582+
resolvedType = "";
1258412583
if (
1258512584
void 0 === type ||
1258612585
("object" === typeof type &&
1258712586
null !== type &&
1258812587
0 === Object.keys(type).length)
1258912588
)
12590-
lanes +=
12589+
resolvedType +=
1259112590
" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.";
1259212591
null === type
12593-
? (type = "null")
12592+
? (pendingProps = "null")
1259412593
: isArrayImpl(type)
12595-
? (type = "array")
12594+
? (pendingProps = "array")
1259612595
: void 0 !== type && type.$$typeof === REACT_ELEMENT_TYPE
12597-
? ((type =
12596+
? ((pendingProps =
1259812597
"<" +
1259912598
(getComponentNameFromType(type.type) || "Unknown") +
1260012599
" />"),
12601-
(lanes =
12600+
(resolvedType =
1260212601
" Did you accidentally export a JSX literal instead of a component?"))
12603-
: (type = typeof type);
12604-
owner = owner
12602+
: (pendingProps = typeof type);
12603+
fiberTag = owner
1260512604
? "number" === typeof owner.tag
1260612605
? getComponentNameFromFiber(owner)
1260712606
: "string" === typeof owner.name
1260812607
? owner.name
1260912608
: null
1261012609
: null;
12611-
owner &&
12612-
(lanes += "\n\nCheck the render method of `" + owner + "`.");
12613-
throw Error(
12610+
fiberTag &&
12611+
(resolvedType +=
12612+
"\n\nCheck the render method of `" + fiberTag + "`.");
12613+
fiberTag = 29;
12614+
pendingProps = Error(
1261412615
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " +
12615-
(type + "." + lanes)
12616+
(pendingProps + "." + resolvedType)
1261612617
);
12618+
resolvedType = null;
1261712619
}
1261812620
key = createFiber(fiberTag, pendingProps, key, mode);
1261912621
key.elementType = type;
@@ -15070,14 +15072,14 @@ __DEV__ &&
1507015072
scheduleRoot: scheduleRoot,
1507115073
setRefreshHandler: setRefreshHandler,
1507215074
getCurrentFiber: getCurrentFiberForDevTools,
15073-
reconcilerVersion: "19.0.0-native-fb-ffec9ec5b5-20240627"
15075+
reconcilerVersion: "19.0.0-native-fb-e02baf6c92-20240627"
1507415076
});
1507515077
})({
1507615078
findFiberByHostInstance: function () {
1507715079
throw Error("TestRenderer does not support findFiberByHostInstance()");
1507815080
},
1507915081
bundleType: 1,
15080-
version: "19.0.0-native-fb-ffec9ec5b5-20240627",
15082+
version: "19.0.0-native-fb-e02baf6c92-20240627",
1508115083
rendererPackageName: "react-test-renderer"
1508215084
});
1508315085
exports._Scheduler = Scheduler;

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-prod.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<718ff5e34ce4342f80f8cd32c0855485>>
10+
* @generated SignedSource<<f5de4052aa29bedfe407f3611b05a317>>
1111
*/
1212

1313
"use strict";
@@ -8869,10 +8869,12 @@ function createFiberFromTypeAndProps(
88698869
owner = null;
88708870
break a;
88718871
}
8872-
throw Error(
8872+
fiberTag = 29;
8873+
pendingProps = Error(
88738874
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " +
88748875
((null === type ? "null" : typeof type) + ".")
88758876
);
8877+
owner = null;
88768878
}
88778879
key = createFiber(fiberTag, pendingProps, key, mode);
88788880
key.elementType = type;
@@ -9397,7 +9399,7 @@ var devToolsConfig$jscomp$inline_1034 = {
93979399
throw Error("TestRenderer does not support findFiberByHostInstance()");
93989400
},
93999401
bundleType: 0,
9400-
version: "19.0.0-native-fb-ffec9ec5b5-20240627",
9402+
version: "19.0.0-native-fb-e02baf6c92-20240627",
94019403
rendererPackageName: "react-test-renderer"
94029404
};
94039405
var internals$jscomp$inline_1223 = {
@@ -9428,7 +9430,7 @@ var internals$jscomp$inline_1223 = {
94289430
scheduleRoot: null,
94299431
setRefreshHandler: null,
94309432
getCurrentFiber: null,
9431-
reconcilerVersion: "19.0.0-native-fb-ffec9ec5b5-20240627"
9433+
reconcilerVersion: "19.0.0-native-fb-e02baf6c92-20240627"
94329434
};
94339435
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
94349436
var hook$jscomp$inline_1224 = __REACT_DEVTOOLS_GLOBAL_HOOK__;

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-test-renderer/cjs/ReactTestRenderer-profiling.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<c46fe24487d3b639d3f58189945d6b49>>
10+
* @generated SignedSource<<af4ea00784664da9aaa9bc4db9dca3f0>>
1111
*/
1212

1313
"use strict";
@@ -9484,10 +9484,12 @@ function createFiberFromTypeAndProps(
94849484
owner = null;
94859485
break a;
94869486
}
9487-
throw Error(
9487+
fiberTag = 29;
9488+
pendingProps = Error(
94889489
"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: " +
94899490
((null === type ? "null" : typeof type) + ".")
94909491
);
9492+
owner = null;
94919493
}
94929494
key = createFiber(fiberTag, pendingProps, key, mode);
94939495
key.elementType = type;
@@ -10017,7 +10019,7 @@ var devToolsConfig$jscomp$inline_1117 = {
1001710019
throw Error("TestRenderer does not support findFiberByHostInstance()");
1001810020
},
1001910021
bundleType: 0,
10020-
version: "19.0.0-native-fb-ffec9ec5b5-20240627",
10022+
version: "19.0.0-native-fb-e02baf6c92-20240627",
1002110023
rendererPackageName: "react-test-renderer"
1002210024
};
1002310025
(function (internals) {
@@ -10061,7 +10063,7 @@ var devToolsConfig$jscomp$inline_1117 = {
1006110063
scheduleRoot: null,
1006210064
setRefreshHandler: null,
1006310065
getCurrentFiber: null,
10064-
reconcilerVersion: "19.0.0-native-fb-ffec9ec5b5-20240627"
10066+
reconcilerVersion: "19.0.0-native-fb-e02baf6c92-20240627"
1006510067
});
1006610068
exports._Scheduler = Scheduler;
1006710069
exports.act = act;

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-dev.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<fe33295fc61cdcf79ee85f36a7be4698>>
10+
* @generated SignedSource<<547bd318a581226337229e507fdff7e4>>
1111
*/
1212

1313
"use strict";
@@ -1741,7 +1741,7 @@ __DEV__ &&
17411741
exports.useTransition = function () {
17421742
return resolveDispatcher().useTransition();
17431743
};
1744-
exports.version = "19.0.0-native-fb-ffec9ec5b5-20240627";
1744+
exports.version = "19.0.0-native-fb-e02baf6c92-20240627";
17451745
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
17461746
"function" ===
17471747
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-prod.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<4f2a029ed6d83dece5be6850f80680a9>>
10+
* @generated SignedSource<<f500c5a68996ef417fddaed92745aa08>>
1111
*/
1212

1313
"use strict";
@@ -604,4 +604,4 @@ exports.useSyncExternalStore = function (
604604
exports.useTransition = function () {
605605
return ReactSharedInternals.H.useTransition();
606606
};
607-
exports.version = "19.0.0-native-fb-ffec9ec5b5-20240627";
607+
exports.version = "19.0.0-native-fb-e02baf6c92-20240627";

compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react/cjs/React-profiling.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<f990feb6dde9284b1bec4cd8dcdf2e3b>>
10+
* @generated SignedSource<<8fed01692ebeb6102c3169cea0452442>>
1111
*/
1212

1313
"use strict";
@@ -608,7 +608,7 @@ exports.useSyncExternalStore = function (
608608
exports.useTransition = function () {
609609
return ReactSharedInternals.H.useTransition();
610610
};
611-
exports.version = "19.0.0-native-fb-ffec9ec5b5-20240627";
611+
exports.version = "19.0.0-native-fb-e02baf6c92-20240627";
612612
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
613613
"function" ===
614614
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&
Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
ffec9ec5b5c846f61d7b40e92f138e2a7b34f273
1+
e02baf6c92833a0d45a77fb2e741676f393c24f7

0 commit comments

Comments
 (0)