[Bug] iOS Simulator not connected to network inspector

[amaankulshreshtha]

🐛 What is the bug? How can we reproduce it?

When running the network inspector on iOS simulator (iPhone 12, iOS 15.2), the device does not get connected

[Error] Port forwarding app error

1. Clone this repo
2. open the repo in vscode
3. open terminal and run yarn followed by yarn pod-install.
4. open the debug panel and press on Attach to Hermes application - Experimental
5. go back to terminal and run yarn ios
6. After the application launches, run the network inspector

Expected behavior

VSCode Developer console should open automatically and requests should be recorded

Debug output

Debug Console

Attaching to the application
Connecting to 8081 port

React Native output channel

[Error] Port forwarding app failed to start: spawn /Users/username/.vscode/extensions/msjsdiag.vscode-react-native-1.8.1/static/PortForwardingMacApp.app/Contents/MacOS/PortForwardingMacApp EACCES, , 

[Error] Port forwarding app error

Stack: Error: spawn /Users/username/.vscode/extensions/msjsdiag.vscode-react-native-1.8.1/static/PortForwardingMacApp.app/Contents/MacOS/PortForwardingMacApp EACCES
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)
[Error] Port forwarding app failed to start: spawn /Users/amaan.kulshreshtha/.vscode/extensions/msjsdiag.vscode-react-native-1.8.1/static/PortForwardingMacApp.app/Contents/MacOS/PortForwardingMacApp EACCES, , 

[Error] Port forwarding app error

Stack: Error: spawn /Users/username/.vscode/extensions/msjsdiag.vscode-react-native-1.8.1/static/PortForwardingMacApp.app/Contents/MacOS/PortForwardingMacApp EACCES
    at Process.ChildProcess._handle.onexit (internal/child_process.js:269:19)
    at onErrorNT (internal/child_process.js:465:16)
    at processTicksAndRejections (internal/process/task_queues.js:80:21)

Developer Tools console

 ERR s.tmpDir is not a function: TypeError: s.tmpDir is not a function
    at e._sendFirstFileOnDisk (/Users/username/.vscode/extensions/msjsdiag.vscode-react-native-1.8.1/dist/rn-extension.js:1:25358)
    at Timeout._onTimeout (/Users/username/.vscode/extensions/msjsdiag.vscode-react-native-1.8.1/dist/rn-extension.js:1:24162)
    at listOnTimeout (internal/timers.js:554:17)
    at processTimers (internal/timers.js:497:7)

Environment

Please tell us about your system and your project:

• npx react-native doctor or npx expo doctor if your project is using Expo:

Common
 ✓ Node.js
 ✓ yarn
 ✓ npm
 ✖ Watchman - Used for watching changes in the filesystem when in development mode
   - Version found: 2021.08.30.00
   - Version supported: 4.x

Android
 ✓ JDK
 ✓ Android Studio - Required for building and installing your app on Android
 ✖ Android SDK - Required for building and installing your app on Android
   - Versions found: N/A
   - Version supported: 30.0.2
 ✓ ANDROID_HOME

iOS
 ✓ Xcode - Required for building and installing your app on iOS
 ✓ CocoaPods - Required for installing iOS dependencies
 ● ios-deploy - Required for installing your app on a physical device with the CLI

Errors:   2
Warnings: 1

• envinfo:

  System:
    OS: macOS 11.6.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 87.80 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.17.4 - ~/.nvm/versions/node/v14.17.4/bin/node
    Yarn: 1.22.11 - ~/.nvm/versions/node/v14.17.4/bin/yarn
    npm: 7.20.3 - ~/.nvm/versions/node/v14.17.4/bin/npm
    Watchman: 2021.08.30.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.11.2 - /Users/username/.rbenv/shims/pod
    Composer: 1.10.10 - /usr/local/bin/composer
    Homebrew: 3.2.11 - /usr/local/bin/brew
    Maven: 3.6.3 - /opt/apache-maven-3.6.3/bin/mvn
    pip3: 21.0.1 - /Library/Frameworks/Python.framework/Versions/3.7/bin/pip3
    RubyGems: 3.1.4 - /Users/username/.rbenv/shims/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 4.2.1 - /usr/bin/gcc
    Git: 2.32.0 - /usr/bin/git
    Clang: 13.0.0 - /usr/bin/clang
    FFmpeg: 4.4 - /usr/local/bin/ffmpeg
  Servers:
    Apache: 2.4.51 - /usr/sbin/apachectl
  Virtualization:
    Docker: 20.10.8 - /usr/local/bin/docker
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7583922
    Nano: 2.0.6 - /usr/bin/nano
    VSCode: 1.63.2 - /usr/local/bin/code
    Vim: 8.2 - /usr/bin/vim
    Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 11.0.12 - /usr/bin/javac
    Perl: 5.30.2 - /usr/bin/perl
    PHP: 7.3.24 - /Applications/MAMP/bin/php/php7.3.24/bin/php
    Protoc: 3.17.3 - /usr/local/bin/protoc
    Python: 2.7.16 - /usr/bin/python
    Python3: 3.7.3 - /Library/Frameworks/Python.framework/Versions/3.7/bin/python3
    Ruby: 2.7.2 - /Users/username/.rbenv/shims/ruby
  Databases:
    SQLite: 3.32.2 - /Users/username/Library/Android/sdk/platform-tools/sqlite3
  Browsers:
    Chrome: 96.0.4664.110
    Edge: 96.0.1054.62
    Firefox: 95.0
    Safari: 15.2

