[Android] Emiting Events from HeadlessTask on Android in New Arch + Bridgeless + interop layer

[lovegaoshi]

Description

Hi! this is a continuation thread of https://github.com/facebook/react-native/issues/44255 to resolve the new arch (being pushed as in RN 0.75.1) compatibility to RNTP. I finally have react native compile from source set up and tried out the patch outlined in https://github.com/facebook/react-native/pull/45100 using RN 0.75.1 with the PR patched in. While old arch still functions AFAICT, the new arch now shows this error:

BUNDLE  ./index.js 

(NOBRIDGE) LOG  Bridgeless mode is enabled
(NOBRIDGE) LOG  Running "RNTPExampleNewArch" with {"rootTag":11,"initialProps":{},"fabric":true}
(NOBRIDGE) LOG  getInitialURL null
(NOBRIDGE) ERROR  Error: Failed to call into JavaScript module method AppRegistry.startHeadlessTask(). Module has not been registered as callable. Registered callable JavaScript modules (n = 8): GlobalPerformanceLogger, RCTNativeAppEventEmitter, SamplingProfiler, RCTDeviceEventEmitter, HMRClient, RCTLog, HeapCapture, Systrace. Did you forget to call `registerCallableModule`?

many thanks in advance for looking into this!

Steps to reproduce

yarn run

React Native Version

0.75.1

Affected Platforms

Runtime - Android

Areas

TurboModule - The New Native Module System, Bridgeless - The New Initialization Flow

Output of npx react-native info

System:
  OS: Linux 6.5 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
  CPU: (16) x64 AMD Ryzen 7 3700X 8-Core Processor
  Memory: 25.98 GB / 62.72 GB
  Shell:
    version: 5.1.16
    path: /bin/bash
Binaries:
  Node:
    version: 21.7.2
    path: ~/.nvm/versions/node/v21.7.2/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v21.7.2/bin/yarn
  npm:
    version: 10.5.0
    path: ~/.nvm/versions/node/v21.7.2/bin/npm
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
IDEs:
  Android Studio: Not Found
Languages:
  Java: Not Found
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.1
    wanted: 0.75.1
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: Not found
  newArchEnabled: false

Stacktrace or Logs

(NOBRIDGE) LOG  Bridgeless mode is enabled
 (NOBRIDGE) LOG  Running "RNTPExampleNewArch" with {"rootTag":11,"initialProps":{},"fabric":true}
 (NOBRIDGE) LOG  getInitialURL null
 (NOBRIDGE) ERROR  Error: Failed to call into JavaScript module method AppRegistry.startHeadlessTask(). Module has not been registered as callable. Registered callable JavaScript modules (n = 8): GlobalPerformanceLogger, RCTNativeAppEventEmitter, SamplingProfiler, RCTDeviceEventEmitter, HMRClient, RCTLog, HeapCapture, Systrace. Did you forget to call `registerCallableModule`?

Reproducer

https://github.com/lovegaoshi/RNTPExampleNewArch/tree/fix

Screenshots and Videos

No response

[cortinico]

cc @robik is this something you could help us investigate with?

[robik]

@cortinico sure thing! I will look into it

[Medkhat]

@cortinico Hi there! This issue is not only Android related, it also breaks the connection between the Metro bundler and the native side on iOS)

[robik]

Hey, @lovegaoshi I've tested your repro on React Native 0.75.3 and it seems to be working well with this fix applied https://github.com/doublesymmetry/react-native-track-player/pull/2290

I did not use the exact changes from the above PR, but something similar (made all function return Unit)

[lovegaoshi]

thank u for the attention! @robik

I just tried w/ rn 0.75.3 and the same issue persists as described in https://github.com/doublesymmetry/react-native-track-player/pull/2290#issuecomment-2075614783 the app builds, UI renders, but none of the events emit after buttons pressed, and the notification control is broken. If the bridge interop layer is disabled with load(bridgelessEnabled=false), everything functions as expected. This was assumed to be because RNTP uses headlessJs to register event listeners and none of them are returned as headlessJs in newarch is broken. AFAIK headlessJs is necessary as RNTP, a music playing library needs it for background playback.

log with RN 0.75.3: (where NOBRIDGE event logs are not being registered)

 BUNDLE  ./index.js 

 (NOBRIDGE) LOG  Bridgeless mode is enabled
 (NOBRIDGE) LOG  Running "RNTPExampleNewArch" with {"rootTag":11,"initialProps":{},"fabric":true}
 (NOBRIDGE) LOG  getInitialURL null
 BUNDLE  ./index.js 

 ERROR  Error: Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime, js engine: hermes
 LOG  Failed to print error:  Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime
 LOG  Event.PlaybackActiveTrackChanged {"index": 0, "lastIndex": 8, "lastPosition": 0, "lastTrack": {"artist": "David Chavez", "artwork": {"__packager_asset": true, "height": 600, "scale": 1, "uri": "http://10.0.2.2:8081/assets/src/assets/resources/artwork.jpg?platform=android&hash=9c875f17fc8e812a3c6804b402f868df", "width": 600}, "duration": 28, "title": "Pure (Demo)", "url": {"__packager_asset": true, "scale": 1, "uri": "http://10.0.2.2:8081/assets/src/assets/resources/pure.m4a?platform=android&hash=c6a1c0468e889547981a422afa6f0860"}}, "track": {"artist": "David Chavez", "artwork": "https://rntp.dev/example/Longing.jpeg", "duration": 143, "title": "Longing", "url": "https://rntp.dev/example/Longing.mp3"}}
 LOG  Event.PlaybackState {"state": "loading"}
 LOG  Event.PlaybackState {"state": "buffering"}

