How to integrate Crashlytics with Sentry? - react-native

Can you help us please with these great tools integration.
Our React Native iOS project has been using Crashlytics for several months and it works well in case of native crashes but in case of JS exceptions it required some customization of react-native logging (this Medium articles helped a lot to reach as verbose JS output as possible). In the end we didn't have as good JS errors output as we would like to have.
So we decided to integrate Sentry as well.
It was done successfully, but it seems that Sentry outpaces Crashlytics catching crashes before it: we can see crashes in Sentry dashboard but no in Crashlytics' one.
My question is the next: is it possible to integrate both Crashlytics and Sentry for both case - native crashes AND JS exceptions?
Thank you in advance.
UPD 06.03.2019
Finally, we've come to the usage of only Sentry because of the next reasons:
first of all, it doesn't require any special code for the JS events & errors well-formated output, whereas Crashlytics does;
second, it doesn't require any manipulation with dSym files released (and probably encrypted) via Testflight;
third, it also catches native crashes and provides a verbose output as well.

Sentry has support to React Native which includes the JS and Native errors (both iOS and Android).
I'm totally biased as I work for Sentry but it seems to me, based on your requirements and the two options you listed, Sentry is the one which has the support you need.

Mike from Fabric here. On iOS, only one uncaught exception handler can be safely installed and there will be conflicts, like you're seeing if multiple handlers are installed.

Related

EXPO + react-native-reanimated debug issue

I've had an app running on Expo SDK 41 and it had some basic usage of react-native-reanimated#~2.1.0 and debugging worked just fine.
At some stage SDK 41 was deprecated and I was forced to upgrade, so I went for the latest one which is 45.
After the upgrade I can no longer use remote debugging. When I turn on remote debugging, the app crashes with the following error
Requiring module "node_modules\react-native-reanimated\src\Animated.js", which threw an exception: Invariant Violation: Calling synchronous methods on native modules is not supported in Chrome.
Consider providing alternative methods to expose this method in debug mode, e.g. by exposing constants ahead-of-time.
and I can't do anything (I can't even turn off remote debugging without clearing expo app data).
The issue seems to be related to react-native-reanimated (current version is 2.8.0)
Expo docs state this:
The new APIs in react-native-reanimated#2 use React Native APIs that
are incompatible with Remote JS Debugging. Consequently, you can only
debug apps using these APIs using Flipper, which is not yet available
in the Expo managed workflow. You will be unable to use Remote JS
Debugging if you use the new APIs from Reanimated 2. Remote JS
Debugging will continue to work if you only use the APIs that were
also available in Reanimated 1.
Tried to downgrade to react-native-reanimated#~2.1.0 did not work either.
I must be missing something, because otherwise it seems a bit ridiculous that I'm forced to upgrade SDK which in combination with react-native-reanimated does not allow me to do debug anymore.
Please advise if there is anything I can do.
Thanks
This is what that link to Expo's docs show me at this time:
Reanimated uses React Native APIs that are incompatible with "Remote JS
Debugging" for JavaScriptCore. In order to use a debugger with your app with
react-native-reanimated, you will need to use the Hermes JavaScript engine and > the JavaScript Inspector for Hermes.
Anyways, this appears to be an issue Reanimated themselves talk about in the docs
The workaround around this for some time has been this code shared in this answer here
It isn't even a reanimated problem particularly, but an inability of RN to develop using some synchronous features that pertain to debugging.
Anyways, hope this helps you
After posting a question on expo repository, I've got the following answer which actually does not solve the remote debugger issue, but gives the same alternative. Basically they suggested to use hermes engine
hi there! this is unfortunate and inconvenient for sure. it's a side effect of the direction the ecosystem is moving in - away from JavaScript Core and remote debugging in Chrome towards Hermes and attaching a debugger to the on-device Hermes engine. Reanimated no longer supports remote debugging in Chrome.
in order to debug JS using Reanimated in SDK 45+ we recommend using Hermes. you can set this up in your app.json as follows:
{
"expo": {
"// your other config here": "...",
"android": {
"jsEngine": "hermes"
}
}
}
now when you run expo start and launch your app press j and it will launch a Chrome Inspector that will attach directly to the app on your device (I suggest upgrading expo-cli to the latest to ensure you have this feature). be sure to refer to the "Using Hermes Engine" guide for more information

