React Native Stack Trace

Question

I have React Native App linked with Firebase Crashlytics. The issue is firebase sending unreadable stack trace like the one bellow. There is any way to read this kind on errors.

I just want to know when the error is thrown.

This is my stack trace

Fatal Exception: com.facebook.react.common.JavascriptException: Invariant Violation: Invariant Violation: Invariant Violation: inputRange must be monotonically non-decreasing 0,-1

This error is located at: in n in RCTView in t in t in Connect(t) in t in RCTView in RCTView in RCTView in n in r in t in n in RCTView in RCTView in t in t in RCTView in t in n in n in r in n in t in RCTView in AndroidDrawerLayout in DrawerLayoutAndroid in t in n in n in e in t in Connect(t) in n in Unknown in RCTView in RCTView in t

This error is located at: in n in t in RCTView in AndroidDrawerLayout in DrawerLayoutAndroid in t in n in n in e in t in Connect(t) in n in Unknown in RCTView in RCTView in t

This error is located at: in n in e in t in Connect(t) in n in Unknown in RCTView in RCTView in t, stack: v@178:1977 p@178:269 e@178:2406 value@188:720 _renderIndicator@718:1582 value@718:5454 qn@106:40634 tr@106:46334 Nr@106:56528 Ur@106:56960 ui@106:61804 oi@106:61224 Ue@106:68050 Ie@106:14248 We@106:14421 receiveTouches@106:15235 value@18:3352 @18:935 value@18:2621 value@18:907

   at com.facebook.react.modules.core.ExceptionsManagerModule.showOrThrowError(ExceptionsManagerModule.java:54)
   at com.facebook.react.modules.core.ExceptionsManagerModule.reportFatalException(ExceptionsManagerModule.java:38)
   at java.lang.reflect.Method.invoke(Method.java)
   at com.facebook.react.bridge.JavaMethodWrapper.invoke(JavaMethodWrapper.java:372)
   at com.facebook.react.bridge.JavaModuleWrapper.invoke(JavaModuleWrapper.java:160)
   at com.facebook.react.bridge.queue.NativeRunnable.run(NativeRunnable.java)
   at android.os.Handler.handleCallback(Handler.java:808)
   at android.os.Handler.dispatchMessage(Handler.java:101)
   at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:29)
   at android.os.Looper.loop(Looper.java:166)
   at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:192)
   at java.lang.Thread.run(Thread.java:784)

Answer 1

This is called obfuscation, your meaningful symbols are replaced with meaningless ones to reduce file size in production. Generally when you build your app, it produces deobfuscation files (normally in the form of a .dSYM file) that can be used to symbolicate your app.

Getting your .dSYM is different based on the platform you're using, but firebase has a handy guide that should be able to further help in this specific case.

For the purposes of documentation, I'll hardcode the steps provided there in this answer.

IOS

Open your project in Xcode, and select the project file in the Xcode Navigator.

Select your main build target from the Select a project or target dropdown.

Open the target's Build Settings tab.

Click All near the top of the tab.

Search for "debug information format".

Set Debug Information Format to DWARF with dSYM File.

Android

To preserve the info Crashlytics needs for readable crash reports, add the following lines to your Proguard or Dexguard config file:

-keepattributes *Annotation*
-keepattributes SourceFile,LineNumberTable
-keep public class * extends java.lang.Exception