How to find which React Native module is causing a crash - react-native

I have a React Native app. It works well most of the time, but in our automated error detection framework, I can see some users infrequently run into a crash in React Native. There is a SIGABRT and a bunch of lines like this in the stack trace:
facebook::react::JSIExecutor::defaultTimeoutInvoker
I'm reasonably confident that the issue isn't directly in my application's code -- not only is the stacktrace all React Native stuff, but one of my coworkers triggered the error right after logging in a couple times, and I've never triggered this error myself despite testing the login flow many times.
Other websites make it seem like the error might actually be in a native module (but not React Native itself), but I wasn't able to figure out how to debug which native module it could be (the error doesn't happen often enough to easily just try disabling native modules one by one or anything like that).
Is there a way to get more information about what is actually causing a crash when the crash is in native code?
Thanks!

Related

Empty Firemonkey app crashes on startup just on Android 7.1, with error NullPointerException on String.contains(CharSequence)

I created a completely new and empty FMX app, tried it using Delphi 10.3.3 and 10.4.0 (patch 3), and when installed on Android 7.1.2 devices (tried two different ones and the official simulator VM), after the splash screen this error message appears:
'java.lang.NullPointerException: Attempt to invoke virtual method 'boolean java.lang.String.contains(java.lang.CharSequence)' on a null object reference'
The error message box flickers quickly (endless loop) and gets slower and slower and after a minute the complete device doesn't react anymore and I can only hard reset it.
I found this thread, so I'm not alone. They say it worked until Delphi 10.1.2. There are also many other similar search results.
Is there any solution? On other Android versions it works well.
Or what can I try to get more information about what causes it?
Do you know a good candidate for an app made with Firemonkey that I could download directly and try out on the device?
Now there is a fix available at quality.embarcadero.com!
Just one line has to be added to 'Androidapi.JNIBridge.pas'. I'm not sure if I should copy it here... Will update this answer when it is released.

How to resolve Undefined is not an object (evaluating 'RCTToastAndroid.TOAST')

I want to run a react-native app. Before, it runs normally. An then when I add a sound and I run it again it show Undefined is not an object (evaluating 'RCTToastAndroid.SHORT')
I already open another stackoverflow question like this but it not resolve my problem
Looking at the error, even without any code from you, I have some assumptions.
You are probably trying to implement Android Toast in your app.
In the react-native docs there is an example of how to do it here and you are getting an error because of it.
Please Provide the full code where you are implementing it so we can get an proper solution.
By what you posted in your answer, there is some error in implementing Android's Toast.
OR
You have the Toast module implemented correctly, but your are in an IOS device and in you can't use Android's Toast in IOS.
If this is your case, you can try implementing something different to display and use react native Plataform.select to render the Toast in Android and something else in IOS.

Warning: Can't call setState (or forceUpdate)

I know this question is asked before but I applied the solutions offered on Warning: Can't call setState (or forceUpdate) on an unmounted component
When I run this program in Expo the program starts and gives warning message "Warning: Can't call setState (or forceUpdate) on an unmounted component ..." but after some time it hangs up. If I build signed apk it takes too much time to install and the application immediately crashes after start up.
The source code of the application is here please give me the idea why I am still getting this warning message. Thanks in advance.
I didn't used React native user flux somehow right way. So that I have made changes to source code that mainly on App.js for the login process. All the changes could be seen as "stackoverflow question - warning-cant-call-setstate-or-forceupdate" commit messages on github for this question.

App crashes on iOS (Phonegap) if multiple images are captured from camera

