[🐛] Bug: Error receiving firebase push notification in background

[mbpictures]

Crossposting from https://github.com/facebook/react-native/issues/46775 issue of the react-native repo. All credits go to the original author! Reproduction repo available here: https://github.com/DmytroKoblents15/notificationsReproduce

Issue

Getting error Error: Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime, js engine: hermes when receiving background message from firebase on react native after updating to 0.75.3 with newArch and hermes enabled. If I disable the new arch or rollback to RN 0.74 error doesn't show up

---

Project Files

Javascript

Click To Expand

package.json:

{
  "name": "pushNotificationTest",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "react": "18.3.1",
    "react-native": "0.75.3",
    "@react-native-firebase/app": "^21.0.0",
    "@react-native-firebase/messaging": "^21.0.0",
    "@react-navigation/native": "^6.1.18",
    "@notifee/react-native": "^7.8.2",
    "@react-navigation/native-stack": "^6.11.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/babel-preset": "0.75.3",
    "@react-native/eslint-config": "0.75.3",
    "@react-native/metro-config": "0.75.3",
    "@react-native/typescript-config": "0.75.3",
    "@types/react": "^18.2.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.6.3",
    "eslint": "^8.19.0",
    "jest": "^29.6.3",
    "prettier": "2.8.8",
    "react-test-renderer": "18.3.1",
    "typescript": "5.0.4"
  },
  "engines": {
    "node": ">=18"
  }
}

firebase.json for react-native-firebase v6:

# N/A

iOS

Click To Expand

ios/Podfile:

• I'm not using Pods
• I'm using Pods and my Podfile looks like:

