React native: doesn't show useful error stack when crashed - react-native

When my react-native app crashes in development mode in simulator, it used to show me useful error stack like which line in which file failed. But it started to give me errors like this after a recent upgrade.
Can anyone tell me how to let it show useful error stack messages? Thanks!

Related

How can I symbolicate a call stack in react-native (expo, metro, storybook)

ios simulator screenshot - console warning
When running my react-native application on the iOS Simulator, in the Console Warning, I cannot view the source as the message says:
This call stack is not symbolicated. Some features are unavailable such as viewing the function name or tapping to open files.
The react-native docs on symbolication are not really helpful in my case, as I cannot see how they relate (react-native/symbolication)
What I need, is a view of the source of the problem like in this attached screenshot
iOS Simulator with readable source (source: github/react-native-community/issue-69 😏)
Is there anything I can change in my configs/project or is that just wishful thinking?
Many thanks!

Is there a way to get the stack trace from the web version of React Native(expo)?

I have an app in react native Expo, am running it on web, and want to be able to get the stacktrace for what line in the original react native code an error occurs from. Is this possible?

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

React Native Fatal RCTBatchedBridge error on launch

When lauching the app it fails with the following fatal error:
TypeError: methods.forEach is not a function. (In 'methods.forEach', 'methods.forEach' is undefined)
This only happens in the iOS simulator. The app runs fine on a device.
The RN stack trace doesn't show much useful information:
Screenshot of error
Any suggestions would be hugely appreciated!

Is there a way to catch the react-native redbox error

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