Logowanie React Native: wszystko, co musisz wiedzieć!

Logowanie jest kluczowym aspektem w projektach tworzenia aplikacji React Native, ponieważ jest to jedna z najłatwiejszych i najszybszych metod debugowania aplikacji w samej fazie rozwoju. Rejestrowanie zapewnia szczegółowe informacje i opinie na temat problemu podczas działania kodu. Pomaga także programistom zrozumieć zachowanie aplikacji.

Jednak rejestrowanie powinno odbywać się podczas procesu tworzenia aplikacji; nie jest to już korzystne, gdy aplikacja zostanie wdrożona. Dzieje się tak, ponieważ te dzienniki są generowane po stronie klienta. W związku z tym w fazie powdrożeniowej błędy wykryte w dziennikach będą dostępne tylko dla użytkowników i zostaną utracone w ich przeglądarkach. Zespół programistów może zidentyfikować te błędy tylko wtedy, gdy użytkownik wypełni raport o błędzie, co jest najmniej prawdopodobne. Użytkownicy przeważnie porzucają aplikację zamiast zgłaszać problem.

Ten post zawiera wszystkie informacje dotyczące logowania w projektach React Native i metod rozwiązywania ograniczeń. Ale zanim zagłębimy się głębiej, rzućmy okiem na architekturę aplikacji React Native.

Reaguj natywną architekturą/środowiskiem wykonawczym

Środowisko wykonawcze React Native składa się z trzech głównych wątków – wątku „Natywnego”, wątku „JS” oraz wątku tła, który obsługuje węzeł cienia. Te wątki komunikują się ze sobą za pośrednictwem biblioteki o nazwie „Bridge”.

Logowanie React Native: kluczowe kroki do rozważenia

A teraz zbierzmy kompleksowe spostrzeżenia na temat logowania w środowisku React Native.

Jak czytać dzienniki

Dzienniki JavaScript są widoczne w części „konsoli” w sekcji „narzędzia dla programistów”. W przeglądarce, która służy do zdalnego debugowania JavaScript, znajdziesz „narzędzia programistyczne”. Ale programiści React Native mogą przeglądać te dzienniki, gdy debugger jest podłączony, co może do pewnego stopnia spowolnić proces wykonywania aplikacji. Jakie jest rozwiązanie? Aby upewnić się, że urządzenie nie zwalnia podczas logowania, musisz użyć poleceń, takich jak react-native log-ios (dla aplikacji na iOS) i react-native log-android (dla aplikacji na Androida). W ten sposób dowiesz się więcej o tym, co dzieje się w całej aplikacji, a nie tylko o wątku JavaScript.

Omówmy to szczegółowo, aby zapewnić większą przejrzystość w czytaniu dzienników!

Dzienniki konsoli

Aby wyświetlić logi konsoli, należy uruchomić polecenie npx expo start i podłączyć urządzenie; dzienniki konsoli pojawią się w procesie terminala. Środowisko wykonawcze wysyła te dzienniki do interfejsu wiersza polecenia Expo za pośrednictwem gniazd internetowych. Tutaj otrzymujesz dzienniki o niskiej wierności, ponieważ narzędzia deweloperskie nie są bezpośrednio połączone z silnikiem. Aby wygenerować dzienniki o większej wierności, można zastosować zaawansowane funkcje rejestrowania, takie jak console.table. W tym celu musisz utworzyć kompilację programistyczną za pomocą Hermesa, a następnie połączyć się z inspektorem. Hermes to silnik JS zoptymalizowany pod kątem środowiska React Native. Hermes poprawia czas uruchamiania aplikacji dzięki wcześniejszej kompilacji JS do kodu bajtowego.

Dzienniki systemowe

Te typy dzienników są przydatne, jeśli chcesz przeglądać dzienniki wszystkiego, co dzieje się na Twoim urządzeniu, a także dzienniki generowane przez system operacyjny i inne aplikacje. W tym celu musisz zastosować następujące polecenia w terminalu.

Dla urządzeń z systemem Android: npx react-native log-android

W przypadku urządzeń z systemem iOS: Reaguj natywnie log-npxios

Jak pisać dzienniki

