App restarts / crashes when enabling remote debugging with RN 0.73.9 for Android

[Sushant-Sardeshpande]

Description

When enabling remote debugging using NativeDevSettings.setIsDebuggingRemotely(true) on Android the app keeps on restarting and eventually crashes.

Steps to reproduce

1. Install the app using 'yarn android'
2. Notice that the app will keep on restarting and eventually crash

React Native Version

0.73.9

Affected Platforms

Runtime - Android

Output of npx react-native info

info Fetching system and libraries information...
System:
  OS: macOS 14.5
  CPU: (10) arm64 Apple M2 Pro
  Memory: 93.36 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.15.0
    path: /usr/local/bin/node
  Yarn:
    version: 3.6.4
    path: /opt/homebrew/bin/yarn
  npm:
    version: 10.8.1
    path: /usr/local/bin/npm
  Watchman:
    version: 2024.01.22.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.14.3
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.5
      - iOS 17.5
      - macOS 14.5
      - tvOS 17.5
      - visionOS 1.2
      - watchOS 10.5
  Android SDK:
    Android NDK: 24.0.8215888
IDEs:
  Android Studio: 2024.1 AI-241.15989.150.2411.11948838
  Xcode:
    version: 15.4/15F31d
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.10
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.2.0
    wanted: 18.2.0
  react-native:
    installed: 0.73.9
    wanted: 0.73.9
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: false
  newArchEnabled: false
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

After some restarts it crashes with the exception:

FATAL EXCEPTION: mqt_js
                                                                                                    Process: com.androidjsc, PID: 9748
                                                                                                    java.lang.AssertionError: No source URL loaded, have you initialised the instance?
                                                                                                    	at com.facebook.infer.annotation.Assertions.assertNotNull(Assertions.java:19)
                                                                                                    	at com.facebook.react.modules.debug.SourceCodeModule.getTypedExportedConstants(SourceCodeModule.java:32)
                                                                                                    	at com.facebook.fbreact.specs.NativeSourceCodeSpec.getConstants(NativeSourceCodeSpec.java:45)
                                                                                                    	at com.facebook.react.bridge.JavaModuleWrapper.getConstants(JavaModuleWrapper.java:127)
                                                                                                    	at com.facebook.jni.NativeRunnable.run(Native Method)
                                                                                                    	at android.os.Handler.handleCallback(Handler.java:942)
                                                                                                    	at android.os.Handler.dispatchMessage(Handler.java:99)
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
                                                                                                    	at android.os.Looper.loopOnce(Looper.java:201)
                                                                                                    	at android.os.Looper.loop(Looper.java:288)
                                                                                                    	at com.facebook.react.bridge.queue.MessageQueueThreadImpl$4.run(MessageQueueThreadImpl.java:234)
                                                                                                    	at java.lang.Thread.run(Thread.java:1012)
2024-07-12 10:58:36.834  9748-9812  Process                 com.androidjsc

Reproducer

https://github.com/Sushant-Sardeshpande/androidRemoteDebugging/tree/main

Screenshots and Videos

No response

[Sushant-Sardeshpande]

Get the following log on the metro bundler:

Error: Unable to resolve module ./debugger-ui/debuggerWorker.aca173c4 from /Users/sushantsardeshpande/WebstormProjects/androidRemoteDebugging/ReproducerApp/.:

None of these files exist:

