Show redbox in DEV on string <View> child for web (#3394)

1 files changed, 21 insertions, 0 deletions

diff --git a/src/platform/polyfills.web.ts b/src/platform/polyfills.web.ts
index 0b4a28283..06fbe5cc4 100644
--- a/src/platform/polyfills.web.ts
+++ b/src/platform/polyfills.web.ts
@@ -6,3 +6,24 @@ findLast.shim()
 
 // @ts-ignore whatever typescript wants to complain about here, I dont care about -prf
 window.setImmediate = (cb: () => void) => setTimeout(cb, 0)
+
+if (process.env.NODE_ENV !== 'production') {
+  // In development, react-native-web's <View> tries to validate that
+  // text is wrapped into <Text>. It doesn't catch all cases but is useful.
+  // Unfortunately, it only does that via console.error so it's easy to miss.
+  // This is a hack to get it showing as a redbox on the web so we catch it early.
+  const realConsoleError = console.error
+  const thrownErrors = new WeakSet()
+  console.error = function consoleErrorWrapper(msgOrError) {
+    if (
+      typeof msgOrError === 'string' &&
+      msgOrError.startsWith('Unexpected text node')
+    ) {
+      const err = new Error(msgOrError)
+      thrownErrors.add(err)
+      throw err
+    } else if (!thrownErrors.has(msgOrError)) {
+      return realConsoleError.apply(this, arguments as any)
+    }
+  }
+}