Categories
debug linguaggio javascript npm React Native

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:

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

Leave a Reply