my repo linked above uses the patched branch already.

with RN PR patched the same error persists in 0.75.3.

BUNDLE  ./index.js 

 (NOBRIDGE) LOG  Bridgeless mode is enabled
 (NOBRIDGE) LOG  Running "RNTPExampleNewArch" with {"rootTag":11,"initialProps":{},"fabric":true}
 (NOBRIDGE) LOG  getInitialURL null
 (NOBRIDGE) ERROR  Error: Failed to call into JavaScript module method AppRegistry.startHeadlessTask(). Module has not been registered as callable. Registered callable JavaScript modules (n = 8): GlobalPerformanceLogger, RCTNativeAppEventEmitter, SamplingProfiler, RCTDeviceEventEmitter, HMRClient, RCTLog, HeapCapture, Systrace. Did you forget to call `registerCallableModule`?

[lovegaoshi]

i guess its worth noting myself and others are also dependent on headlessJs being functional using the new arch besides RNTP.

[robik]

Hey, I've checked it again and yeah, I missed the events. 😅

I've set up two PRs that should fix the issue (on both React Native and RNTP):

• https://github.com/doublesymmetry/react-native-track-player/pull/2370
• https://github.com/facebook/react-native/pull/46480

Let me know if anything else is broken I forgot to check :) cc @lovegaoshi

[lovegaoshi]

omg tysm! at a short glance everything seems to be in order. I do see the old arch now breaks - bc the old arch's appregistry related code is being removed. Could we add that back in? I can pitch the PR but im wildly not familiar w/ how FB does it.

in addition I'm assuming the new RNTP PR now breaks RN backward compatibility due to depending on this addition of getReactHost in headlessJsTaskService? I dont know how RNTP will take it, but I will def use it in my maintained fork.

my current patches look like this

ofc I need to test this heavily in prod, but unrelated, what are the chances these changes can be included in RN 0.76? cc @cortinico

again ty for the work!! @robik

[cortinico]

ofc I need to test this heavily in prod, but unrelated, what are the chances these changes can be included in RN 0.76? cc @cortinico

As this is a bugfix, we can include it inside 0.76. @robik @lovegaoshi can you open a pick request here https://github.com/reactwg/react-native-releases/issues/new/choose

[robik]

omg tysm! at a short glance everything seems to be in order. I do see the old arch now breaks - bc the old arch's appregistry related code is being removed. Could we add that back in? I can pitch the PR but im wildly not familiar w/ how FB does it.

It should not break it as the registerCallableModule that is now used handles both new and old arch. I will look into old arch as well.

in addition I'm assuming the new RNTP PR now breaks RN backward compatibility due to depending on this addition of getReactHost in headlessJsTaskService? I dont know how RNTP will take it, but I will def use it in my maintained fork.

my current patches look like this

Well, the PR is mostly for testing and preview, forgot to mention the part about backward compatibility. Maybe some gradle sourceSet trick can work.

again ty for the work!! @robik

If anything breaks feel free to ping me here 👍

[robik]

ofc I need to test this heavily in prod, but unrelated, what are the chances these changes can be included in RN 0.76? cc @cortinico

As this is a bugfix, we can include it inside 0.76. @robik @lovegaoshi can you open a pick request here reactwg/react-native-releases/issues/new/choose

I can open the pick request. I will do it after I test what is wrong with the old arch (if anything).

[lovegaoshi]

ty! @robik if helps this is the error log with the old arch:

BUNDLE  ./index.js 

 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 9): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient.
          A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 9): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient.
          A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes

[cortinico]

@robik @lovegaoshi can we consider this close after https://github.com/facebook/react-native/pull/46480 ?

[lovegaoshi]

#46480 now breaks headlessJsTaskService in the old arch; I can make mine work by not removing the old arch related line from #46480 but @robik wrote it shouldnt break

[cortinico]

@robik can we follow up and making it non-breaking for Old Arch?

[robik]

@cortinico I'll be testing it today as it should work on both archs

[robik]

I believe I tested it thoroughly and it works on both platforms. @lovegaoshi are you sure you rebuilt it from source and that the patches were not overriden? I retested it on your repo directly with patches applied.

Let me know if it worked for you or not so that I can proceed with pick request :)

[lovegaoshi]

@robik My repo's patch didnt delete this line from #46480 (where the else handled the old arch AppRegistry), so it works on both architecture; if you delete that line as #46480 is, the old arch breaks with this log:

BUNDLE  ./index.js 

 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 9): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient.
          A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 9): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient.

appreciate the attention as always <3

[robik]

@robik My repo's patch didnt delete this line from #46480 (where the else handled the old arch AppRegistry), so it works on both architecture; if you delete that line as #46480 is, the old arch breaks with this log:

BUNDLE  ./index.js 

 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 9): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient.
          A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native., js engine: hermes
 ERROR  Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Bridgeless Mode: false. Registered callable JavaScript modules (n = 9): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, HMRClient.

appreciate the attention as always <3

@lovegaoshi This is interesting. The else branch should not affect this, as the new code calls Core/registerCallableModule, which does exactly what the else branch did as you can see here https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Core/registerCallableModule.js#L31

Can you try on fresh app applying the patches manually?

[lovegaoshi]

flase alarm; I must have not moved the registerAppRegistry part out from the if, my apologies:S tysm for your work!

[cortinico]

flase alarm; I must have not moved the registerAppRegistry part out from the if, my apologies:S tysm for your work!

Closing then 👍

[cortinico]

@robik Thank you very much for your priceless support!