search

facebook / react-native

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

Flipper for React Native 0.62 #27565

Closed rickhanlonii closed 4 years ago

rickhanlonii commented 4 years ago

Overview

This issue is to track items to get Flipper enabled for 0.62.

RNTester Integration

Default Template Integration

Upgrade Flipper SDK Version

Upgrading

Documentation

Commits to Cherry Pick

react-native-bot commented 4 years ago

We are automatically closing this issue because it does not appear to follow any of the provided issue templates.

👉 Click here if you want to report a reproducible bug or regression in React Native.

elicwhite commented 4 years ago

I give up. @hramos! 😭

rmevans9 commented 4 years ago

While working on a Flipper plugin it was noted that the inclusion of FlipperKit in the Podfile caused pods to need to install openssl-ios-bitcode which required building openssl for all the architectures. As you can imagine this takes a while. In a normal pod install the developer will not know what is going on likely as this is what they will see for a long time:

Screen Shot 2019-12-18 at 8 12 14 PM

If you run pod install --verbose you can actually see progress during this process. On my machine it took a good 10+ minutes to complete this install. The good news is once this pod is in your cache future pod installs are much quicker. If you would like to experience this first hand you can do the following steps:

  1. Run pod cache clear openssl-ios-bitcode
  2. Run pod install (include --verbose if you are interested in seeing what it is actually doing) in a ios folder of a RN project with the FlipperKit pods setup. If Pods have been installed previously do a rm -rf Pods/ for good measure too.

I understand the need for this library but it will be a jarring experience for developers upgrading and also for first time users of react-native. I feel like if we can't avoid it that it is at least worth calling attention to it so users don't cancel the pod install part way through and say its broken.

Edit: It seems maybe the openssl-ios-bitcode dependency changed here https://github.com/facebook/flipper/pull/577/files so maybe this is a non issue with the later versions of Flipper. My experience is based upon the Flipper version that was floating around the rn repository a while back - 0.23.6

elicwhite commented 4 years ago

@rmevans9, I added that to the checklist. 👍

charpeni commented 4 years ago

@rmevans9 thanks for bringing that.

I confirm that bumping the version from 0.23.6 to 0.30.0 solved that issue, we now rely on OpenSSL-Universal (1.0.2.19) instead of openssl-ios-bitcode. I've just double checked, and openssl-ios-bitcode is not in Podfile.lock.

charpeni commented 4 years ago

Looks like I got you, bot!

rmevans9 commented 4 years ago

@charpeni ok perfect! I am glad that issue got solved with the upgrade.

safaiyeh commented 4 years ago

Submitted a PR to initialize Flipper on Android & iOS based on the context from @axe-fb.

PR: https://github.com/facebook/react-native/pull/27569

Conversation: https://github.com/react-native-community/releases/issues/145#issuecomment-567597488

birkir commented 4 years ago

Have this issue enabling Flipper on android.

execution failed for task ':app:checkDebugDuplicateClasses'.
> 1 exception was raised by workers:
  java.lang.RuntimeException: Duplicate class com.facebook.jni.CppException found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.CppSystemErrorException found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.DestructorThread found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.DestructorThread$1 found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.DestructorThread$Destructor found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.DestructorThread$DestructorList found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.DestructorThread$DestructorStack found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.DestructorThread$Terminus found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.HybridClassBase found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.HybridData found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.HybridData$Destructor found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.IteratorHelper found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.MapIteratorHelper found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.NativeRunnable found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.ThreadScopeSupport found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)
  Duplicate class com.facebook.jni.UnknownCppException found in modules classes.jar (com.facebook.fbjni:fbjni:0.0.2) and classes.jar (com.facebook.react:react-native:0.62.0-rc.0)

if I exclude com.facebook.fbjni from either implementation the app compiles but I will have a runtime error of SoLoader not finding jsfbni.so

mjmasn commented 4 years ago

Hey @rickhanlonii, I enabled Flipper for our React Native 0.61.5 app a few weeks ago. Flipper works fine apart from React Devtools (due to React React Native version, so should be resolved in 0.62)

However, since then any XMLHttpRequest PUT requests seem to be failing with status=0. This is for uploading files to Amazon S3.

Disabling Flipper resolves the problem. Production builds haven't been affected because Flipper was only enabled for debug builds.

I can't really provide a simple repro as it takes various file picker, aws setup etc. But just wanted to make sure you're aware of the issue. Happy to provide more information if required.

rickhanlonii commented 4 years ago

@birkir thanks for the info, this is the issue @mdvacca is looking into 👍

@mjmasn thanks for the info, what's the issue with the React DevTools?

mjmasn commented 4 years ago

@rickhanlonii I think it's just that React Native 0.61.x only supports v3 of devtools. Gives an error in Flipper saying to install react-devtools@^3, which doesn't really help because v4 is built into Flipper.

