Posted on

Debug con log

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-logs

Per poter fare output in questo modo

import {logger} from 'react-native-logs';
var log = logger.createLogger();
log.debug("output utile in run time");