Cannot read property 'code' of undefined

[tomekzaw]

Description

When you turn off Metro bundler while the app is running, two toasts appear:

1. Cannot connect to Metro (warning)
2. Cannot read property 'code' of undefined (error)

The warning is expected but the error is not.

The issue can be reproduced on a fresh RN 0.71.0-rc.2 app.

Version

0.71.0-rc.2

Output of npx react-native info

System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Memory: 94.03 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
    Watchman: 2022.10.31.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
  SDKs:
    iOS SDK:
      Platforms: DriverKit 22.1, iOS 16.1, macOS 13.0, tvOS 16.1, watchOS 9.1
    Android SDK:
      API Levels: 26, 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
      System Images: android-28 | Google APIs ARM 64 v8a, android-28 | Google ARM64-V8a Play ARM 64 v8a, android-33 | Google APIs ARM 64 v8a
      Android NDK: Not Found
  IDEs:
    Android Studio: 2021.3 AI-213.7172.25.2113.9123335
    Xcode: 14.1/14B47b - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.11 - /usr/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.2.0 => 18.2.0 
    react-native: 0.0.0-20221129-2018-43027b6d4 => 0.0.0-20221129-2018-43027b6d4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

Steps to reproduce

1. Initialize a fresh RN app
2. Start Metro bundler
3. Launch React Native app
4. Close Metro bundler
5. Watch the red toast appear

Snack, code example, screenshot, or link to a repository

[cortinico]

Thanks for reporting this. We looked into it and it's a regression introduced in .71 inside React Native. We'll be pushing a fix out (cc @blakef is working on it) and we'll pick it for RC4 (cc @kelset for visibility).

[blakef]

Should now be resolved 9c75871.

[NickGerleman]

Let's hold off on cherry-picking this, the root cause of the issue is that Metro is out-of-date, which is already being resolved.

[cortinico]

Let's hold off on cherry-picking this, the root cause of the issue is that Metro is out-of-date, react-native-community/cli#1760.

Do we need to revert 9c75871 then?

[NickGerleman]

Let's hold off on cherry-picking this, the root cause of the issue is that Metro is out-of-date, react-native-community/cli#1760.

Do we need to revert 9c75871 then?

Yes, I think we should. I left a comment on the diff internally.

[kelset]

@tomekzaw can you try RC4 and let us know if this is fixed now?

[tomekzaw]

Hey @kelset, I can confirm it is fixed on 0.71.0-rc.4, thanks! ✅

However, I noticed that the warning message about lost connection to Metro differs a bit between Android ("Try the following") and iOS ("1001: Stream end encountered"), is this expected?

[kelset]

not sure about that - @robhogan / @huntie any ideas why the messaging might be different?

[huntie]

However, I noticed that the warning message about lost connection to Metro differs a bit between Android ("Try the following") and iOS ("1001: Stream end encountered"), is this expected?

I believe this is expected as these are independently defined messages for distinct WebSocket events (defined here and here). However, perhaps we can address this papercut by adding the similar help output on restarting Metro for the close event (the one in your iOS Simulator screenshot).