search

facebook / react-native

A framework for building native applications using React
https://reactnative.dev
MIT License
118.16k stars 24.21k forks source link

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

Open lovegaoshi opened 4 weeks ago

lovegaoshi commented 4 weeks ago

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 commented 4 weeks ago

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

robik commented 3 weeks ago

@cortinico sure thing! I will look into it

Medkhat commented 1 week ago

@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 commented 1 day ago

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 commented 1 day ago

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 commented 1 day ago

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

robik commented 9 hours ago

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):

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

lovegaoshi commented 3 hours ago

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 commented 3 hours ago

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 commented 3 hours ago

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 commented 3 hours ago

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 commented 3 hours ago

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