Unable to use the flipper realm pluggin

[KaulSalil]

How frequently does the bug occur?

Always

Description

I was expecting to integrate the realm plugin into flipper and view the state/content/hierarchy of my realm tables . After following the instructions provided here :https://www.mongodb.com/docs/realm/sdk/react-native/test-and-debug/debugging-with-flipper/ . After doing the steps mentioned the flipper app isnt able to connect to realm

Stacktrace & log output

I am getting a lot of crashes in the native code but I dont know what are the relevant logs

Can you reproduce the bug?

Always

Reproduction Steps

Create a react native app integrate realm and then try to integrate flipper in the same . I have followed the steps mentioned in the guide but I am not able to debug the same .
"realm": "11.0.0",
"realm-flipper-plugin-device": "^1.1.0"
"react": "18.1.0",
"react-native": "0.70.0",
"react-native-flipper": "^0.180.0",

Version

11.0.0

What services are you using?

Local Database only

Are you using encryption?

No

Platform OS and version(s)

apple macbook pro M1

Build environment

Which debugger for React Native: ..

Cocoapods version

NA

[KaulSalil]

Also I just want a way to view the contents of the realm db in react native in real time . Any approach which helps do the same will be good enough to get me started for the time being .

[kneth]

I am a bit uncertain if it is related to the Realm plugin or it is a known Flipper issue: facebook/flipper#4304

If you don't use the Realm plugins, do you still see it or not?

[ws333]

@KaulSalil

Did you follow these instructions?

To make React Native use the latest compatible flipper version see https://fbflipper.com/docs/getting-started/react-native/

"Latest version of Flipper requires react-native 0.69+! If you use react-native < 0.69.0, please, downgrade react-native-flipper to 0.162.0 (see facebook/flipper#4240 for details)."

My current config...

package.json

"react": "18.1.0",
"react-native": "0.70.6",
"realm": "^11.3.1",
"@realm/react": "^0.4.1",

"react-native-flipper": "^0.177.0",
"realm-flipper-plugin-device": "^1.0.28",

gradle.properties:

# Version of flipper SDK to use with React Native
FLIPPER_VERSION=0.177.0

[KaulSalil]

@kneth I am using the flipper tool specifically for looking at the contents of my realm db . Earlier using flipper caused the app to hang now that doesnt happen but I dont see the pluggin as activated . @ws333 i will try with this config and confirm once if I can get flipper+realm to work .

[ws333]

FYI @KaulSalil

I've upgraded to the latest versions, e.g. "react-native-flipper": "^0.180.0"
And then I get an issue with "realm-flipper-plugin-device": "^1.1.0"

  "Exception in HostFunction: objectType must be of type 'string', got (undefined)"

Works fine with "realm-flipper-plugin-device": "1.0.28" so far.

This migth be an issue with my code though, but I don't think so...

[KaulSalil]

@ws333 Getting "Require cycles are allowed, but can result in uninitialized values. Consider refactoring to remove the need for a cycle.
ERROR Error: Exception in HostObject::get(propName:Realm): java.lang.UnsatisfiedLinkError: couldn't find DSO to load: librealm.so caused by: dlopen failed: cannot locate symbol "__emutls_get_address" referenced by "/data/app/~~LJCpyMs2YdPwSKKAsLb9eQ==/com.womensafety-_i93Q_J_khG1aj4gLlTTWA==/lib/arm64/librealm.so"... result: 0
ERROR Invariant Violation: Failed to call into JavaScript module method AppRegistry.runApplication(). Module has not been registered as callable. Registered callable JavaScript modules (n = 11): Systrace, JSTimers, HeapCapture, SamplingProfiler, RCTLog, RCTDeviceEventEmitter, RCTNativeAppEventEmitter, GlobalPerformanceLogger, JSDevSupportModule, HMRClient, RCTEventEmitter.
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.
" when I am using the setting provided by you. Should I upload my source code ? Hard for me to analyze what is causing what to break

[ws333]

@KaulSalil

I would create a fresh new React Native project, add realm and a test schema, and get that up and running. Then add the flipper plugin and get that up and running.

Then you can compare your project code with the clean version to better pinpoint the issue.

