facebook / react-native

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

iOS crashes when retrieving an image on a device using XMLHttpRequest #32784

Closed dododoSA closed 2 years ago

dododoSA commented 2 years ago

Description

The app crashes when I try to save the images I took to Firebase Storage. (This only happens on iOS)

After checking line by line using console.log, I found that the crash occurred at the point where XMLHttpRequest is used, as shown below.

Crash Log

Thread 18 name:   Dispatch queue: com.facebook.ABI43_0_0React.NetworkingQueue
Thread 18 Crashed:
0   libsystem_kernel.dylib                 0x1b90c0964 __pthread_kill + 8
1   libsystem_pthread.dylib                0x1f2520378 pthread_kill + 268
2   libsystem_c.dylib                      0x18d10e420 __abort + 128
3   libsystem_c.dylib                      0x18d0b6f5c abort + 176
4   libc++abi.dylib                        0x19a9f5bc4 abort_message + 132
5   libc++abi.dylib                        0x19a9e6fd8 demangling_terminate_handler() + 332
6   libobjc.A.dylib                        0x19a8f4064 _objc_terminate() + 144
7   libc++abi.dylib                        0x19a9f4f58 std::__terminate(void (*)()) + 20
8   libc++abi.dylib                        0x19a9f4ef4 std::terminate() + 64
9   libdispatch.dylib                      0x181eeb674 _dispatch_client_callout + 40
10  libdispatch.dylib                      0x181ef2de4 _dispatch_lane_serial_drain + 672
11  libdispatch.dylib                      0x181ef3958 _dispatch_lane_invoke + 392
12  libdispatch.dylib                      0x181efe1a8 _dispatch_workloop_worker_thread + 656
13  libsystem_pthread.dylib                0x1f251a0f4 _pthread_wqthread + 288
14  libsystem_pthread.dylib                0x1f2519e94 start_wqthread + 8

Version

0.64.3

Output of react-native info

System: OS: macOS 11.5.2 CPU: (8) arm64 Apple M1 Memory: 80.69 MB / 8.00 GB Shell: 3.3.1 - /opt/homebrew/bin/fish Binaries: Node: 14.17.6 - ~/.nodebrew/current/bin/node Yarn: 1.22.11 - ~/.nodebrew/current/bin/yarn npm: 6.14.15 - ~/.nodebrew/current/bin/npm Watchman: Not Found Managers: CocoaPods: Not Found SDKs: iOS SDK: Platforms: iOS 15.0, DriverKit 20.4, macOS 11.3, tvOS 15.0, watchOS 8.0 Android SDK: Not Found IDEs: Android Studio: Arctic Fox 2020.3.1 Patch 4 Arctic Fox 2020.3.1 Patch 4 Xcode: 13.0/13A233 - /usr/bin/xcodebuild Languages: Java: 11.0.12 - /Users/akihiro/.sdkman/candidates/java/current/bin/javac npmPackages: @react-native-community/cli: Not Found react: 17.0.1 => 17.0.1 react-native: 0.64.3 => 0.64.3 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

  1. Create an expo app.
  2. Start on iOS.
  3. Get the uri of the photo taken by the file picker.
  4. Save to Firebase Storage with the following code.

Snack, code example, screenshot, or link to a repository

The app crashes when retrieving an image file as shown below.

      const blob = await new Promise<Blob>((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = () => {
          resolve(xhr.response);
        };
        xhr.onerror = (e) => {
          reject(new TypeError('Network request failed'));
        };
        xhr.responseType = 'blob';
        xhr.open('GET', values.imageUrl, true);
        xhr.send(null);
      });

      console.log('This log is not output. ')
      const avatarRef = ref(storage, path);
      await uploadBytes(avatarRef, blob, metadata); // from 'firebase/storage'

If you use setTimeout to delay the timing of resolve, it will work without crashing. (I am not sure why.)

      const blob = await new Promise<Blob>((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = () => {
          // changed here
          setTimeout(() => {
            resolve(xhr.response);
          }, 500);
        };
        xhr.onerror = (e) => {
          reject(new TypeError('Network request failed'));
        };
        xhr.responseType = 'blob';
        xhr.open('GET', values.imageUrl, true);
        xhr.send(null);
      });

      const avatarRef = ref(storage, path);
      await uploadBytes(avatarRef, blob, metadata); // from 'firebase/storage'
Neiso commented 2 years ago

Still have the issue ... Can't believe we're the only two facing cause I would think that more people on expo try to upload media to firebase.

dododoSA commented 2 years ago

https://github.com/firebase/firebase-js-sdk/issues/5848

cortinico commented 2 years ago

firebase/firebase-js-sdk#5848

Closing as there is a follow-up issue in another repo. Moreover the mentioned RN version is really old. Would be worth trying on RN 0.69 and re-opening if the issue persists