Append text string to <Text> error message (#19581)
* Append text string to <Text> error message * Truncate text in <Text> error message * Regenerate `codes.json`
Timothy Yung committed
Aug 17, 2020 at 10:47 UTC
1a41a196bcb30d456d1692c4a40cb8273fa2cb92
5 files changed
+30
-9
packages/react-native-renderer/src/ReactFabricHostConfig.js
+2
-1
@@ -244,7 +244,8 @@ export function createTextInstance(
244
): TextInstance {
245
invariant(
246
hostContext.isInAParentText,
247
- 'Text strings must be rendered within a <Text> component.',
247
+ 'Text string must be rendered within a <Text> component.\n\nText: %s',
248
+ text.length > 100 ? text.substr(0, 88) + ' (truncated)' : text,
249
);
250
251
const tag = nextReactTag;
packages/react-native-renderer/src/ReactNativeHostConfig.js
+2
-1
@@ -146,7 +146,8 @@ export function createTextInstance(
146
): TextInstance {
147
invariant(
148
hostContext.isInAParentText,
149
- 'Text strings must be rendered within a <Text> component.',
149
+ 'Text string must be rendered within a <Text> component.\n\nText: %s',
150
+ text.length > 100 ? text.substr(0, 88) + ' (truncated)' : text,
151
);
152
153
const tag = allocateTag();
packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+12
-2
@@ -563,7 +563,15 @@ describe('ReactFabric', () => {
563
}));
564
565
expect(() => ReactFabric.render(<View>this should warn</View>, 11)).toThrow(
566
- 'Text strings must be rendered within a <Text> component.',
566
+ 'Text string must be rendered within a <Text> component.\n\nText: this should warn',
567
+ );
568
+
569
+ expect(() =>
570
+ ReactFabric.render(<View>{'x'.repeat(200)}</View>, 11),
571
+ ).toThrow(
572
+ `Text string must be rendered within a <Text> component.\n\nText: ${'x'.repeat(
573
+ 88,
574
+ )} (truncated)`,
575
);
576
577
expect(() =>
@@ -573,7 +581,9 @@ describe('ReactFabric', () => {
581
</Text>,
582
11,
583
),
576
- ).toThrow('Text strings must be rendered within a <Text> component.');
584
+ ).toThrow(
585
+ 'Text string must be rendered within a <Text> component.\n\nText: hi hello hi',
586
+ );
587
});
588
589
it('should not throw for text inside of an indirect <Text> ancestor', () => {
packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+12
-2
@@ -423,7 +423,15 @@ describe('ReactNative', () => {
423
}));
424
425
expect(() => ReactNative.render(<View>this should warn</View>, 11)).toThrow(
426
- 'Text strings must be rendered within a <Text> component.',
426
+ 'Text string must be rendered within a <Text> component.\n\nText: this should warn',
427
+ );
428
+
429
+ expect(() =>
430
+ ReactNative.render(<View>{'x'.repeat(200)}</View>, 11),
431
+ ).toThrow(
432
+ `Text string must be rendered within a <Text> component.\n\nText: ${'x'.repeat(
433
+ 88,
434
+ )} (truncated)`,
435
);
436
437
expect(() =>
@@ -433,7 +441,9 @@ describe('ReactNative', () => {
441
</Text>,
442
11,
443
),
436
- ).toThrow('Text strings must be rendered within a <Text> component.');
444
+ ).toThrow(
445
+ 'Text string must be rendered within a <Text> component.\n\nText: hi hello hi',
446
+ );
447
});
448
449
it('should not throw for text inside of an indirect <Text> ancestor', () => {
scripts/error-codes/codes.json
+2
-3
@@ -254,7 +254,6 @@
254
"253": "work.commit(): Cannot commit while already rendering. This likely means you attempted to commit from inside a lifecycle method.",
255
"254": "Element ref was specified as a string (%s) but no owner was set. This could happen for one of the following reasons:\n1. You may be adding a ref to a functional component\n2. You may be adding a ref to a component that was not created inside a component's render method\n3. You have multiple copies of React loaded\nSee https://reactjs.org/link/refs-must-have-owner for more information.",
256
"255": "Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.",
257
- "256": "Expected ReactFiberErrorDialog.showErrorDialog to be a function.",
257
"257": "Portals are not currently supported by the server renderer. Render them conditionally so that they only appear on the client render.",
258
"258": "Unknown element-like object type: %s. This is likely a bug in React. Please file an issue.",
259
"259": "The experimental Call and Return types are not currently supported by the server renderer.",
@@ -270,7 +269,6 @@
269
"269": "Profiler must specify an \"id\" string and \"onRender\" function as props",
270
"270": "The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.",
271
"271": "Failed to replay rendering after an error. This is likely caused by a bug in React. Please file an issue with a reproducing case to help us find it.",
273
- "272": "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue.",
272
"273": "Nesting of <View> within <Text> is not currently supported.",
273
"274": "Text strings must be rendered within a <Text> component.",
274
"275": "The current renderer does not support mutation. This error is likely caused by a bug in React. Please file an issue.",
@@ -361,5 +359,6 @@
359
"367": "ReactDOM.createEventHandle: setListener called on an element target that is not managed by React. Ensure React rendered the DOM element.",
360
"368": "ReactDOM.createEventHandle: setListener called on an invalid target. Provide a valid EventTarget or an element managed by React.",
361
"369": "ReactDOM.createEventHandle: setter called on an invalid target. Provide a valid EventTarget or an element managed by React.",
364
- "370": "ReactDOM.createEventHandle: setter called with an invalid callback. The callback must be a function."
362
+ "370": "ReactDOM.createEventHandle: setter called with an invalid callback. The callback must be a function.",
363
+ "371": "Text string must be rendered within a <Text> component.\n\nText: %s"
364
}