🔥 [🐛] Exception thrown on iOS when reloading while using a storage emulator

[TPXP]

Issue

When using a storage emulator in development, apps would include the following code:

import storage from '@react-native-firebase/storage';

if(__DEV__) {
  storage().useEmulator('localhost', 9032);
}

However, when reloading the app (which super common in development 😆), the call triggers again and causes a native exception to be thrown.

The root cause is here https://github.com/firebase/firebase-ios-sdk/blob/master/FirebaseStorage/Sources/FIRStorage.m#L331

---

Project Files

Javascript

Click To Expand

package.json:

{
  "dependencies": {
    "@react-native-firebase/app": "^12.3.0",
    "@react-native-firebase/storage": "^12.3.0",
   }
}

firebase.json for react-native-firebase v6:

# I don't have a firebase.json file

iOS

Click To Expand

ios/Podfile:

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

platform :ios, '11.0'

require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
require_relative '../node_modules/react-native/scripts/react_native_pods'

target 'MyApp' do
  config = use_native_modules!
  use_unimodules!

  use_react_native!(
    :path => config[:reactNativePath],
    # to enable hermes on iOS, change `false` to `true` and then install pods
    :hermes_enabled => true
  )

  # Enables Flipper - not for CI builds as it takes some build time
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  unless ENV['CI']
    use_flipper!

    post_install do |installer|
      flipper_post_install(installer)
      __apply_Xcode_12_5_M1_post_install_workaround(installer)
    end
  end
end

AppDelegate.m:

// ...

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
#ifdef FB_SONARKIT_ENABLED
  InitializeFlipper(application);
#endif

  // Initialize Firebase
  if ([FIRApp defaultApp] == nil) {
    [FIRApp configure];
  }
  
  NSDictionary *appProperties = [RNFBMessagingModule addCustomPropsToUserProps:nil withLaunchOptions:launchOptions];
  
  RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:launchOptions];
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"My App" initialProperties:appProperties];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1f green:1f blue:1f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];

  return YES;
}

// ...

---

Android

Click To Expand

I'm experiencing this issue on iOS, haven't tested on Android

---

Environment

Click To Expand

react-native info output:

info Fetching system and libraries information...
System:
    OS: macOS 12.0.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 31.08 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 17.0.1 - /var/folders/sk/w9rdw6bd3j9gbnqqh9z2v8d80000gp/T/yarn--1637142522564-0.10748225938512168/node
    Yarn: 1.22.17 - /var/folders/sk/w9rdw6bd3j9gbnqqh9z2v8d80000gp/T/yarn--1637142522564-0.10748225938512168/yarn
    npm: 8.1.0 - /usr/local/bin/npm
    Watchman: 2021.10.18.00 - /usr/local/bin/watchman
  Managers:
    CocoaPods: Not Found
  SDKs:
    iOS SDK:
      Platforms: DriverKit 21.0.1, iOS 15.0, macOS 12.0, tvOS 15.0, watchOS 8.0
    Android SDK: Not Found
  IDEs:
    Android Studio: 2020.3 AI-203.7717.56.2031.7784292
    Xcode: 13.1/13A1030d - /usr/bin/xcodebuild
  Languages:
    Java: 11.0.12 - /usr/local/opt/openjdk@11/bin/javac
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.66.2 => 0.66.2
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found
✨  Done in 3.17s.

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

Potential fix

For now, I'm silencing the error. But there's probably a smarter way to handle this.

diff --git a/node_modules/@react-native-firebase/storage/ios/RNFBStorage/RNFBStorageModule.m b/node_modules/@react-native-firebase/storage/ios/RNFBStorage/RNFBStorageModule.m
index 3b5763c..e94e048 100644
--- a/node_modules/@react-native-firebase/storage/ios/RNFBStorage/RNFBStorageModule.m
+++ b/node_modules/@react-native-firebase/storage/ios/RNFBStorage/RNFBStorageModule.m
@@ -488,7 +488,14 @@ RCT_EXPORT_METHOD(useEmulator
                   : (NSInteger)port) {
   emulatorHost = host;
   emulatorPort = port;
-  [[FIRStorage storageForApp:firebaseApp] useEmulatorWithHost:host port:port];
+  @try {
+    [[FIRStorage storageForApp:firebaseApp] useEmulatorWithHost:host port:port];
+  } @catch (NSException *e) {
+    // Ignore "Cannot connect to emulator after Storage SDK initialization."
+    if ([e name] != NSInternalInconsistencyException) {
+      @throw e;
+    }
+  }
 }
 
 /**

[minhoyooDEV]

same here

[pyarmak]

Had the same issue. Used @TPXP workaround to silence the error for now.

[eriklundstrom]

Same here

[tomskopek]

Same here! @TPXP @pyarmak - how did you add this workaround? I tried using patch-package but ran into some errors with react-native-firebase, and also tried forking but also ran into some issues there. I would be grateful to learn how you went about patching it

[stale[bot]]

Hello 👋, to help manage issues we automatically close stale issues. This issue has been automatically marked as stale because it has not had activity for quite some time. Has this issue been fixed, or does it still require the community's attention?

This issue will be closed in 15 days if no further activity occurs. Thank you for your contributions.

[TPXP]

The issue has not been resolved, please don't close it.

@tomskopek Using patch-package should be pretty straightforward:

1. Install it as a dependency of your project, follow the instructions in their readme
2. Modify something in node_modules
3. yarn patch-package <package you changed>
4. It generates a .patch file, which it will use next time the module is installed (as your changes would be overwritten).
5. That's it, your module is patched. If you're facing an issue, I'm afraid you'll have to clarify what's going on exactly (error messages, ...) 😉

[mikehardy]

yep - I just pinned it so the stale bot will stay away The only better (?) way to handle it might be to have some sort of static state in the object that toggles on when useEmulator is called, and just ignores a useEmulator call if it is called a second time. If the error message was 100% an exact match for the string in question - so we knew for certain we were not at risk of false positives / ignoring things we shouldn't, that could work but I think the exception is valid + good to throw in other cases

So storing it in state somehow is better I think - just a BOOL var on the instance that defaults false, and if useEmulator is called, checks if already true ? ignores if true : or sets it to true then calls SDK useEmulator...

[c-shimmer]

Still seeing this issue unfortunately.

[mikehardy]

@c-shimmer yep, with no comments above yours recently, and it being open source, that means nothing has happened (yet). The last comment of mine has a general roadmap for what seems like a viable implementation plan if you wanted to post a PR though

[mikehardy]

This took a while, but the release of v16.0.0 contains a fix for this in storage emulator - please test, we can reopen if this still happens