Il debug in React è facile, in quanto in caso di errori appaiono i numeri delle righe del codice sorgente. In React Native è un incubo.
In React Native il debug è complicato, in quanto molti errori (anche errori di sintassi) si evidenziano solo in runtime (sullo smartphone) e non appaiono nemmeno i numeri delle righe del codice sorgente. Ecco un esempio di errore incomprensibile in runtime
--------- beginning of kernel 02-12 10:49:37.656 19991 20018 I ReactNativeJS: Running "progetto 02-12 10:49:37.784 19991 20018 E ReactNativeJS: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. 02-12 10:49:37.784 19991 20018 E ReactNativeJS: 02-12 10:49:37.784 19991 20018 E ReactNativeJS: This error is located at: 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in StaticContainer 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in EnsureSingleNavigator 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in SceneView 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in RCTView 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Unknown 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in RCTView 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Unknown 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Background 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Screen 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in RNSScreen 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in AnimatedComponent 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in AnimatedComponentWrapper 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Suspender 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Suspense 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Freeze 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in DelayedFreeze 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in InnerScreen 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Screen 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in MaybeScreen 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in RNSScreenContainer 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in ScreenContainer 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in MaybeScreenContainer 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in RNCSafeAreaProvider 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in SafeAreaProvider 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in SafeAreaProviderCompat 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in BottomTabView 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in PreventRemoveProvider 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in NavigationContent 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Unknown 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in BottomTabNavigator 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in EnsureSingleNavigator 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in BaseNavigationContainer 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in ThemeProvider 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in NavigationContainerInner 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in App 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in RCTView 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Unknown 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in RCTView 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in Unknown 02-12 10:49:37.784 19991 20018 E ReactNativeJS: in AppContainer, js engine: hermes
Una soluzione è produrre un output sulla console (console.log)
In JavaScript (nel web client) è spesso utilizzata la funzione di output
console.log("tutto bene fino qui..");
console.log(JSON.stringify(oggetto));
Con React Native si può anche installare
$ nvm use node
$ cd progetto
$ npm install --save react-native-logsPer poter fare output in questo modo
import {logger} from 'react-native-logs';
var log = logger.createLogger();
log.debug("output utile in run time");