Categories
Android 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 il debug invece può diventare un incubo (se non si usa un linter).

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.

Per di più questo errore si è ottenuto solo in runtime, durante il crash dell’applicazione sul telefono.

L’origine di questo errore era dovuto alla mancanza di export default App in fondo al codice dell’applicazione. L’applicazione sullo smartphone si compilava in un .apk, ma crashava appena aperta. Mi sembra solo un modo per perdere il tempo della compilazione (circa 4 minuti).

Per uno smartphone Android reale, la comunicazione è possibile sul terminale del computer con adb

adb

Come ottenere questi messaggi dopo un crash?

  • devi installare lo strumento adb sul PC
apt install adb
  • Sullo smartphone deve essere attivata la modalità developmer option (opzioni sviluppatore) premendo per 7 volte su questa voce delle impostazioni:
  • Android
    • System configuration > About > build number
  • Collegare lo smarphone al PC e sbloccarlo. Deve essere d-i-s-attivato USB Tethering.
  • Sul terminale digitare come superutente
adb devices
  • Sullo smartphone premere ALLOW per dare il consenso alla comunicazione
  • avviare la app sullo smartphone e poi digitare sul terminale:
adb logcat *:S ReactNative:V ReactNativeJS:V

Esempio

Ecco un altro esempio di output del terminale con adb

--------- beginning of kernel
02-12 10:49:37.656 19 18 I ReactNativeJS: Running "progetto
02-12 10:49:37.784 19 18 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 19 18 E ReactNativeJS: 
02-12 10:49:37.784 19 18 E ReactNativeJS: This error is located at:
02-12 10:49:37.784 19 18 E ReactNativeJS: in StaticContainer
02-12 10:49:37.784 19 18 E ReactNativeJS: in EnsureSingleNavigator
02-12 10:49:37.784 19 18 E ReactNativeJS: in SceneView
02-12 10:49:37.784 19 18 E ReactNativeJS: in RCTView
02-12 10:49:37.784 19 18 E ReactNativeJS: in Unknown
02-12 10:49:37.784 19 18 E ReactNativeJS: in RCTView
02-12 10:49:37.784 19 18 E ReactNativeJS: in Unknown
02-12 10:49:37.784 19 18 E ReactNativeJS: in Background
02-12 10:49:37.784 19 18 E ReactNativeJS: in Screen
02-12 10:49:37.784 19 18 E ReactNativeJS: in RNSScreen
02-12 10:49:37.784 19 18 E ReactNativeJS: in AnimatedComponent
02-12 10:49:37.784 19 18 E ReactNativeJS: in AnimatedComponentWrapper
02-12 10:49:37.784 19 18 E ReactNativeJS: in Suspender
02-12 10:49:37.784 19 18 E ReactNativeJS: in Suspense
02-12 10:49:37.784 19 18 E ReactNativeJS: in Freeze
02-12 10:49:37.784 19 18 E ReactNativeJS: in DelayedFreeze
02-12 10:49:37.784 19 18 E ReactNativeJS: in InnerScreen
02-12 10:49:37.784 19 18 E ReactNativeJS: in Screen
02-12 10:49:37.784 19 18 E ReactNativeJS: in MaybeScreen
02-12 10:49:37.784 19 18 E ReactNativeJS: in RNSScreenContainer
02-12 10:49:37.784 19 18 E ReactNativeJS: in ScreenContainer
02-12 10:49:37.784 19 18 E ReactNativeJS: in MaybeScreenContainer
02-12 10:49:37.784 19 18 E ReactNativeJS: in RNCSafeAreaProvider
02-12 10:49:37.784 19 18 E ReactNativeJS: in SafeAreaProvider
02-12 10:49:37.784 19 18 E ReactNativeJS: in SafeAreaProviderCompat
02-12 10:49:37.784 19 18 E ReactNativeJS: in BottomTabView
02-12 10:49:37.784 19 18 E ReactNativeJS: in PreventRemoveProvider
02-12 10:49:37.784 19 18 E ReactNativeJS: in NavigationContent
02-12 10:49:37.784 19 18 E ReactNativeJS: in Unknown
02-12 10:49:37.784 19 18 E ReactNativeJS: in BottomTabNavigator
02-12 10:49:37.784 19 18 E ReactNativeJS: in EnsureSingleNavigator
02-12 10:49:37.784 19 18 E ReactNativeJS: in BaseNavigationContainer
02-12 10:49:37.784 19 18 E ReactNativeJS: in ThemeProvider
02-12 10:49:37.784 19 18 E ReactNativeJS: in NavigationContainerInner
02-12 10:49:37.784 19 18 E ReactNativeJS: in App
02-12 10:49:37.784 19 18 E ReactNativeJS: in RCTView
02-12 10:49:37.784 19 18 E ReactNativeJS: in Unknown
02-12 10:49:37.784 19 18 E ReactNativeJS: in RCTView
02-12 10:49:37.784 19 18 E ReactNativeJS: in Unknown
02-12 10:49:37.784 19 18 E ReactNativeJS: in AppContainer, js engine: hermes

Può essere utile al programmatore aggiungere un output sulla console (console.log()). 

console.log("tutto bene fino qui..");
console.log(JSON.stringify(oggetto, null, 2));

Linter

Un modo più facile per individuare errori PRIMA della compilazione è quello di installare eslint

Esempio: l’indentazione e le variabili non utilizzate sono rilevabili in anticipo grazie ad eslint

Pagina wiki eslint

Articolo:

ESLint

Post Views: 25

Leave a Reply