https://reactjs.org/blog/2019/08/15/new-react-devtools.html#which-versions-of-react-are-supported says that React Native 0.62.x will be supported in devtools v4 (and presumably in Flipper too).

safaiyeh commented 4 years ago

@rickhanlonii I updated RNTester to include Flipper support.

https://github.com/facebook/react-native/pull/27631

rickhanlonii commented 4 years ago

@mjmasn were you ever able to track down the HTTP issue?

mjmasn commented 4 years ago

@rickhanlonii I haven't really looked into it, wondered if it was to do with the file size as there was some issue fixed in Flipper for large responses but actually it fails even with a 9kB file request as seen below. Note the 'Stream Closed' response. Maybe the RN NetworkingModule is trying to consume a stream that was already consumed by the Flipper network plugin? That's just a guess, I don't know enough about Android / Java / Flipper to know exactly what's going on.

No errors are logged to adb when this occurs.

{
  UNSENT: 0,
  OPENED: 1,
  HEADERS_RECEIVED: 2,
  LOADING: 3,
  DONE: 4,
  readyState: 4,
  status: 0,
  timeout: 900000,
  withCredentials: true,
  upload: {},
  _aborted: false,
  _hasError: true,
  _method: 'PUT',
  _response: 'Stream Closed',
  _url:
    'https://REDACTED.s3.amazonaws.com/REDACTED',
  _timedOut: false,
  _trackingName: 'unknown',
  _incrementalEvents: false,
  responseHeaders: undefined,
  _requestId: null,
  _cachedResponse: undefined,
  _headers: { 'content-type': 'image/jpeg', 'content-length': '9933' },
  _responseType: '',
  _sent: true,
  _lowerCaseResponseHeaders: {},
  _subscriptions: []
};
rickhanlonii commented 4 years ago

Added testing this upgrade tool per #27879

alloy commented 4 years ago

https://github.com/facebook/react-native/pull/27922 addresses #27426

alloy commented 4 years ago

Flipper is looking great and I can’t wait to use it in earnest; great job, y’all! ✨👏

I took it for a test-drive and have a few pieces of feedback to perhaps make the experience a little smoother. (I can send PRs for any of these!)

rickhanlonii commented 4 years ago

@alloy that all seems to make sense to me and seems like a safer option for upgrades, want to send the PRs?

rickhanlonii commented 4 years ago

Ok I ran some testing and:

RNTester

Default template

alloy commented 4 years ago

As mentioned above, a change was made in Flipper’s dependencies to switch from the openssl-ios-bitcode pod to OpenSSL-Universal in order to reduce build times. However, the OpenSSL-Universal pod does not include a bitcode slice, which both Apple’s and RN’s application templates enable by default for device builds (simulator builds are unaffected).

This means that, with the current RN template, users will not be able to build for device and have Flipper integrated at the same time.

Perhaps possible, but, as of yet, untested solutions:

priteshrnandgaonkar commented 4 years ago

Disable bitcode in Debug configurations in the RN template. (Unsure if there any cons to this.)

I think we should try this approach, as Flipper is enabled only for Debug builds.

Use a different existing pod that does have prebuilt binaries for bitcode. (Unsure if one exists.)

I had looked at it last time, but didn't find any such prebuilt binaries.

Revert to building from source. (While this does take long initially, it does bring us closer to a setup where Flipper will be able to build with both static and dynamic libs without the need to monkey-patch CocoaPods.)

Not entirely sure about this approach, as the build times are long at the start, and due to which we have also faced some CI test's time outs and user reports regarding the long build times.

priteshrnandgaonkar commented 4 years ago

@alloy Sample, SampleSwift and Tutorial apps in Flipper repo are bitcode enabled and they compile. OpenSSL-Universal seems to be bitcode enabled, see this

alloy commented 4 years ago

Well blimey, that’s great! I’ll double-check my build machine tomorrow to see why ld was complaining about this.

alloy commented 4 years ago

Alas, seems not the case:

ld: '/Users/eloy/tmp/TestWithAllChanges/ios/Pods/OpenSSL-Universal/ios/lib/libcrypto.a(bio_lib.o)' does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated library from the vendor, or disable bitcode for this target. for architecture arm64

We can see that the slices have no bitcode section:

otool -l -arch arm64 ios/Pods/OpenSSL-Universal/ios/lib/libssl.a  | grep LLVM
otool -l -arch arm64 ios/Pods/OpenSSL-Universal/ios/lib/libcrypto.a | grep LLVM

…and indeed, looking at the last commits of the OpenSSL-Universal pod, bitcode has been disabled:

