Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Append text string to <Text> error message #19581

Merged
merged 3 commits into from
Aug 17, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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://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.",
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.",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's not touch this one. Instead a new one should be generated by running a script. (I think CI should tell its name?) Otherwise the message will be confusing for people running old versions and visiting the website.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yarn extract-errors

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From looking at scripts/error-codes/README, looks like it's yarn extract-errors.

Thanks!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just noticed your second inline comment, lol. GitHub doesn't have realtime comments?!

"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"
}