Skip to content

Append text string to <Text> error message #19581

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.

Sign up for GitHub

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

Merged
merged 3 commits into from
Aug 17, 2020
Merged

Append text string to <Text> error message #19581

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
26bb713
Append text string to <Text> error message
yungsters Aug 10, 2020
be2f15c
Truncate text in <Text> error message
yungsters Aug 10, 2020
4f785c8
Regenerate `codes.json`
yungsters Aug 10, 2020
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
View file
Open in desktop
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
View file
Open in desktop
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
14 changes: 12 additions & 2 deletions packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
View file
Open in desktop
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
14 changes: 12 additions & 2 deletions packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
View file
Open in desktop
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
2 changes: 1 addition & 1 deletion scripts/error-codes/codes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 <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?!

"274": "Text string must be rendered within a <Text> 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.",
Expand Down