When an redbox error happens, react-native app often stop responding to touches or behave weirdly.
This is much worse than the app crash because a release version won't show a redbox and users don't know what happened and why the app stop responding. They will delete your app if they cannot do anything with it.
You cannot always make sure there is no bug in your app. So when it happens, we should make sure our users could be remind to restart the app or they will fail to use it.
Catching the redbox error of react-native could let you pop a warning modal box and remind the user the app has encountered some error and then wholly quit the app to let the user restart it.
Found this question randomly while searching for something else, but in the hopes that it might help someone, have a look at the newly introduced componentDidCatch lifecycle method introduced in React 16 / React Native 0.50
More info here
This will show a fallback UI for the component tree the boundary encompasses.
A long time passed but this could help someone:
A react native module that lets you to register a global error handler
that can capture fatal/non fatal uncaught exceptions. The module helps
prevent abrupt crashing of RN Apps without a graceful message to the
user.
https://github.com/master-atul/react-native-exception-handler
Related
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
Trying to set up Detox for my react native app. It seems to hang on the splash screen. I've managed to run tests on a seperate app with no splash screen. On the splash screen app it simply hangs and it outputs :
detox[34248] ERROR: Error: Exceeded timeout of 30000ms while handling jest-circus "setup" event
detox[34248] INFO: Scratch Test is assigned to undefined
I recognize that a showing of 'undefined' is incorrect.
I see reference for the 'waitFor' function but the links to the documentation all seem to be broken and I can't find a reference to it in the docs.
I'm trying to understand how to go about debugging this or if the splash screen is at all responsible for the hanging / error.
Do you use the "react-native-splash-screen" library? That apparently has some issue working with Detox and once I removed that, I did not have the timeout error.
Another potential source of the hanging is an animation that runs in the background. Detox tries to synchronize correctly, but isn't always able to, per their docs: https://github.com/wix/Detox/blob/master/docs/Troubleshooting.Synchronization.md.
I found that by adding
// to allow for less flaky detox tests
console.disableYellowBox = true;
to my app.tsx I was able to remove some warnings that were interfering with Detox.
I have a react-native app. I recently moved to react-native version 0.61.5 for which I took the long route of creating a new react-native app and porting my code over to avoid any linking issues since new version used PODFILE as the default linking mechanism. Ever since I moved to version 0.61.5, I don't get the correct location of code in error logs. I think this is mainly happening when the code is running in asynchronous fashion which most of the code is. For e.g., look at below screenshot:
It is reporting that it is not able to call map on some array which is apparently undefined but the place where the error is reported is completely incorrect. I have no such file in my codebase and it is probably pointing to some file in some react-native package.
I am using Sentry #sentry/react-native": "^1.1.0". I don't think Sentry can cause issue with the sourcemaps reported during development.
I am not sure how to debug this problem. This problem is causing a lot of issues in debugging any errors as I have to manually figure out where the error happened. Please let me know if you have any tips on how to fix this problem.
when i install the ios app , app screen is not responding. After refreshing and clear the background process the app is working fine.
How to fix the issue?
Yeah, you'll need to include some code or more details as to what is happening. It sounds like you have some code that is failing on initialization but is not depended upon for the rest of the app. If you run react-native log-ios from the command line in your repo, do you get any interesting messages that might contribute to the unresponsiveness?
I was just coding away, when suddenly the debugger broke and every time I try to reload my app via Expo, cmd shows me the following error:
I am new to react native, hence clueless what might be wrong. Any ideas?
Thanks!
The issue was that remote JS debugging was activated via the developer menu on the phone. I must have accidentally tapped it when reloading the app.