Oto jak pisać dzienniki! Twoje dane wyjściowe do dziennika React Native Console pojawiają się w dziennikach aplikacji. Ważne jest, aby podczas zapisywania dzienników używać odpowiedniego poziomu dziennika. Poza dziennikiem konsoli istnieją inne poziomy rejestrowania, takie jak console.info, console.warn, console.debug itp. Każdy z tych dzienników ma określony cel i zapewnia bardziej szczegółową kontrolę poziomu potrzebnych informacji. Możesz użyć console.info, aby dowiedzieć się, czy zestaw zdarzeń miał miejsce zgodnie z oczekiwanym wzorcem. console.warn jest używany, jeśli wystąpią jakieś nieoczekiwane przypadki; na przykład odpowiedź serwera, która nie jest całkowicie niepoprawna, ale wygląda na wątpliwą. Consoe.debug jest używany, gdy potrzebujesz tymczasowych dzienników do rozwiązania problemów.

Znaczenie bibliotek rejestrowania

Zaleca się korzystanie z biblioteki rejestrowania podczas zapisywania dzienników, ponieważ zapisze ona dzienniki na podstawie różnych poziomów, zgodnie z wymaganiami klienta. Dzienniki będą zapisywane w zaszyfrowanym formacie pliku, a komunikaty dziennika będą wysyłane lub wyświetlane w celach informacyjnych dla programistów. Takie gotowe do użycia rejestratory oszczędzają czas i wysiłek programistów.

Jeśli w środowisku produkcyjnym nie ma odpowiednich plików dziennika, debugowanie problemów staje się trudne. Wynika to z faktu, że pliki dziennika są jedynym źródłem informacji, które pomagają debugować nieoczekiwane problemy lub rozłączone błędy. Korzystanie z bibliotek rejestrowania rozwiązuje to ograniczenie.

React Native Logging Biblioteki: przykłady

Reaguj natywny rejestrator plików

React-native-file-logger to rejestrator plików dla natywnego środowiska reagowania i może dołączać komunikaty z wywołań konsoli do plików dziennika, wykorzystując rejestratory plików z Logback (dla Androida) i CocoaLumberjack (dla iOS). Skonfiguruj go za pomocą polecenia: FileLogger.configure(). Po skonfigurowaniu automatycznie zapisze wszystkie istniejące wywołania console.log/debug/… do pliku.

React-native-file-logger jest napisany w TypeScript i oferuje opcjonalną politykę zwijania plików. Pliki są rolowane w zależności od rozmiaru i potrzebnego czasu. Polityka krocząca jest wysoce konfigurowalna. Możesz dostosować poziom dziennika dla danych wyjściowych pliku i katalogu dziennika, czyli ścieżki, w której przechowywane są pliki dziennika. Co więcej, jeśli nie chcesz używać wywołań konsoli do rejestrowania plików, masz możliwość bezpośredniego zapisywania komunikatów w pliku dziennika za pomocą interfejsu API rejestratora.

Ten rejestrator może również wysyłać dzienniki plików e-mailem do programistów bez konieczności polegania na jakiejkolwiek innej bibliotece. Logger wykorzystuje nieudokumentowany global._inspectorLog React Native. Za pomocą React-native-file-logger możesz przechwytywać wywołania konsoli i pobierać sformatowany komunikat dziennika.

dzienniki reakcji natywnych

Ten rejestrator React Native jest dostarczany z niestandardowymi „poziomami rejestrowania” i „transportami”, takimi jak zapisywanie plików, kolorowa konsola itp. Wyświetlana jest ważność każdego poziomu dziennika; poziomy dziennika są ułożone w porządku rosnącym na podstawie ich stopnia ważności. Następnie „transport” zarządza dziennikami. „Transport” to funkcja, która zapisuje, wyświetla i wysyła komunikaty dziennika.

Aby zainstalować, uruchom jedno z tych dwóch poleceń:

npm install – zapisz dzienniki reakcji natywnych

lub

przędza dodaje dzienniki reakcji natywnych

A teraz wpraw piłkę w ruch! Idź do react-native-logs i stamtąd,

importuj { rejestrator }.

Następnie uruchom polecenie var log = logger.createLogger

Metoda „createLogger” umożliwia utworzenie prostego rejestratora, który oferuje poziomy ostrzeżeń, debugowania i błędów. Aby dostosować ten rejestrator, musisz przekazać obiekt konfiguracyjny do metody „createLogger”.