How can I monitoring errors in React Native?

I'm trying to get errors from my React Native app, just now the app it's in production so I need a free way to get the users errors to fix it and know what happened. I am using React Native with Expo.
Abstract / Answer
Generally speaking, Expo offers great error detection for debugging purposes when running it in local development mode. But since you weren't specific, I'm going to assume you meant production not development. Your best bet would be using Sentry. If you would have asked me before then I would have suggested building your own module based on native events and report back using Firebase or something similar. But since Sentry is now well integrated into Expo, then your best bet is using it. It's a great platform with many features, it's definitely worth it.

Troubleshooting Maximum Stack Call Size Exceeded Error in Expo App

I'm getting the infamous Maximum Stack Call Size Exceeded error in Expo app.
I understand that it's caused by code that keeps calling itself, creating an infinite loop.
Does Expo or React Native provide more information about where this error is? I've already been through my code and didn't find anything. Something a bit more specific would be helpful in narrowing down the issue.
What's evn more interesting in this case is that I only get the error in the Expo Go app. When I run the app in Android Emulator, I don't get the error and the app works fine.
Any suggestions?
I found the culprit and it's totally unexpected.
I develop web front-end in React and mobile in React Native. One of the primary reasons is code sharing.
I have a file that contains all the action types I use in managing the state of my app. Technically not but kind of an enum file. They look like this:
export const SET_IS_AUTHENTICATED = 'SET_IS_AUTHENTICATED';
export const SET_USER_INFO = 'SET_USER_INFO';
In this file, I have exactly 486 action types and this is exactly what was creating the error.
I don't need all of these action types in my mobile app but I'd decided to keep things consistent and I thought this was totally harmless so I've been sharing this enum file in all my React and React Native apps.
Here are two interesting observations:
I just started developing with Expo. Prior to that I was using straight React Native -- created through React Native CLI and I NEVER got any errors for using this file.
Even more interesting is that the Android Emulator does NOT throw any errors in the same project. Only the Expo Go app throws this error.
This may even be by design and not necessarily an undesired side effect of the Expo Go app. Not sure. I'd love to know if others have had similar experiences with the Expo Go app.
This is probably not helpful, but when I upgraded from expo sdk 41 to 43 then I started getting this error. I made no code changes besides the upgrade and now when my app loads I get the error Unhandled promise rejection, [RangeError: Maximum call stack size exceeded.]. I get the error on expo go on both platforms

Fabric issue App not showing after following instruction

I have carefully followed the instruction from fabric (https://fabric.io/kits/ios/crashlytics/manual-install) to install crashlytics in my app. However I cannot select my app after the instruction since my app is not showing. I have tried most of the solution that has been given in this question here (Crashlytics in iOS won't proceed past "Build Your Project" in Fabric app)
But I still failed to get my app in fabric.
I am using react native to develop my app and using Xcode Version 10.2.1
Fabric/Firebaser here - If you've gone through all the necessary instructions, try cleaning your project first before building and running again to try to get your app up on your dashboard. And if you haven't seen it, here are some instructions specifically for setting up react native apps with Crashlytics: https://www.npmjs.com/package/react-native-fabric#crashlytics-usage). And make sure that if you haven't, set the Debug Information Format to DWARF with dSYM file for both debug and release as specified in that SO post you linked.
You can also see more debug information about Fabric if you set Fabric to debug mode in your initialization statement: https://docs.fabric.io/apple/fabric/advanced-settings/debugging.html. Check to see if the settings requests are being made to Fabric or if there is anything unusual.
If you're still having trouble, reach out to support(at)fabric(dot)io with your app's bundle ID and support will be able to help you out more.

React Native: Using Firebase Crashlytics and Bugsnag

We use Bugsnag for general error catching, and we use firebase for a host of other features.
At the moment crashes and error only got to Bugsnag (react-native-bugsnag), but we'd like them to also go to Crashlytics (which is installed as part of React Native Firebase).
Is this possible? If so how.
While Bugsnag and Crashlytics can usually operate fine alongside each other, there are some cases where other error reporting tools can cause interference and thus the error may only land in one or the other.
I'd recommend trying Bugsnag and Crashlytics out separately to confirm the behaviour in case something else is causing the issue, or swapping the order in which they are initialized as that will likely make a difference.
Please feel free to reach out to us at Bugsnag support to discuss your config in more detail.