Using Sentry causes strange crash on start - react-native

I'm trying to use Sentry in my Expo managed workflow. I've followed the guide here, which includes calling Sentry.init() from App.tsx:
Sentry.init({
dsn: "https://blahblah#blahblah.ingest.sentry.io/blahblah",
enableInExpoDevelopment: true,
debug: true,
});
For some reason, calling Sentry.init() is leading to a crash on load. In debug mode (in expo go) I get the following error, which seems completely unrelated:
Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}).
This error is in a hook provided by expo-fonts, not in one of my own hooks. Additionally, when I remove the code calling Sentry.init() (or set enableInExpoDevelopment: false, the error goes away and everything works normally. Of course this means that I can't have Sentry in production which is a problem.
Does anyone know what could be causing this strange issue? I've double checked that my DSN and organization/project name are correct, and that I've followed the guide to a T.

Related

React Native App Working in Development, 'Error: 'undefined' is not a function' in Production

I have completed an app that builds on both Android and iOS. It works as expected when I build the app from the CLI or when I build it via XCode / Android Studio. However, on TestFlight, it gets errors that simply do NOT exist when I build it locally. These errors only appear on TestFlight, and thus I have little to no idea on how to go finding them down or even resolving them. Does anyone have better expertise in this area?
I'm not sure how common an issue this is-- I've never heard of it before to be honest, but the components that were not working were components that utilized ({props}) in a component. For example, any component wthat utilized the following declarations did NOT work
function Example({props}){
// stuff
}
// OR //
const Example = ({props}) => {
// stuff
}
all of the values inside of props were unreadable. I fixed this by simply moving EVERYTHING into a recoil state instead and that mitigated any errors. For example...
navigation.navigate("path",{prop1: value})
// AND //
return (<Example prop={value} prop={value})
would not work unless the prop was a single value-- a string, an int, a bool, these would work. Objects and Arrays did NOT properly carry over.
Hope this helps someone in the future.

React Native: EventEmitter.removeListener('appStateDidChange', ...) - How to debug this?

I am kinda new to React Native. I get this warning which is really annoying and spamming the console every other second or so.
EventEmitter.removeListener('appStateDidChange', ...): Method has been deprecated. Please instead use `remove()` on the subscription returned by `EventEmitter.addListener`.
How do I debug this? The call stack says MeasurementProvider, but there is no removeListener anywhere in our code. Does this warning come from a third-party module?
For some reason, I only get this warning in 1 redux slice out of many which use the exact same code structure for deleting state items... Everything works as it should besides that warning popping up so I simply removed the warning using the code below in App.js
import {LogBox} from "react-native";
LogBox.ignoreLogs([
"EventEmitter.removeListener('appStateDidChange', ...)"
])
It's no long-term solution but it'll only show the warning in your dev console this way :)

Persistent React-Native error that goes away with Remote Debugging enabled

I'm building a React-Native app and whenever I run it on my Android emulator, I get this error:
Objects are not valid as a React child (found: object with keys
{$$typeof, type, key, ref, props, _owner, _store}). If you meant to
render a collection of children, use an array instead.
throwOnInvalidObjectType
D:\rn\manager\node_modules\react-native\Libraries\Renderer\ReactNativeRenderer-dev.js:7436:6
Because this error means nothing to me, I decide to enable "Debug JS Remotely" in Chrome to see if I can get an error I understand. But with Debug Remotely enabled, the error goes away.
If I build the project and install the app on a real device, the errors come back.
But I feel like I'm stuck in a catch-22 because if I try to debug, I get no errors, and if I turn off debugging, I get errors.
Is there anyway to get around this?
Thanks!
The error mentions you use an object in your render() method where you shouldn't. Since you did not post any code, here is what you could do:
Keep removing elements from your render() method until you no longer get the error. Once it is gone, start placing code back until you hit the error again. The code causing the error will be or return an object, possibly a typo causing an object to be returned instead of a string for instance.
TL;DR: Stopped using firebase and used react-native-firebase instead
The problem for me wasn't the render method in any of my components or classes. I realized after trying the answer above, I basically removed all my files, and was left with one file. I changed the render method to display text inside one view, but I still got the error.
Then I started removing the modules I was importing inside that file one by one and found that it was the firebase module uninstalled firebase and installed react-native-firebase.

React: Calling JS function after bridge has been destroyed --- How to find which function

I'm working on an update for our app. I've added a HeadlessTask and I've started seeing this warning in the console:
React: Calling JS function after bridge has been destroyed
How can I get the name of the function being executed?
From the error message I assume you're in java (react-native Android):
When you reload on react-native, what happens behind the scenes is that the react context is getting destroyed, and a new one is being created.
That error get's thrown whenever a react-native Native Module is trying to do work, by using the old react context (the one that was valid before the reload).
The last time I saw that error it also included an explanation as to which module tried to do work by using the old context. Typically it's the RCTDeviceEventEmitter module trying to send a message to javascript.
You'll have to open logcat on Android studio and read the full error message.
p.s: If you're using react-native-navigation in your project, (after you discover which module is the trouble maker by using the logcat), make sure to search on their issues as they are heavily using the native side of react-native android, and I've seen lot's of similar issues so far.
Never found a good solution to this until recently, so thought I'd put this here in case it helps someone else. I finally got around this error by doing the following:
public class RNMyNativeModule extends ReactContextBaseModule {
private ReactApplicationContext currentContext;
public RNMyNativeModule(ReactApplicationContext reactContext) {
super(reactContext);
currentContext = reactContext;
}
public void myEmitFn(String emitMe) {
currentContext
.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
.emit("RNMyNativeModuleEvent", emitMe);
}
}
Basically, in your module constructor, make sure you capture the currentContext in it's own variable, and just use that whenever you need it. Otherwise it gets overwritten and destroyed whenever a live reload happens, and getReactApplicationContext() is not actually giving you the current context.

How do I catch 'Uncaught typeError: Cannot read property 'isModel' of undefined' during App load?

I'm developing ST2 on Chrome which uses localstorage. From time to time, it appears that the storage schema gets corrupted. When this happens, my app fails during load with "Uncaught typeError: Cannot read property 'isModel' of undefined". The only way to get my app running is to do localstorage.clear() in the console.
I'm assuming this is an ST2 bug, since the occurrence of the corruption seems unrelated to my code, or what I do in my app.
My main question is how do I catch the exception in such a way that either the app can recover, or the user is alerted as to what is going on? Right now, the app simply fails to load. I've tried wrapping the Ext.application() in app.js, but that is executing correctly. My launch function is not being reached.
There must be some weird thing going on with your app. Probably you have found the reason meanwhile and recognised the failing bit is somewhere in your app. Anyway if you are experiencing anything like this then probably the best bet is to catch the error event and do your error handling there. I.e.
window.addEventListener("error", function(errorEvent) {
//
// Add your error handling here
//
// if returns true, the error is suppressed and not thrown
return false;
});