Debugging i React Native

2020-03-05

Mobile on black background

På W&S tittar vi ofta på hur vi kan använda verktyg som avlastar våra utvecklare från små repetitiva sysslor som ofta kan vara tidsslukare i vardagen. En stor del av vår dag går åt att läsa och underhålla kod som andra eller vi själva har producerat vilket medför att vi borde lägga tid på att automatisera en stor del av bugghanteringen genom att använda processer som underlättar arbetet.

Underlätta för ditt team att automatisera felsökning och debugging i React Native

I denna korta guide går vi genom fyra enkla men ack så kraftfulla och intuitiva verktyg som förgyller en React Native utvecklares vardag. Från att lägga tid på att manuellt hitta fel och debugga så använder vi oss utav smarta och automatiserade tjänster.

Reactotron

Screenshot from reactotrons websiteReactotron är ett enkelt verktyg som förenklar lokal debugging t ex när man kör sin app i en simulator på datorn. Det finns en del features som underlättar arbetsflödet markant när man t ex vill se vad som händer i appen när man gör nätverksanrop.

Reactotron kan till exempel fånga upp nätverksanrop och visa resultatet i interfacet så att man inte behöver spamma loggen med console.log eller använda sig utav en tredje parts app som Charles.

CodePush

Screenshot from the appcenter's CodePush dashboard
CodePush är inte ett verktyg som används för debugging i sig men det gör att man kan snabbare dra ut en fix så fort man hittat och en bugg och åtgärdat den utan att gå via App Store / Play Stores vanliga rutiner. Sålänge koden man ändrar inte ligger i native lagret så kan man kan uppdatera sin app omedelbums! CodePush ingår i MS AppCenter och är ett verktyg som underlättar “micro deployments” av din app vilket medför snabba iterationer och kortare utvecklingscykler.

Sentry

Screenshot from sentrys dashboardSentry är ännu ett verktyg som underlättar insamling av kraschrapporter. Du kan se stack trace på när din app kraschar och även se kringliggande kontext som underlättar felsökning.

I Sentry kan du även logga skräddarsydda events som hör till din app ifall du t ex vill se hur ofta något kraschar eller eventuellt tracka när en användare klickar på något eller signar upp sig.

Sentry går att konfigurera så att det tar hänsyn till dina CodePush deploys.

Firebase Crashlytics

Screenshot from Crashlytics website dashboardFirebase Crashlytics är ett verktyg som håller koll på din app och ser till att du får kurerade kraschrapporter samt statistik och kontext kring när din app kraschar, en del av funktionen överlappar med Sentry och i vissa fall så är Firebase Crashlytics bättre på att hitta fel som uppstår i native lagret. I vissa fall kan du även få tips på hur du kan lösa de problem som gör att appen kraschar.