Debuggen is iets waar elke ontwikkelaar (met React of anders) mee te maken krijgt. En ze doen het niet altijd met plezier. Toch hoort het gewoon bij het leven als ontwikkelaar. Maar met de juiste tools en technieken kun je het een stuk minder pijnlijk maken. En daarom bestaat deze handleiding. Hij behandelt de meest voorkomende soorten React-fouten, de beste debugtools van 2024 en een aantal extra tips voor het oplossen van veelvoorkomende problemen in je React-apps.
Wat is React-debugging?
Debuggen betekent het vinden en corrigeren van codefouten. Omdat React geen eigen programmeertaal is, maar een front-end JavaScript-bibliotheek, zijn veel van de gebruikelijke JavaScript-debugtools en -technieken van toepassing. Er zijn echter ook enkele React-specifieke debugtools die je leven gemakkelijker zullen maken. Maar voordat we naar oplossingen kijken, laten we beginnen met de soorten fouten die je kunt tegenkomen. Natuurlijk wil je, als je nu problemen ondervindt, snel een oplossing. Om een probleem op te lossen, moet je echter eerst weten hoe je het probleem definieert. Ze vallen meestal in vier categorieën: UI-bugs, logische fouten, netwerkfouten en regressiebugs. UI-bugs zijn de eerste categorie. Deze treden op wanneer de gebruikersinterface er niet goed uitziet of niet goed functioneert. Deze zijn meestal het gemakkelijkst te herkennen, omdat je ze meteen ziet. Enkele voorbeelden van deze bugs zijn knoppen die op de verkeerde plek staan, onjuiste lay-outs of elementen die niet correct (of helemaal niet) worden bijgewerkt.
Logische fouten
Logische fouten treden op wanneer de app niet doet wat hij zou moeten doen. Met andere woorden, het probleem zit ergens in de code: wat de ontwikkelaar bedoelde en hoe de interpreter het begrijpt, komt niet overeen. Het zijn deze fouten waar je mogelijk de meeste tijd aan kwijt bent om te debuggen. Logische fouten zijn moeilijker te vinden omdat ze niet altijd zichtbare fouten of crashes veroorzaken. Ze zorgen er alleen voor dat de app zich onjuist gedraagt. Soms verschijnen ze alleen onder zeer specifieke omstandigheden of configuraties of alleen bij bepaalde gebruikers. Dat maakt ze nog moeilijker te reproduceren en op te sporen.
Netwerkfouten
Netwerkfouten treden op wanneer netwerkverzoeken mislukken. Dit kan betekenen dat bronnen niet correct of helemaal niet worden gedownload. Deze fouten kunnen van invloed zijn op verzoeken aan uw server en diensten van derden, zoals APIʼs of CDNʼs. Deze fouten kunnen verschillende oorzaken hebben – het kan de code zijn of iets mis met het netwerk zelf, om maar een paar redenen.
Regressiefouten
Daarnaast zijn er regressiefouten. Dit zijn functies die ooit werkten, maar na een nieuwe code-update niet meer. Deze komen vaak voor in programmaʼs en apps die snel veranderen (soms misschien wel té snel). Maar het is mogelijk om ze te voorkomen met grondige tests en monitoring.
Je ontwikkelomgeving instellen
Nu je de fouten die je in React kunt tegenkomen gemakkelijk kunt classificeren, kun je beginnen met debuggen. Om een React-app te debuggen, heb je de juiste configuratie nodig.
- Installeer Node.js op je computer. Node.js geeft een app zijn runtime.
- Je hebt een pakketbeheerder nodig – npm of Yarn – om pakketten te beheren.
- Installeer React in het project.
- Gebruik een code-editor die React-syntaxis kan markeren (bijvoorbeeld Visual Studio Code).
- Installeer een browser met ontwikkelaarstools (Google Chrome, Opera of een andere), bij voorkeur in de incognitomodus, zodat extensies geen problemen kunnen veroorzaken.
Beste React-debuggingtools
Debuggingtools maken een enorm verschil. Er zijn er veel voor het debuggen van React, en sommige zijn wellicht beter geschikt dan andere, afhankelijk van wat je gewend bent en wat je al hebt. Kies wat je het prettigst vindt, of combineer ze.
Chrome DevTools
Chrome DevTools zijn ingebouwd in Google Chrome en andere op Chromium gebaseerde browsers, dus als je een van deze browsers hebt, beschik je al over deze debugger. Met andere woorden, je hoeft niets te downloaden. Het is heel eenvoudig te openen: ga naar je browser en druk op F12. Het stelt je in staat om elementen te inspecteren, consolelogs te bekijken en de debugger te gebruiken om de code eens goed te bekijken. Wat zijn React Developer Tools precies? Het is een extensie voor Chrome en Firefox met een paar extra functies ten opzichte van DevTools. Je kunt er de componenthiërarchie van React mee inspecteren, props en state bekijken en zien hoe componenten renderen en opnieuw renderen. Als je wilt begrijpen hoe verschillende componenten met elkaar samenwerken, gebruik dan deze tool.
Visual Studio Code JavaScript-debugger
Ontwikkelaars gebruiken Visual Studio Code voor veel soorten code en het biedt ook ingebouwde ondersteuning voor JavaScript-debugging, inclusief React. Enkele handige functies zijn breakpoints, watch-expressies en een call stack viewer. Het is makkelijker om code stap voor stap te doorlopen en de bron van problemen te vinden als je deze bekijkt via VS Code. Raygun4JS en Raygun APM hebben een realtime foutmonitor en prestatie-inzichten waarmee je problemen in React-apps kunt vinden. Het helpt je fouten in productie op te sporen en geeft vervolgens gedetailleerde diagnostische informatie om ze snel op te lossen. Raygun APM (Application Performance Monitoring) kan u nog dieper inzicht geven in prestatieproblemen.
Debugtechnieken
Het zijn niet alleen de tools die bepalen hoeveel en hoe goed u kunt debuggen. Misschien is een grotere factor de technieken die u gebruikt. Dus, welke technieken zijn dat?
Consolelogboekregistratie
Een van de eerste dingen die u waarschijnlijk zult doen, is consolelogboekregistratie. Het lezen van de `console.log` is eenvoudig, maar in veel gevallen erg effectief. Je kunt variabelen, statussen en props op verschillende punten in je component loggen om te zien wat er misgaat. Vergeet alleen niet om deze logs te verwijderen voordat je je app implementeert. Je wilt je gebruikers niet afschrikken door consolelogs te tonen die ze misschien niet begrijpen en die niet gewenst zijn. Breakpoints en stapsgewijze debugging: Stel breakpoints in je code in met tools zoals Chrome DevTools of Visual Studio Code. Met breakpoints kun je de uitvoering pauzeren en de status van je app inspecteren op specifieke punten waar mogelijk een fout optreedt. Je kunt je code regel voor regel doorlopen om te zien hoe deze wordt uitgevoerd en waar het misgaat.
Componentinspectie
Gebruik React Developer Tools om de componentstructuur te inspecteren en de props en state voor elke component te bekijken. Door dit alles te zien, begrijp je beter hoe data stroomt en kun je ontdekken waar het vastloopt of verloren gaat.
Foutgrenzen
Foutgrenzen zijn React-componenten die JavaScript-fouten opvangen in hun componentstructuur. Vervolgens loggen ze die fouten en tonen ze een fallback-UI in plaats van te crashen. Dit is erg handig als je wilt dat het programma blijft draaien en tegelijkertijd wilt zien waar de code mogelijk faalt. Gebruik foutgrenzen om fouten in React-code op een elegante manier op te vangen en af te handelen.
Testen
Je kunt fouten vrij vroeg opsporen als je componenten test met tools zoals Jest en React Testing Library. Schrijf unit tests om te controleren of individuele componenten naar behoren werken en integratietests om te controleren of meerdere componenten samenwerken.
Prestaties optimaliseren en monitoren
Debuggen stopt niet bij het oplossen van fouten. Je wilt tegelijkertijd ook de prestaties verbeteren. Hier zijn enkele technieken voor het optimaliseren en monitoren van prestaties met React.
Code splitting en lazy loading
De naam zegt het al.
Code splitting stelt je in staat om code op te splitsen in kleinere bundels die je op aanvraag kunt laden. Gesplitste code verkort de laadtijd wanneer de app voor het eerst opstart. Gebruik Reactʼs React.lazy en suspense om componenten lazy te laden.Profileren met DevTools
Meet de prestaties van de app met React Profiler. Je vindt deze in React Developer Tools. Met de Profiler kunt u prestatieknelpunten opsporen om de renderingtijden te verbeteren. Memoization stelt u in staat de rendering te optimaliseren door de resultaten van kostbare berekeningen in de cache op te slaan. Gebruik React.memo voor functionele componenten en PureComponent voor klassecomponenten. Ze voorkomen onnodige herrenderingen.
Gelijktijdige modus
Gelijktijdige modus is een aankomende functie in React die de responsiviteit van apps verbetert door React meerdere taken tegelijk te laten uitvoeren. Houd deze functie in de gaten. Je zult hem waarschijnlijk binnenkort kunnen gebruiken.
Praktische debugscenarioʼs
Het is tijd om te combineren wat je tot nu toe hebt geleerd. Laten we eens kijken naar een paar voorbeelden van het debuggen van React.
UI-bugs
Als een knop niet op de juiste positie staat, kun je het element inspecteren met Chrome DevTools. Controleer de stijlen die op de pagina van toepassing zijn en kijk of er CSS-problemen zijn. Gebruik vervolgens React Developer Tools om de props en state te controleren die aan het knopcomponent worden doorgegeven.
Logische fouten
Als je app zich niet gedraagt zoals je wilt, gebruik dan breakpoints om de code stap voor stap te doorlopen. Controleer de waarden van variabelen en states op verschillende punten. Daar kun je mogelijk zien waar het mis is gegaan. Gebruik vervolgens consolelogging om de gegevensstroom te volgen.
Netwerkfouten
Stel dat uw app geen gegevens kan ophalen. Open het tabblad Netwerk in Chrome DevTools. Controleer of de netwerkverzoeken correct worden verzonden en of de antwoorden kloppen. Zoek naar foutmeldingen en diagnosticeer problemen met de API of server.
Regressiefouten
Als een functie die voorheen werkte nu niet meer werkt, ga dan de code na en achterhaal de recente wijzigingen. Gebruik versiebeheertools zoals Git om te controleren wat er anders is en waarom de functie mogelijk niet meer werkt. Schrijf ook regressietests om soortgelijke problemen in de toekomst op te sporen.
Debuggen in 2024
Het ontwikkelen van hoogwaardige React-apps is niet mogelijk zonder intensief debuggen. Door de meest voorkomende fouttypen te kennen en de juiste tools en technieken te gebruiken, wordt debuggen effectiever. Blijf op de hoogte van de nieuwste tools en werkwijzen voor React-debugging.
