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:
ReactNativeJS: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
L’origine di questo errore era dovuto alla mancanza di export default App in fondo al codice dell’applicazione. L’applicazione sullo smartphone crashava appena aperta.
Ecco un altro esempio
--------- 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
Un aiuto al programmatore può essere quello di aggiungere 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, null, 2));
Un altro modo per individuare errori PRIMA della compilazione è quello di installare eslint
Le variabili non definite sono rilevabili in anticipo grazie ad eslint