• React Native Tools extension version: 1.8.1

[RedMickey]

Hi @amaankulshreshtha and thanks for reaching us. Under the hood the extension uses the Flipper plugin embedded to the React Native app to inspect network traffic. It seems that in the demo project there is no the Flipper plugin in the iOS platform according to the Podfile configuration.
We tried to add Flipper support to the iOS platform:

1. Added the use_flipper! string to the Podfile
2. In the ios directory ran the pod install --repo-update command in the terminal
   2.1 We faced some issues while building RN v0.64 project with Flipper for iOS and could fix them by following this workaround

After that we could run the network inspector in the extension and track network traffic without problems.

Could you please try to add the Flipper plugin to your iOS platform and run the network inspector again?

We'll also improve our documentation about Network inspector requirements.

[RedMickey]

@amaankulshreshtha We investigated the error Port forwarding app failed to start: spawn... and found out that it's related to the extension build process.
We tested the preview version of React Native Tools, and it seems this error isn't reproduced there. Could you please try out React Native Tools (Preview) extension to check whether it fixes this issue for you?
Note: to use the preview version it is needed to disable or remove the stable version and reload VS Code.

[amaankulshreshtha]

Hi @RedMickey, I will try the use_flipper solution on the currently provided repo. I will also try to upgrade RN to 0.65+ and try the solution.

Will let you know the findings soon for both the comments.

Thank you for the prompt response ! 😄

[amaankulshreshtha]

Hi @RedMickey

I have verified that the solutions you mentioned for RN 0.65+. Adding use_flipper helps connect the iOS simulator to the network inspector.
As far as the Port Forwarding error goes, it doesn't appear in the nightly build of React native tools.

PS: Still need to verify the use_flipper solution for RN 0.64.

[amaankulshreshtha]

2.1 We faced some issues while building RN v0.64 project with Flipper for iOS and could fix them by following this workaround

Hey @RedMickey, I tried the solution above, but I suppose there's something I'm missing out on. I wasn't able to connect the iOS simulator with network inspector.

Could you list down the exact steps you followed to connect the simulator to the network inspector

[RedMickey]

@amaankulshreshtha I tried out your updated project and could start and connect to the network inspector. Here is my steps for running the network inspector:

1. Cloned your project and installed its dependencies
2. Reloaded VS Code window to let the extension activate for this project
3. Installed iOS pod dependencies using the command yarn pod-install in the folder projectRoot/packages/mobile
4. Built the core module using the command yarn build in the folder projectRoot/packages/core
5. Started the network inspector
   5.1 (optional) Set the extension's log level to Trace to see debug logs by adding the string "react-native-tools.logLevel": "Trace" to the settings.json file
   5.2 Ran the extension command Run Network Inspector in Command Palette
   5.3 The network inspector started
   
6. Ran the packager using the command yarn metro in the project root folder
7. In the folder projectRoot/packages/mobile built and started the application using the command npx react-native run-ios (I used this command instead of the yarn ios command, because it seems to work unstable for me. I also removed the preios script to avoid calling pod install before each build of the application)

After the application started, the network inspector connected to it automatically, and network requests data were printed to the Dev Tools console.

Could you please try to use the steps above to connect to the network inspector?
If the problem remains, please add the string "react-native-tools.logLevel": "Trace" to the settings.json file, reload the VS Code window and try to use the network inspector again, and then send us logs from Network inspector and React Native output channels.

[RedMickey]

Hi @amaankulshreshtha we've released React Native Tools v1.9.0 with the fix for the error Port forwarding app failed to start: spawn....
Could you please tell if the problem with the Network inspector on RN 0.64 is still relevant to you?

[RedMickey]

@amaankulshreshtha Closing this issue due to inactivity. Please feel free to reopen if the problem still persists.

[amaankulshreshtha]

Hi, @RedMickey apologies for the late response. I tested out the solution you gave for RN 0.64. It works. Thanks for your time :)