# Resolve react_native_pods.rb with node to allow for hoisting
require Pod::Executable.execute_command('node', ['-p',
  'require.resolve(
    "react-native/scripts/react_native_pods.rb",
    {paths: [process.argv[1]]},
  )', __dir__]).strip

platform :ios, min_ios_version_supported
prepare_react_native_project!

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'pushNotificationTest' do
  config = use_native_modules!

  use_react_native!(
    :path => config[:reactNativePath],
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'pushNotificationTestTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202
    react_native_post_install(
      installer,
      config[:reactNativePath],
      :mac_catalyst_enabled => false,
      # :ccache_enabled => true
    )
  end
end

AppDelegate.m:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"pushNotificationTest";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
  return [self bundleURL];
}

- (NSURL *)bundleURL
{
#if DEBUG
  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index"];
#else
  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}

@end

---

Android

Click To Expand

Have you converted to AndroidX?

• my application is an AndroidX application?
• I am using android/gradle.settings jetifier=true for Android compatibility?
• I am using the NPM package jetifier for react-native compatibility?

android/build.gradle:

buildscript {
    ext {
        buildToolsVersion = "34.0.0"
        minSdkVersion = 23
        compileSdkVersion = 34
        targetSdkVersion = 34
        ndkVersion = "26.1.10909125"
        kotlinVersion = "1.9.24"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath('com.google.gms:google-services:4.4.2')
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
    }
}

apply plugin: "com.facebook.react.rootproject"

android/app/build.gradle:

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"
apply plugin: 'com.google.gms.google-services'

/**
 * This is the configuration block to customize your React Native Android app.
 * By default you don't need to apply any configuration, just uncomment the lines you need.
 */
react {
    /* Folders */
    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
    // root = file("../../")
    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
    // reactNativeDir = file("../../node_modules/react-native")
    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
    // codegenDir = file("../../node_modules/@react-native/codegen")
    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
    // cliFile = file("../../node_modules/react-native/cli.js")

    /* Variants */
    //   The list of variants to that are debuggable. For those we're going to
    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
    // debuggableVariants = ["liteDebug", "prodDebug"]

    /* Bundling */
    //   A list containing the node command and its flags. Default is just 'node'.
    // nodeExecutableAndArgs = ["node"]
    //
    //   The command to run when bundling. By default is 'bundle'
    // bundleCommand = "ram-bundle"
    //
    //   The path to the CLI configuration file. Default is empty.
    // bundleConfig = file(../rn-cli.config.js)
    //
    //   The name of the generated asset file containing your JS bundle
    // bundleAssetName = "MyApplication.android.bundle"
    //
    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
    // entryFile = file("../js/MyApplication.android.js")
    //
    //   A list of extra flags to pass to the 'bundle' commands.
    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
    // extraPackagerArgs = []

    /* Hermes Commands */
    //   The hermes compiler command to run. By default it is 'hermesc'
    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
    //
    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
    // hermesFlags = ["-O", "-output-source-map"]

    /* Autolinking */
    autolinkLibrariesWithApp()
}

/**
 * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
 */
def enableProguardInReleaseBuilds = false

/**
 * The preferred build flavor of JavaScriptCore (JSC)
 *
 * For example, to use the international variant, you can use:
 * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
 *
 * The international variant includes ICU i18n library and necessary data
 * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
 * give correct results when using with locales other than en-US. Note that
 * this variant is about 6MiB larger per architecture than default.
 */
def jscFlavor = 'org.webkit:android-jsc:+'

android {
    ndkVersion rootProject.ext.ndkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion
    compileSdk rootProject.ext.compileSdkVersion

    namespace "com.voicenterRnSoftPhone"
    defaultConfig {
        applicationId "com.voicenter.softphone"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
}

dependencies {
    // The version of react-native is set by the React Native Gradle Plugin
    implementation("com.facebook.react:react-android")
    implementation 'com.google.firebase:firebase-messaging:23.0.0'

    if (hermesEnabled.toBoolean()) {
        implementation("com.facebook.react:hermes-android")
    } else {
        implementation jscFlavor
    }
}

android/settings.gradle:

pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
plugins { id("com.facebook.react.settings") }
extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
rootProject.name = 'voicenterRnSoftPhone'
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')

MainApplication.kt:

package com.voicenterRnSoftPhone

import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.soloader.SoLoader
import com.voicenterRnSoftPhone.BuildConfig
import io.invertase.firebase.app.ReactNativeFirebaseAppPackage

class MainApplication : Application(), ReactApplication {

  override val reactNativeHost: ReactNativeHost =
      object : DefaultReactNativeHost(this) {
        override fun getPackages(): List<ReactPackage> =
            PackageList(this).packages.apply {
              // Packages that cannot be autolinked yet can be added manually here, for example:
              // add(MyReactNativePackage())
            }

        override fun getJSMainModuleName(): String = "index"

        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG

        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
      }

  override val reactHost: ReactHost
    get() = getDefaultReactHost(applicationContext, reactNativeHost)

  override fun onCreate() {
    super.onCreate()
    SoLoader.init(this, false)
    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
      // If you opted-in for the New Architecture, we load the native entry point for this app.
      load()
    }
  }
}

AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

    <uses-permission android:name="android.permission.INTERNET" />

    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED" />
    <uses-permission android:name="android.permission.VIBRATE"/>

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.POST_NOTIFICATIONS"/>
    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:supportsRtl="true">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize"
        android:exported="true">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
        <intent-filter>
          <action android:name="android.intent.action.VIEW" />
          <category android:name="android.intent.category.DEFAULT" />
          <category android:name="android.intent.category.BROWSABLE" />
          <data android:scheme="com.voicenter.softphone" />
      </intent-filter>
      </activity>
      <meta-data
      android:name="com.google.firebase.messaging.default_notification_icon"
      android:resource="@mipmap/ic_launcher_round" />
      <service
            android:name="app.notifee.core.ForegroundService"
            android:foregroundServiceType="microphone" />
        <activity
            android:name=".CustomActivity"
            android:launchMode="singleTop"
            android:configChanges="keyboardHidden|orientation|screenSize"
            android:theme="@style/Theme.AppCompat.NoActionBar"
            android:showOnLockScreen="true"
            android:exported="true"
            android:showWhenLocked="true"
            android:turnScreenOn="true"
            >
            <intent-filter>
                <action android:name="com.voicenterRnSoftPhone.ACTION_OPEN_CUSTOM_ACTIVITY" />
            </intent-filter>
        </activity>
    </application>
</manifest>

---

Environment

Click To Expand

react-native info output:

System:
  OS: macOS 14.6.1
  CPU: (8) arm64 Apple M1
  Memory: 565.80 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 20.3.0
    path: ~/.nvm/versions/node/v20.3.0/bin/node
  Yarn:
    version: 1.22.22
    path: ~/.nvm/versions/node/v20.3.0/bin/yarn
  npm:
    version: 9.6.7
    path: ~/.nvm/versions/node/v20.3.0/bin/npm
  Watchman:
    version: 2024.08.19.00
    path: /opt/homebrew/bin/watchman
Managers:
  CocoaPods:
    version: 1.15.2
    path: /usr/local/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 23.2
      - iOS 17.2
      - macOS 14.2
      - tvOS 17.2
      - visionOS 1.0
      - watchOS 10.2
  Android SDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.19072.14.2412.12360217
  Xcode:
    version: 15.2/15C500b
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.11
    path: /usr/bin/javac
  Ruby:
    version: 2.6.10
    path: /usr/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.75.3
    wanted: 0.75.3
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true

• Platform that you're experiencing the issue on:
  • iOS
  • [X ] Android
  • iOS but have not tested behavior on Android
  • Android but have not tested behavior on iOS
  • Both
• react-native-firebase version you're using that has this issue:
  • 21.0.0
• Firebase module(s) you're using that has the issue:
  • messaging
• Are you using TypeScript?
  • Y

---

• 👉 Check out React Native Firebase and Invertase on Twitter for updates on the library.

[mikehardy]

As far as I understand this is not an error in this repo and we need an upstream fix.

reactwg/react-native-releases#581

[mikehardy]

Note the implication of this is that you cannot use fabric / react-native 0.76 until this is fixed upstream, assuming I understand it correctly. Notifee is waiting on the same issue (invertase/notifee#1077)

[cortinico]

As far as I understand this is not an error in this repo and we need an upstream fix.

reactwg/react-native-releases#581

We'll ship that in 0.76.1 which will be out in the next days

[ravindraguptacapgemini]

@cortinico can we also expect the fix in next minor release for 0.75?

[mikehardy]

@ravindraguptacapgemini you probably want to have that discussion on the reactwg repo issue, it's not really a fit for here

I'm thrilled to hear it is about to land though, thanks!

[mbpictures]

FYI: I tested it with the new react-native 0.76.1 version and have the same error.
Symbolicated stack trace:

Error: Exception in HostFunction: Could not enqueue microtask because they are disabled in this runtime, js engine: hermes

node_modules/react-native/Libraries/Core/Timers/immediateShim.js:44:setImmediate
node_modules/react-native/Libraries/ReactNative/AppRegistry.js:307:startHeadlessTask
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:434:__callFunction
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:113:__guard$argument_0
node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:368:__guard
react-native/Libraries/BatchedBridge/MessageQueue.js:112:callFunctionReturnFlushedQueue

The background message handler seems to have been executed, but the crash still occurs. Reference: facebook/react-native#47570

[mikehardy]

@mbpictures hmm 🤔 thanks for testing - that's unexpected, I was under the impression that should be working in 0.76.1 and that 0.76.2 was the hopefully-final fix to get setTimeout working (reactwg/react-native-releases#617)

This may need more investigation - @lovegaoshi apologies for the ping but do you continue to have headlessJS issues in 0.76.1 besides setTimeout, or is it working for you?

[lovegaoshi]

callstack? submitted a pr for the settimeout issue and afaict rntp works fine with that, though im having material-top-tab not able to navigate completely in the new arch right now, and forced to stay in old (totally unrelated to headlessJs, but im quite disappointed in how many things still break with the new arch)

…

On Tue, Nov 12, 2024, 4:59 AM Mike Hardy ***@***.***> wrote: @mbpictures <https://github.com/mbpictures> hmm 🤔 thanks for testing - that's unexpected, I was under the impression that *should* be working in 0.76.1 and that 0.76.2 was the hopefully-final fix to get setTimeout working (reactwg/react-native-releases#617 <reactwg/react-native-releases#617>) This may need more investigation - @lovegaoshi <https://github.com/lovegaoshi> apologies for the ping but do you continue to have headlessJS issues in 0.76.1 besides setTimeout, or is it working for you? — Reply to this email directly, view it on GitHub <#8091 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZMOVVTK6EVDODXLAEAHRRL2AH3STAVCNFSM6AAAAABQV26G3SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDINZQGQ3DONZYHE> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[mikehardy]

Looks like we have a reproducer on upstream issue with 0.76.1 -- facebook/react-native#47570 - thanks to mbpictures - so we do still have some issues

I suppose the only workaround at the moment is to disable new architecture on android if you are using headlessJS