$ git log --pretty=oneline
17794e6faf5928f42264a7e3ef093ea7c08c5a15 (HEAD -> master, tag: 1.0.219, tag: 1.0.2.19, origin/master, origin/HEAD) Rebuild without bitcode
7ca5804216a079ce057d01502cc224c2a34642ea ENABLE_BITCODE = NO for iOS target
896c0ae5d5d10e93dd93789125ee12860df1ffb9 Add missing include
52ef14139ab791650ddad38ece782285ef56d722 Update FUNDING.yml
9e14bcdd27ae2323742cbdb8c221ae48ad1b19ac Merge pull request #74 from ilammy/disable-bitcode
5477325f53df56b92f672ea7c2399aed46c5e4fc Disable LLVM bitcode support (again)

On the flip side, I did experiment with changing the application to build without bitcode in Debug and that did successfully build and run. (The Flipper client applications finds the app running on my device, although it doesn’t seem to connect or detect any plugins, is that known? Just found https://github.com/facebook/flipper/issues/262)

In any case, it seems like for now the best solution would be to indeed disabled bitcode in Debug builds by default in the RN application template.

alloy commented 4 years ago

So regarding the need to use a preprocessor define to compile Flipper into the app, I did create https://github.com/react-native-community/cli/pull/958 and https://github.com/alloy/react-native/commit/ae4f936753e1ff2cfd134e220924597166db5ee4.

However, having thoroughly tested this manually, I came around to how this should work. It feels like we don’t need to take on this extra fragmented complexity; instead we just always define FB_SONARKIT_ENABLED in the Debug configuration and only wrap the AppDelegate.m code in a #if DEBUG.

People can always just remove the code from AppDelegate.m entirely, like they can the dependencies from their Podfile.

Put differently; imo we can just always enable Flipper by default in the template and keep things simple.

alloy commented 4 years ago

Alright, https://github.com/facebook/react-native/pull/28044 should address all my open feedback.

todorone commented 4 years ago

Is Flipper can be already consumed in latest 0.62 RC? Super excited about it, thanks a lot to all contributors for working on integration.

alloy commented 4 years ago

@todorone Yes, it’s available in the 0.62.0 RCs; please do try!

younes200 commented 4 years ago

Hi, Just to mention that ENABLE_BITCODE must be disable on debug, otherwise the build will fail complaining about the missing OpenSSL-Universal bitcode.

  - Flipper-Folly (2.1.1):
    - boost-for-react-native
    - CocoaLibEvent (~> 1.0)
    - Flipper-DoubleConversion
    - Flipper-Glog
    - OpenSSL-Universal (= 1.0.2.19)
alloy commented 4 years ago

Going to close this, as this ship has set sail! :shipit:

evelant commented 4 years ago

@alloy react-devtools is completely broken in RN 0.62 both standalone and in flipper. It never connects!

Flipper developer tools console outputs bundle.js:223329 Error: Feature not implemented at getUser (bundle.js:56816) at _default (bundle.js:223325) at bundle.js:212244 at Array.map () at _default (bundle.js:212244) at bundle.js:315 at Object.rehydrate (bundle.js:73230) at _rehydrate (bundle.js:72579) at bundle.js:72604 (anonymous) @ bundle.js:223329

mweststrate commented 4 years ago

@AndrewMorsillo please don't respond to closed issue as very little people will see them, and provide relevant reproduction information. "Doesn't work" is unactionable.

ezranbayantemur commented 4 years ago

After updating 0.61.5 to 0.62.2 ENABLE_BITCODE error drives me crazy. Not any problem while creating fresh project but it happens on upgrading to 0.62.2.

Trying to run on debug mode it gives error message on below. It happens only debug mode.

ld: '... project path .../ios/Pods/OpenSSL-Universal/ios/lib/libcrypto.a(bio_lib.o)' does not contain bitcode. You must rebuild it with bitcode enabled (Xcode setting ENABLE_BITCODE), obtain an updated library from the vendor, or disable bitcode for this target. for architecture arm64

It tried pod cache clear openssl-ios-bitcode on https://github.com/facebook/react-native/issues/27565#issuecomment-567285529 but it couldn't find openssl-ios-bitcode pod.

Any idea about it? @alloy

mweststrate commented 4 years ago

@ezranbayantemur please don't respond to closed issue as only few people will see them, and it pings a people that don't have your specific issue needlessly. So please open a new issue instead :)

ezranbayantemur commented 4 years ago

@ezranbayantemur please don't respond to closed issue as only few people will see them, and it pings a people that don't have your specific issue needlessly. So please open a new issue instead :)

Oh my bad, I saw mentioned comments about it and didn't recognize it was closed. Sorry for bother people 👍

xgqfrms commented 4 years ago

need help

$ pod install --verbose

https://github.com/facebook/react-native/issues/29251

stop, after installing here

image

$ pod install

hongmaoxiao commented 4 years ago

need help

$ pod install --verbose

29251

stop, after installing here

image

$ pod install

same here! anyone knows how to solve it?