I'm trying to use #sentry/react-native in a project that uses React Native Web.
React Native Web seems to not define ErrorUtils, which from what I gather is a React Native function. This is unfortunate as #sentry/react-native seems to depend on it, from what I can tell from the following error output when I try to use it:
node_modules/#sentry/react-native/dist/js/integrations/reactnativeerrorhandlers.js
Uncaught ReferenceError: ErrorUtils is not defined
at ReactNativeErrorHandlers._handleOnError (reactnativeerrorhandlers.ts:169:9)
at ReactNativeErrorHandlers.setupOnce (reactnativeerrorhandlers.ts:52:10)
So is there any way for me to somehow swap out the necessary functions before Sentry tries to use them, or some workaround to this issue, or will I have to use the Sentry JS SDK on the web with a platform.select or something?
This was kindly answered on the Sentry Github
This was fixed in #2808. Release 4.14.1 is coming later today (16 Feb 2023). Note that react-native-web is not officially supported. You will need to add GlohalHandlers and TryCatch to the integrations to get web errors.
Related
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
I'm tasked with an already-started project that has React Native Reanimated library as a dependency.
Whenever I debug my app with Vscode/Chrome debugger, when I navigate to any screen that has components depending on Reanimated, I keep getting global.performance.now is not a function.
I've already seen TypeError: global.performance.now is not a function in react native but in the latest version it is already changed to what the accepted answer to the question suggests.
I've tried downgrading react-native-reanimated to 2.2.4 and patch as suggested in the answer, yet then I start getting all sorts of errors like Property ' stopObservingProgress' doesn't exist.
I've also tried 2.3.1, also different yet blocker errors.
I've also tried with and without Hermes.
Disabling debugging gets rid of the error, but I (obviously) can't debug. Debugging with Flipper works yet debugging with Flipper is extremely slowing my workflow (e.g. switching between Vscode and Flipper and trying to find files to put breakpoints, unable to edit at the same place where I debug etc. Flipper is just not my thing) and I want to debug with Vscode, which works perfectly without Reanimated.
I want to get rid of Reanimated library but unfortunately there is already a lot of code that relies on it, including a library with no other alternative that directly depends on Reanimated.
How can I debug an app containing React Native Reanimated with Vscode?
It's still a known and open issue when we are using reanimated version 2.., you can find this in reanimated documation.
As the library uses JSI for synchronous native methods access, remote debugging is no longer possible. You can use Flipper for debugging your JS code, however connecting debugger to JS context which runs on the UI thread is not currently supported.
For now only flipper is the way of debugging react native apps that using JSI for syncronous native module calls.
Okay after further investigation I've found out that this is indeed possible. There were some other problems with latest versions of some of the dependencies that I've been using, which was masking the original issue. With the right combination of dependencies and following https://fbflipper.com/docs/extending/debugging/ and https://thinhtran3588.medium.com/make-professional-mobile-apps-with-react-native-and-typescript-debug-your-application-with-vscode-fba067f77445 I was able to debug my app correctly using Vscode debugger.
I use expo SDK v35, and works on the managed workflow (one without eject).
In my project, I face warning whenever I use AsyncStorage as demonstrated by their doc.
This, however, results in following warning being emitted:
Warning: Async Storage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '#react-native-community/async-storage' instead of 'react-native'. See https://github.com/react-native-community/react-native-async-storage
I tried to follow the instruction given by this warning, and tried to use #react-native-community/async-storage, but it did not succeed; it appears the library requires some linking, which is not available if you want to work inside the Expo's managed workflow.
Question
What is the proper way to handle AsyncStorage warning when working on expo's managed workflow?
Env
Expo 35.0.0
Recently I began developing a simple app using react native and the expo cli. However, on the react native docs, it seems that asyncStorage is getting deprecated. The solution would normally be to use the react community version but that is not compatible with expo.
https://github.com/react-native-community/async-storage/
There is currently no scope of linking libraries while using the managed workflow of expo. I've faced similiar issues , and was bound to migrate from expo to pure react native. And expo isnt meant for production as apps are slower. Better i would suggest you to migrate to pure React native . Async storage cant be used otherwise and if deprecated , you will be in a great problem in the future for your app.
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.
I have an existing React-native project which I'm trying to move to expo
I have followed the steps described here to do this. I have complete all the steps in the article, yet when I start the project I run into the following error.
From my research what I understood is that, a libReactNativeLocalization.a file is missing from somewhere.
Here is the library I'm using for localization.
What am I doing wrong?
With Expo, you can't react-native-link custom native modules. You write just JavaScript (unless you eject, in which case you're in a roughly similar situation before you tried to convert to Expo).
The way you can do localization with Expo is to use these functions:
https://docs.expo.io/versions/v17.0.0/sdk/util.html#expoutilgetcurrentlocaleasync
There isn't a way to use the native module you link to without ejecting unfortunately.
Good luck!