Skip to content

Commit

Permalink
Append text string to <Text> error message (#19581)
Browse files Browse the repository at this point in the history
* Append text string to <Text> error message

* Truncate text in <Text> error message

* Regenerate `codes.json`
  • Loading branch information
yungsters authored Aug 17, 2020
1 parent 1287670 commit 1a41a19
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 9 deletions.
3 changes: 2 additions & 1 deletion packages/react-native-renderer/src/ReactFabricHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
3 changes: 2 additions & 1 deletion packages/react-native-renderer/src/ReactNativeHostConfig.js
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() =>
Expand All @@ -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', () => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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(() =>
Expand All @@ -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', () => {
Expand Down
5 changes: 2 additions & 3 deletions scripts/error-codes/codes.json
Original file line number Diff line number Diff line change
Expand Up @@ -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.",
Expand All @@ -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.",
Expand Down Expand Up @@ -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"
}

0 comments on commit 1a41a19

Please sign in to comment.