From 26bb71385e305062118aa68732ecfaac259270fa Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Mon, 10 Aug 2020 13:31:00 -0700 Subject: [PATCH 1/3] Append text string to error message --- packages/react-native-renderer/src/ReactFabricHostConfig.js | 3 ++- packages/react-native-renderer/src/ReactNativeHostConfig.js | 3 ++- .../src/__tests__/ReactFabric-test.internal.js | 6 ++++-- .../src/__tests__/ReactNativeMount-test.internal.js | 6 ++++-- scripts/error-codes/codes.json | 2 +- 5 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index dcdceb7a60db..869ad5815196 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/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 component.', + 'Text string must be rendered within a component.\n\nText: %s', + text, ); const tag = nextReactTag; diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js index 0369755c136a..010a469a0a2d 100644 --- a/packages/react-native-renderer/src/ReactNativeHostConfig.js +++ b/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 component.', + 'Text string must be rendered within a component.\n\nText: %s', + text, ); const tag = allocateTag(); diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js index e1a6b07c2ead..732a489ce3c8 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js @@ -563,7 +563,7 @@ describe('ReactFabric', () => { })); expect(() => ReactFabric.render(this should warn, 11)).toThrow( - 'Text strings must be rendered within a component.', + 'Text string must be rendered within a component.\n\nText: this should warn', ); expect(() => @@ -573,7 +573,9 @@ describe('ReactFabric', () => { , 11, ), - ).toThrow('Text strings must be rendered within a component.'); + ).toThrow( + 'Text string must be rendered within a component.\n\nText: hi hello hi', + ); }); it('should not throw for text inside of an indirect ancestor', () => { diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js index 3022b58333a4..fbdfbf8a1bf4 100644 --- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js @@ -423,7 +423,7 @@ describe('ReactNative', () => { })); expect(() => ReactNative.render(this should warn, 11)).toThrow( - 'Text strings must be rendered within a component.', + 'Text string must be rendered within a component.\n\nText: this should warn', ); expect(() => @@ -433,7 +433,9 @@ describe('ReactNative', () => { , 11, ), - ).toThrow('Text strings must be rendered within a component.'); + ).toThrow( + 'Text string must be rendered within a component.\n\nText: hi hello hi', + ); }); it('should not throw for text inside of an indirect ancestor', () => { diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index 1cd9becd724f..e85595a055ba 100644 --- a/scripts/error-codes/codes.json +++ b/scripts/error-codes/codes.json @@ -272,7 +272,7 @@ "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 within is not currently supported.", - "274": "Text strings must be rendered within a component.", + "274": "Text string must be rendered within a component.\n\nText: %s", "275": "The current renderer does not support mutation. This error is likely caused by a bug in React. Please file an issue.", "276": "React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills", "277": "Context.unstable_read(): Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.", From be2f15c7cf3c58f79118961fff1b236eda548008 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Mon, 10 Aug 2020 15:13:24 -0700 Subject: [PATCH 2/3] Truncate text in error message --- .../react-native-renderer/src/ReactFabricHostConfig.js | 2 +- .../react-native-renderer/src/ReactNativeHostConfig.js | 2 +- .../src/__tests__/ReactFabric-test.internal.js | 8 ++++++++ .../src/__tests__/ReactNativeMount-test.internal.js | 8 ++++++++ 4 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js index 869ad5815196..6343d08ebbc8 100644 --- a/packages/react-native-renderer/src/ReactFabricHostConfig.js +++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js @@ -245,7 +245,7 @@ export function createTextInstance( invariant( hostContext.isInAParentText, 'Text string must be rendered within a component.\n\nText: %s', - text, + text.length > 100 ? text.substr(0, 88) + ' (truncated)' : text, ); const tag = nextReactTag; diff --git a/packages/react-native-renderer/src/ReactNativeHostConfig.js b/packages/react-native-renderer/src/ReactNativeHostConfig.js index 010a469a0a2d..bd5822a783fb 100644 --- a/packages/react-native-renderer/src/ReactNativeHostConfig.js +++ b/packages/react-native-renderer/src/ReactNativeHostConfig.js @@ -147,7 +147,7 @@ export function createTextInstance( invariant( hostContext.isInAParentText, 'Text string must be rendered within a component.\n\nText: %s', - text, + text.length > 100 ? text.substr(0, 88) + ' (truncated)' : text, ); const tag = allocateTag(); diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js index 732a489ce3c8..803af25a6775 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js @@ -566,6 +566,14 @@ describe('ReactFabric', () => { 'Text string must be rendered within a component.\n\nText: this should warn', ); + expect(() => + ReactFabric.render({'x'.repeat(200)}, 11), + ).toThrow( + `Text string must be rendered within a component.\n\nText: ${'x'.repeat( + 88, + )} (truncated)`, + ); + expect(() => ReactFabric.render( diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js index fbdfbf8a1bf4..8c3ddebbf790 100644 --- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js @@ -426,6 +426,14 @@ describe('ReactNative', () => { 'Text string must be rendered within a component.\n\nText: this should warn', ); + expect(() => + ReactNative.render({'x'.repeat(200)}, 11), + ).toThrow( + `Text string must be rendered within a component.\n\nText: ${'x'.repeat( + 88, + )} (truncated)`, + ); + expect(() => ReactNative.render( From 4f785c87ec2bfaaf8ce19683a14b3f509f155c98 Mon Sep 17 00:00:00 2001 From: Tim Yung Date: Mon, 10 Aug 2020 16:17:23 -0700 Subject: [PATCH 3/3] Regenerate `codes.json` --- scripts/error-codes/codes.json | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/scripts/error-codes/codes.json b/scripts/error-codes/codes.json index e85595a055ba..2f8b0057cfb2 100644 --- a/scripts/error-codes/codes.json +++ b/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://fb.me/react-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,9 +269,8 @@ "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 within is not currently supported.", - "274": "Text string must be rendered within a component.\n\nText: %s", + "274": "Text strings must be rendered within a component.", "275": "The current renderer does not support mutation. This error is likely caused by a bug in React. Please file an issue.", "276": "React depends on requestAnimationFrame. Make sure that you load a polyfill in older browsers. https://fb.me/react-polyfills", "277": "Context.unstable_read(): Context can only be read while React is rendering, e.g. inside the render method or getDerivedStateFromProps.", @@ -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 component.\n\nText: %s" }