[ws333]

@KaulSalil

You might want to check your index.js file (or other files you modified) to correct the "Failed to call into JavaScript module method AppRegistry.runApplication(). ". Probably not related to realm.

And also resolve the "Require cycles..." issue, which could be related to the error above.

If you didn't do so already, google the error messages you want to resolve, usually you'll find good info on sites like StackOverflow, GitHub etc.

[KaulSalil]

@ws333 Apologies for the late reply . I hastily created a new project from scratch and added realm to the same . Also updated the flipper plugin . I am still not able to connect flipper to the react native project . Sample repo for the same :https://github.com/KaulSalil/RealmFlipperTest/tree/master . Flipper(Version 0.182.0 (50.0.0)) showed the RSockets are getting deprecated could this be the cause for the issue ?

[gagik]

@KaulSalil I made a PR on your sample repository to show where the issue may be. You may not be wrapping your app in a RealmProvider as noted by the @realm/react package which may be interfering with the Realms being passed to the plugin component. You will also need to make sure to have both react-native-flipper and realm-flipper-plugin-device installed. i.e. it should end up being something like

// TaskContext being createRealmContext({schema: [Task]});
import TaskContext, {Task} from './DBSchema';
import RealmPlugin from 'realm-flipper-plugin-device';
...
function MainScreen() {
  const {useRealm, useQuery, RealmProvider} = TaskContext;
  const realm = useRealm();
  ...
  return (
       <RealmProvider>
               <RealmPlugin realms=[realm] />
               {/* Rest of the content... */}
       </RealmProvider>
  );
}

This worked for me with 1.1.0. Note you will need to run cd ios && pod install to make the native libraries work. You can refer to the getting started guide for the Flipper Plugin although the example there does not use @realm/react yet.

[KaulSalil]

@gagik I merged and pulled in your code and this is what flipper is showing . I guess some issues at flippers end or at my end dont know what exactly (could it be cause I am on a mac m1 machine ) . I guess things wont work till facebook/flipper#4304 gets resolved :(

Should I close this thread then @ws333 @kneth ?

[kneth]

@KaulSalil Yes, feel free to close if the issue has been solved (or at least things work at your end)

[KaulSalil]

@kneth flipper is breaking at my end don't know the exact reason why . I can manage by exporting the realm db and viewing the same in realm studio but the bigger problem is that since my app uses realm and realm doesn't allow me to use chrome debugger I have no way of debugging my app ( as an aside I am unable to debug my app using VSCode:-(. ) . I wanted to know could you suggest some way in which I can debug my app ?

[KaulSalil]

@kneth When I tried to run the npm install realm-flipper-plugin-device react-native-flipper I got
npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: WomenSafety@0.0.1 npm ERR! Found: realm@11.0.0-rc.0 npm ERR! node_modules/realm npm ERR! realm@"11.0.0-rc.0" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer realm@">=11.0.0" from realm-flipper-plugin-device@1.1.0 npm ERR! node_modules/realm-flipper-plugin-device npm ERR! realm-flipper-plugin-device@"*" from the root project. Can you please tell me which versions of the pluggin I can use with realm@"11.0.0-rc.0" . I dont want to change the version since I am close to the date of release

[takameyer]

I wanted to know could you suggest some way in which I can debug my app ?

I haven't tested this out yet, as it just came to my attention, but this "might" work instead of using Flipper: https://reactnative.dev/docs/hermes#debugging-js-on-hermes-using-google-chromes-devtools

[KaulSalil]

@takameyer enabled hermes for android and followed the instructions provided ran into "DevTools failed to load source map: Could not load content for Fetch through target.." . It seems this doesnt work as well . facebook/react-native#35600 .

[kalyncoose]

Working Flipper Solution (as of Dec 7 2023)

I created a Gist on how to install/configure Realm and Redux Debugger Flipper Plugins working for a RN project here: https://gist.github.com/kalyncoose/0d3fd640fc0c3b1e0174959003a8e911

• This solution provides more advanced examples such as setting up RealmPlugin when you have a RealmProvider and RealmContext as well as setting up Redux Debugger via RTK's configureStore() API.