Added more context to invalid text string errors

[EvanBacon]

Summary

This PR is a companion to facebook/react-native#32544 which was recommended here facebook/react-native#32544 (comment). In React Native, the stack traces shown in LogBox often just point to fast refresh and don't provide much context into cases where a user adds a string outside of a Text element, this PR improves discoverability a little by adding the invalid text to the error message.

How did you test this change?

Update the error message format to include the invalid text string.

[sizebot]

Comparing: 2db6d6a...871c7c7

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	129.55 kB	129.55 kB	=	41.43 kB	41.43 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	134.52 kB	134.52 kB	=	42.89 kB	42.90 kB
facebook-www/ReactDOM-prod.classic.js	=	423.36 kB	423.36 kB	=	78.05 kB	78.05 kB
facebook-www/ReactDOM-prod.modern.js	=	411.92 kB	411.92 kB	=	76.30 kB	76.30 kB
facebook-www/ReactDOMForked-prod.classic.js	=	423.36 kB	423.36 kB	=	78.06 kB	78.06 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against 871c7c7

[yungsters]

Thanks again for your contribution, @EvanBacon.

I'll copy over some of my feedback from facebook/react-native#32544:

tl;dr — I previously attempted a similar change, but was recommended to revert it because @acdlite and @sebmarkbage raised concerns with logging arbitrary strings which may be sensitive (e.g. passwords, banking information).

@EvanBacon — What do you think about only appending the string if an opt-in flag is set (e.g. global.debugInvalidTextStrings), and then changing the error message to inform people to do that to opt into the extra error text? (And maybe when the opt-in flag is set, remind them to remove it when they're done debugging.)

It looks like the current status of this PR does not incorporate an opt-in flag as I previously suggested. Does this PR simply need to be updated, or do you have concerns about that approach?

[gaearon]

Is there some other kind of information we could add other than the text itself? Options don't seem ideal for this.

Unfortunately, both the error component stack and the call stack do not provide enough information to find the corresponding location in the code.

Is there a longer elaboration on why component stack does not provide enough information? Any concrete case I can look at?

[EvanBacon]

@gaearon perhaps the most minimal repro in native:

blank.zip

Setup

• yarn
• yarn start
• Press i or a (opens in Expo Go)

Code

App.js

import { View } from "react-native";

export default function App() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}>
      Hey
    </View>
  );
}

Error Output

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in RCTView (at View.js:34)
    in View (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in DevAppContainer (at AppContainer.js:122)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at node_modules/react-native/Libraries/Core/setUpReactRefresh.js:43:6 in performReactRefresh
at node_modules/metro-runtime/src/polyfills/require.js:655:10 in <unknown>

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in RCTView (at View.js:34)
    in View (created by App)
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:47)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:107)
    in DevAppContainer (at AppContainer.js:122)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:134)
    in AppContainer (at renderApplication.js:40)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:172:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in <unknown>

Initial Load

Fast Refresh

[github-actions]

This pull request has been automatically marked as stale. If this pull request is still relevant, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize reviewing it yet. Your contribution is very much appreciated.

[github-actions]

Closing this pull request after a prolonged period of inactivity. If this issue is still present in the latest release, please ask for this pull request to be reopened. Thank you!