Die console-API funktioniert in React Native fast wie im Browser – console.log(), .warn(), .error() landen im Metro-Terminal, im Dev-Menü-Log und (bei Chrome/Flipper-Debugging) in den DevTools.

1. Beschreibung

Die vier wichtigsten Methoden unterscheiden sich in ihrer VISUELLEN Darstellung: console.log() für allgemeine Ausgaben, console.warn() erscheint gelb hervorgehoben (und als "Yellow Box"-Overlay auf dem Gerät), console.error() rot (als "Red Box" im Dev-Build), console.table() stellt Arrays/Objekte tabellarisch dar.

2. Kurzes Beispiel

console.log('Benutzer geladen:', benutzer);
console.warn('API-Antwort war leer');
console.error('Login fehlgeschlagen', fehler);

3. Komplettes Projekt: Eigener Logger mit Log-Level

npx create-expo-app logging-demo
cd logging-demo

const LOG_LEVEL_AKTIV = __DEV__; // nur im Entwicklungs-Build loggen

export const logger = {
  info(nachricht, ...daten) {
    if (LOG_LEVEL_AKTIV) {
      console.log(`[INFO] ${nachricht}`, ...daten);
    }
  },
  warnung(nachricht, ...daten) {
    if (LOG_LEVEL_AKTIV) {
      console.warn(`[WARN] ${nachricht}`, ...daten);
    }
  },
  fehler(nachricht, fehlerObjekt) {
    // Fehler IMMER loggen, auch im Produktions-Build
    console.error(`[ERROR] ${nachricht}`, fehlerObjekt?.message ?? fehlerObjekt);
  },
  tabelle(daten) {
    if (LOG_LEVEL_AKTIV) {
      console.table(daten);
    }
  },
};

import { useEffect } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import { logger } from './utils/logger';

const BEISPIEL_DATEN = [
  { name: 'Anna', alter: 28 },
  { name: 'Ben', alter: 34 },
];

export default function App() {
  useEffect(() => {
    logger.info('App gestartet');
    logger.tabelle(BEISPIEL_DATEN);
  }, []);

  function simuliereFehler() {
    try {
      throw new Error('Simulierter Netzwerkfehler');
    } catch (fehler) {
      logger.fehler('Anfrage fehlgeschlagen', fehler);
    }
  }

  return (
    <View style={styles.container}>
      <Button title="Warnung loggen" onPress={() => logger.warnung('Ungewöhnlicher Zustand')} />
      <View style={styles.abstand}>
        <Button title="Fehler simulieren" onPress={simuliereFehler} />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 100, paddingHorizontal: 24 },
  abstand: { marginTop: 16 },
});

4. Erklärung

• __DEV__ ist eine von React Native GLOBAL bereitgestellte Boolean-Variable – true im Entwicklungs-Build, false im veröffentlichten Produktions-Build, kein Import nötig.
• Die eigene logger-Fassade sorgt dafür, dass Info-/Warn-Logs im Produktions-Build automatisch VERSTUMMEN (Performance UND verhindert Preisgabe interner Details an Endnutzer), während echte Fehler (fehler()) bewusst IMMER geloggt werden.
• ...daten (Rest-Parameter) erlaubt beliebig viele zusätzliche Argumente an console.log/.warn weiterzureichen, genau wie bei der nativen console-API.
• In einer echten Produktions-App würde logger.fehler() zusätzlich einen Fehler-Tracking-Dienst (z.B. Sentry) aufrufen, statt nur in die Konsole zu schreiben – die Fassade macht diese spätere Erweiterung an EINER zentralen Stelle möglich.

5. Ausgaben