Przechodząc do „transportu”, programiści mogą napisać własne specyfikacje „transportu” do wysyłania dzienników do usługi w chmurze. Możesz także wybrać jedną z kilku domyślnych opcji „transportu”, takich jak hideDate, hideLevel, loggerName, dateFormat itp.; jeśli ustawisz parametr – transportOptions. Tutaj możesz również dodać nowe opcje, które zostaną przekazane do transportu i nadpisać wstępnie ustawione opcje transportu.

Można ustawić poziom ważności dzienników; w tym celu należy przekazać nazwę (ciąg znaków) poziomu, który ma najmniejsze znaczenie. Tutaj możesz nadpisać dowolną opcję config.severity, która została ustawiona podczas tworzenia rejestratora.

Jak radzić sobie z różnymi typami błędów wyświetlanych w dziennikach

Wszystkie ostrzeżenia i błędy w kompilacjach programistycznych pojawiają się w LogBox obecnym w aplikacji. Ten LogBox jest wyłączany automatycznie podczas wydawania kompilacji produkcyjnych. Pamiętaj, że ignorowanie logów nie jest dobrą praktyką i powinno być ostatecznością. A jeśli musiałeś zignorować jakikolwiek dziennik z jakiegoś nieuniknionego powodu, utwórz zadanie późniejszego naprawienia tych dzienników.

Błędy konsoli

Możesz wyświetlić błędy i ostrzeżenia konsoli w formie powiadomień na ekranie z żółtą lub czerwoną plakietką. Wyświetlana jest również liczba ostrzeżeń i błędów. Aby przeczytać ostrzeżenia i błędy konsoli, musisz kliknąć powiadomienie. Następnie pojawią się pełnoekranowe informacje o dzienniku i będziesz mógł przeglądać każdy dziennik znajdujący się w konsoli.

Możesz ukryć wspomniane powiadomienia za pomocą polecenia: LogBox.ignoreAllLogs(). Takie podejście przydaje się podczas prezentacji produktów. Możesz także ukryć powiadomienia zgodnie z podejściem „na dziennik”. Tutaj musisz wpisać polecenie: LogBox.ignoreLogs(). Tego podejścia można użyć do obsługi głośnych ostrzeżeń, których nie można naprawić; na przykład te w zależności od strony trzeciej.

Błędy składniowe

Zawsze, gdy występuje błąd składni, pojawia się błąd LogBox na pełnym ekranie. LogBox pokazuje ślad stosu, a także lokalizację błędu składni. Takiego błędu nie można odrzucić, ponieważ oznacza on nieprawidłowe wykonanie JS, które należy koniecznie rozwiązać przed kontynuowaniem procesu tworzenia aplikacji. W ten sposób musisz działać, aby odrzucić błędy składniowe. Napraw błąd. Następnie możesz użyć jednego z tych dwóch sposobów – Włącz szybkie odświeżanie i zapisz je jako „automatycznie odrzuć” lub wyłącz Szybkie odświeżanie i przeładuj za pomocą polecenia cmd + r.

Nieobsługiwane błędy JS

Wcześniej nieobsługiwane błędy JavaScript automatycznie wyświetlają pełnoekranowy LogBox, pokazujący źródło błędu. Możesz odrzucić lub zminimalizować takie błędy, aby zobaczyć stan aplikacji, gdy te błędy się pojawią. Jednak usunięcie tych błędów jest wysoce zalecane.

Dolna linia

Mam nadzieję, że zebrałeś praktyczne spostrzeżenia na temat różnych podejść do logowania w React Native. Aby stworzyć najwyższej klasy aplikację React Native, zespół programistów musi być dobrze przygotowany do radzenia sobie z nieoczekiwanymi zdarzeniami i błędami. Ponadto rejestrowanie pomaga znaleźć główną przyczynę błędów i ułatwia programistom rozwiązywanie problemów. Musisz jednak odpowiednio przeprowadzić proces logowania, aby czerpać z niego korzyści bez wpływu na UX. Dlatego ważne jest, aby wybrać doświadczoną firmę tworzącą aplikacje React Native do realizacji projektu rozwoju oprogramowania.