I am developing Phonegap Application and my application has scenarios where camera is used very frequently.
In my application I have used custom camera plugin (https://www.npmjs.com/package/cordova-camera-custom) to take picture and use it in my application.
Now when I capture images from this camera 30 times by opening camera and capturing again and again the app goes to crash.
The app just crashes so I am not able to identify the root cause of the crash.
I am not an iOS Programmer though I have tried to check the plugin code but I was not able to find the cause.
You can even check the plugin code on your end if needed.
I have also posted this issue to DevExtreme, the framework which I am using to develop hybrid applications at following link:
https://www.devexpress.com/support/center/Question/Details/T480068
and they found that issue indeed is related to memory shortage. The error message was with bug_type: 298 and fault cause: vm_pageshortage.
Please help me on this, I am struggling on it since long before.
Any Help is greatly appreciated.

How react native works? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
Can someone explain how react native works?
Found a lot of good articles about getting started, components usage, exporting modules.. but,
Googling about how react native works doesn't really help, but this article http://tadeuzagallo.com/blog/react-native-bridge that explains how native modules are exported and what happens when javascript calls them.
.. Still I find it difficult to understand (as a javascript dev) things like,
how first render happens on the screen, what are the functions of those 3 threads and how they communicate with each other, what is this javascript event loop, why do we need batched calls and how it is batched, etc..,
Can someone share an article/explain it in a javascript developer perspective?
thanks!
I will try to describe how React Native works. It's a bit complicated.
And first of all I will like to recommend this URL to learn about basics internal mechanism of React Native:
Read: https://www.reactnative.guide/3-react-native-internals/3.1-react-native-internals.html
So you are writing code in JS/JSX (JavaScript) or TS/TSX (TypeScript) but Android uses primarily Java (for sake of this answer, we know it's Kotlin now) and iOS use Swift/Objective-C so how the java script code is running in your Java Virtual Machine or Dalvik Virtual Machine or whatever iOS use.
So here is the problem how to run JavaScript code in Android Machine (iOS machine),
1) Use WebView, but WebView is slow, there is a lot going on in a WebView, so much heavy lifting is done for you by the Android/IOS Machine to run Web Pages in your application. Page loads slowly, scrolling jerks and what not. That's why Cordova and PhoneGap apps don't work well.
2) We don't need WebView right, we need light-weight JavaScript compiler(interpreters) which can compile only a set of JS instructions not all of them. A program which targets only core JavaScript and read new defined XML/ReactNative tags. React-Native tags (Image, FlatList, Text etc) are converted on JS side and converted to JS methods calls not on Android/IOS side.
Read: https://reactjs.org/docs/react-without-jsx.html
JSX is first converted to JS first.
3) Here, JavaScript-Virtual Machine comes into play which is completely different from JVM or DVM. And can run on JVM or DVM.
React Native uses : JavaScriptCore
Read: https://www.raywenderlich.com/1227-javascriptcore-tutorial-for-ios-getting-started (This is for IOS)
Here is one and open source for you to look around
https://github.com/LiquidPlayer/LiquidCore: This is even contains a file system, react-native does not.
Note: Same idea FB used for NodeJs = backend JavaScript.
4) JS-Bundle: So now you can run JS code in your application, but how do you ship it. You will create one file i.e merge of the all the files and library files into one and call it JS-Bundle.
Simple command for Android
node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js --platform android --bundle-output ../jsbundle/index.android.jsbundle --assets-dest ../jsbundle/res
5) JS-Bridge: Like the name provides bridge methods and components to communicate JavaScript and Native-Code(Android Java). How do they communicate, like everything else in React-Native, using JSON. JSON commands are sent to UiManager in native code to create UI on an asynchronous thread, which adds these commands into MessageQueue and process them.
Read: https://hackernoon.com/understanding-react-native-bridge-concept-e9526066ddb8
Also Read : https://tadeuzagallo.com/blog/react-native-bridge/
6) Threads:
JS-Thread : Handles UI commands as explained earlier. JS thread is
created as soon you invoke React-Native view from Android Code (Starting React Activity) and handles every view create or change command from React Native.
Native-Thread(Main Thread): Take press or touch events and pass them to JS-VM,
JS-VM passes them to your code, if success , process them and View change events are passed to your JS-Thread.
Async-Threads Now I don't have much idea about how do you create threads inside your JS/JSX code. Maybe it's possible but before it was not.
So for a JS point view your writing JS code that will run on light weight browser that is ReactView.
Read: https://www.codementor.io/#saketkumar95/how-react-native-works-mhjo4k6f3