Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Sushant-Sardeshpande opened this issue Jul 12, 2024 · 11 comments
Labels
Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging Platform: Android Android applications.

Comments

@Sushant-Sardeshpande
Copy link
Contributor

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
Copy link
Contributor Author

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
Copy link
Contributor

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

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

cc @huntie

@cortinico cortinico added Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging and removed Needs: Triage 🔍 labels Jul 12, 2024
@Sushant-Sardeshpande
Copy link
Contributor Author

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
Copy link
Contributor Author

Sushant-Sardeshpande commented Jul 17, 2024

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.

facebook-github-bot pushed a commit that referenced this issue Aug 8, 2024
Summary:
Added a check in setRemoteJSDebugEnabled in DevSupportManagerBase.java to check for PREFS_REMOTE_JS_DEBUG_KEY to see if the value has changed.

Fix for #45399 - App restarting when `NativeDevSettings.setIsDebuggingRemotely` is used in a landing component. If this was invoked from a component load or action that would fire on app start, it was creating an infinite loop where the app would keep on restart before eventually leading to a crash.

## Changelog:
[ANDROID] [FIXED] - Fix issue with `NativeDevSettings.setIsDebuggingRemotely` where the app would keep on restarting if remote debugging was invoked from an action / component that was called on app start.

Pull Request resolved: #45775

Test Plan:
Create a new project using RN CLI.
Set `newArchEnabled=false`.�
Install modules using `yarn install`.�
Build from source for Android by setting the following in `settings.gradle`-�
```
includeBuild('../node_modules/react-native') {
     dependencySubstitution {
         substitute(module("com.facebook.react:react-android")).using(project(":packages:react-native:ReactAndroid"))
         substitute(module("com.facebook.react:react-native")).using(project(":packages:react-native:ReactAndroid"))
         substitute(module("com.facebook.react:hermes-android")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
         substitute(module("com.facebook.react:hermes-engine")).using(project(":packages:react-native:ReactAndroid:hermes-engine"))
     }
 }
```
Set the ANDROID_HOME and ANDROID_NDK_HOME environment variables required for react native.�Call `NativeDevSettings.setIsDebuggingRemotely` from App.tsx which is the landing component.�
Test with both `hermesEnabled=true` and `hermesEnabled=false` and ensure that app does not keep on restarting after fix.

Reviewed By: cipolleschi

Differential Revision: D60377406

Pulled By: huntie

fbshipit-source-id: c8faf184b50b67f50f8a4b6851df9d0ef3350949
@jehillert
Copy link

jehillert commented Aug 23, 2024

@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
Copy link
Contributor

@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
Copy link
Member

huntie commented Aug 27, 2024

@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.

@huntie huntie closed this as completed Aug 27, 2024
@jehillert
Copy link

@huntie,
Let's say I wanted to figure out how to make RND compatible with the new architecture and the new debugging I/O. Is there someone on your side I could get some guidance from? And also, how complicated would it be? In my head, I am picturing maybe a week of work (with guidance), but maybe I misunderstand the scale of the changes required.

@jehillert
Copy link

And to be even less ambitious, I'm just interested in classic redux devtools, and the maybe reviving the ability to listen for network calls. I think having those two things back would make most of us very happy. The rest of what we want is already covered by react devtools and the experimental debugger

@jehillert
Copy link

The problem with remote debugging is it's not just deprecated. It's broken. It's been broken for at least a year. And not just once, it seems at least twice now. Three times, if you include incompatibility with react-native-reanimated (so three times). How can I convince my team to accept a patch if it's just going to break again 3 months down the road?

@jehillert
Copy link

@huntie
I switched jobs twice this year. The first one put me on a team of about 20 react native devs. The second one is smaller. There are 4 of us. Both used redux. At the first place, nobody had access to the redux devtools. It took me about a week to figure out the full solution to getting remote debugging to work for their current version of react native. And we had to have an architecture meeting for me to get the merge request approved.

At the second place, nobody knew it existed (young crew). Or the experimental debugger. They have just been console logging everything out.

What I'm trying to say is it may seem like you left us with enough to hold us over until the new experience is done. But I would bet the practical result is that most of the community no longer has access to redux devtools or network calls. Or any idea how to get them back. And a smaller but significant portion of the community isn't using anything to debug. Just console.logs. it's a much bigger problem than you guys are aware of, imho.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Debugger Issues related to React Native DevTools or legacy JavaScript/Hermes debugging Platform: Android Android applications.
Projects
None yet
Development

No branches or pull requests

4 participants