• debugger-ui/debuggerWorker.aca173c4(.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
• debugger-ui/debuggerWorker.aca173c4/index(.native.js|.js|.native.jsx|.jsx|.native.json|.json|.native.ts|.ts|.native.tsx|.tsx)
  at ModuleResolver.resolveDependency (/Users/sushantsardeshpande/WebstormProjects/androidRemoteDebugging/ReproducerApp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:112:15)
  at DependencyGraph.resolveDependency (/Users/sushantsardeshpande/WebstormProjects/androidRemoteDebugging/ReproducerApp/node_modules/metro/src/node-haste/DependencyGraph.js:231:43)
  at /Users/sushantsardeshpande/WebstormProjects/androidRemoteDebugging/ReproducerApp/node_modules/metro/src/lib/transformHelpers.js:156:21
  at Server._resolveRelativePath (/Users/sushantsardeshpande/WebstormProjects/androidRemoteDebugging/ReproducerApp/node_modules/metro/src/Server.js:1023:12)
  at async Server._explodedSourceMapForBundleOptions (/Users/sushantsardeshpande/WebstormProjects/androidRemoteDebugging/ReproducerApp/node_modules/metro/src/Server.js:971:35)
  at async Promise.all (index 1)
  at async Server._symbolicate (/Users/user/WebstormProjects/androidRemoteDebugging/ReproducerApp/node_modules/metro/src/Server.js:928:26)
  at async Server._processRequest (/Users/sushantsardeshpande/WebstormProjects/androidRemoteDebugging/ReproducerApp/node_modules/metro/src/Server.js:394:7)
  BUNDLE ./index.js

[cortinico]

FYI Remote JavaScript Debugging is deprecated, as you can see from:

https://reactnative.dev/docs/other-debugging-methods#remote-javascript-debugging-deprecated

cc @huntie

[Sushant-Sardeshpande]

Yup, we do plan to move to Hermes and use either the Hermes or Experimental debugger.
However, as of now we did face some issues with date formats that were working with JSC but not Hermes, in case we face more issues we might want to keep using JSC for some more time. In which case I think for Android, remote debugging does seem to work better than adb or Flipper, at least for me.

[Sushant-Sardeshpande]

FYI Remote JavaScript Debugging is deprecated, as you can see from:

https://reactnative.dev/docs/other-debugging-methods#remote-javascript-debugging-deprecated

cc @huntie

Was doing some debugging, and realized that when it tried to reload it was always creating a new thread. PREFS_REMOTE_JS_DEBUG_KEY had been set but not used.
In DevSupportManagerBase.java
UiThreadUtil.runOnUiThread( () -> { mDevSettings.setRemoteJSDebugEnabled(isRemoteJSDebugEnabled); handleReloadJS(); });

Added a condition over it to read for the preference before starting another thread.
if (mDevSettings.isRemoteJSDebugEnabled() != isRemoteJSDebugEnabled) { UiThreadUtil.runOnUiThread( () -> { mDevSettings.setRemoteJSDebugEnabled(isRemoteJSDebugEnabled); handleReloadJS(); }); }
That seemed to do the trick for me. Not entirely sure if it would be the right way. Would appreciate if someone could confirm.
Alternately I can assign it to a DevSettings button instead. Seems like because it always causes a reload, the issue happens if the component where this is invoked from is the landing component for the app.

[jehillert]

@cortinico
Remote debugging is critical for a good developer experience and just because it is deprecated doesn't mean it should be allowed to break without a good substitute (i.e., not flipper).

Also, you guys have said "We will leave Remote JS Debugging deprecated, but not remove it until we have an full alternative ready for the community." Half of the appeal of our ecosystem are tools like the classic redux-devtools. That one tool alone has probably influenced billions of dollars of IT decisions. We had access to it, we updated, and now we don't. It's frustrating.

CC @huntie

[cortinico]

@cortinico Remote debugging is critical for a good developer experience and just because it is deprecated doesn't mean it should be allowed to break without a good substitute (i.e., not flipper).

I agree that debugging is crucial for React Native developer experience.

@huntie can share more about what is the right alternative here.

[huntie]

@jehillert Thanks for raising your concerns.

• We're actively working on a rebuilt modern debugging stack that intends to (eventually) solve all significant developer needs.
• For the time being, 3P DevTools plugins will not be something we support in this new stack at launch. We're aware this is an important use case, and therefore will not remove Remote Debugging for a long time, until this is functionality is replaced (see also this thread). Remote Debugging is deprecated, but we will continue to support any major bugs.

Closing as we previously merged #45775.