Append text string to <Text> error message (#19581)

* Append text string to <Text> error message

* Truncate text in <Text> error message

* Regenerate `codes.json`

Author: yungsters

packages/react-native-renderer/src/ReactFabricHostConfig.js

@@ -244,7 +244,8 @@ export function createTextInstance(
 ): TextInstance {
   invariant(
     hostContext.isInAParentText,
-    'Text strings must be rendered within a <Text> component.',
+    'Text string must be rendered within a <Text> component.\n\nText: %s',
+    text.length > 100 ? text.substr(0, 88) + ' (truncated)' : text,
   );
 
   const tag = nextReactTag;

packages/react-native-renderer/src/ReactNativeHostConfig.js

@@ -146,7 +146,8 @@ export function createTextInstance(
 ): TextInstance {
   invariant(
     hostContext.isInAParentText,
-    'Text strings must be rendered within a <Text> component.',
+    'Text string must be rendered within a <Text> component.\n\nText: %s',
+    text.length > 100 ? text.substr(0, 88) + ' (truncated)' : text,
   );
 
   const tag = allocateTag();

packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js

@@ -563,7 +563,15 @@ describe('ReactFabric', () => {
     }));
 
     expect(() => ReactFabric.render(<View>this should warn</View>, 11)).toThrow(
-      'Text strings must be rendered within a <Text> component.',
+      'Text string must be rendered within a <Text> component.\n\nText: this should warn',
+    );
+
+    expect(() =>
+      ReactFabric.render(<View>{'x'.repeat(200)}</View>, 11),
+    ).toThrow(
+      `Text string must be rendered within a <Text> component.\n\nText: ${'x'.repeat(
+        88,
+      )} (truncated)`,
     );
 
     expect(() =>
@@ -573,7 +581,9 @@ describe('ReactFabric', () => {
         </Text>,
         11,
       ),
-    ).toThrow('Text strings must be rendered within a <Text> component.');
+    ).toThrow(
+      'Text string must be rendered within a <Text> component.\n\nText: hi hello hi',
+    );
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {

packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js

@@ -423,7 +423,15 @@ describe('ReactNative', () => {
     }));
 
     expect(() => ReactNative.render(<View>this should warn</View>, 11)).toThrow(
-      'Text strings must be rendered within a <Text> component.',
+      'Text string must be rendered within a <Text> component.\n\nText: this should warn',
+    );
+
+    expect(() =>
+      ReactNative.render(<View>{'x'.repeat(200)}</View>, 11),
+    ).toThrow(
+      `Text string must be rendered within a <Text> component.\n\nText: ${'x'.repeat(
+        88,
+      )} (truncated)`,
     );
 
     expect(() =>
@@ -433,7 +441,9 @@ describe('ReactNative', () => {
         </Text>,
         11,
       ),
-    ).toThrow('Text strings must be rendered within a <Text> component.');
+    ).toThrow(
+      'Text string must be rendered within a <Text> component.\n\nText: hi hello hi',
+    );
   });
 
   it('should not throw for text inside of an indirect <Text> ancestor', () => {

scripts/error-codes/codes.json

@@ -254,7 +254,6 @@
   "253": "work.commit(): Cannot commit while already rendering. This likely means you attempted to commit from inside a lifecycle method.",
   "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.",
   "255": "Expected ReactFbErrorUtils.invokeGuardedCallback to be a function.",
-  "256": "Expected ReactFiberErrorDialog.showErrorDialog to be a function.",
   "257": "Portals are not currently supported by the server renderer. Render them conditionally so that they only appear on the client render.",
   "258": "Unknown element-like object type: %s. This is likely a bug in React. Please file an issue.",
   "259": "The experimental Call and Return types are not currently supported by the server renderer.",
@@ -270,7 +269,6 @@
   "269": "Profiler must specify an \"id\" string and \"onRender\" function as props",
   "270": "The current renderer does not support persistence. This error is likely caused by a bug in React. Please file an issue.",
   "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.",
-  "272": "The current renderer does not support hydration. This error is likely caused by a bug in React. Please file an issue.",
   "273": "Nesting of <View> within <Text> is not currently supported.",
   "274": "Text strings must be rendered within a <Text> component.",
   "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 @@
   "367": "ReactDOM.createEventHandle: setListener called on an element target that is not managed by React. Ensure React rendered the DOM element.",
   "368": "ReactDOM.createEventHandle: setListener called on an invalid target. Provide a valid EventTarget or an element managed by React.",
   "369": "ReactDOM.createEventHandle: setter called on an invalid target. Provide a valid EventTarget or an element managed by React.",
-  "370": "ReactDOM.createEventHandle: setter called with an invalid callback. The callback must be a function."
+  "370": "ReactDOM.createEventHandle: setter called with an invalid callback. The callback must be a function.",
+  "371": "Text string must be rendered within a <Text> component.\n\nText: %s"
 }