{"id":41944,"date":"2022-02-10T11:41:09","date_gmt":"2022-02-10T10:41:09","guid":{"rendered":"https:\/\/kinsta.com\/nl\/?p=41944&preview=true&preview_id=41944"},"modified":"2023-07-06T11:03:31","modified_gmt":"2023-07-06T09:03:31","slug":"fouten-in-javascript","status":"publish","type":"post","link":"https:\/\/kinsta.com\/nl\/blog\/fouten-in-javascript\/","title":{"rendered":"De definitieve handleiding voor het omgaan met fouten in JavaScript"},"content":{"rendered":"

Murphy’s wet stelt dat alles wat fout kan gaan uiteindelijk fout een keer zal gaan. Helaas is de programmeerwereld een van de plekken waar deze wet net iets te goed op toegepast kan worden. Bij het maken van een applicatie is de kans groot dat je bugs en andere problemen veroorzaakt en daarbij zijn fouten in JavaScript een veelvoorkomend probleem!<\/p>\n

Het succes van een softwareproduct hangt af van hoe goed de makers deze problemen kunnen oplossen voordat ze gebruikers hier last van krijgen. En JavaScript<\/a> is – van alle programmeertalen<\/a> – berucht voor de manier waarop foutafhandeling is ingericht.<\/p>\n

Als je een JavaScript applicatie bouwt<\/a>, is de kans groot dat je op een of ander moment met data types in de war haalt. Mocht dit specifieke scenario je bespaard zijn gebleven, dan heb je vast wel eens een undefined <\/em>voor een null <\/em>ingeruild of een triple equals operator (===<\/code>) vervangen door een double equals operator (==<\/code>).<\/p>\n

Het is dan ook menselijk om fouten te maken en het overkomt iedereen. En daarom laten we je alles zien wat je moet weten over hoe je met fouten omgaat in JavaScript.<\/p>\n

Dit artikel leidt je door de basic fouten in JavaScript en legt de verschillende fouten uit die je kunt tegenkomen. Je leert vervolgens hoe je deze fouten kunt identificeren en oplossen. Er zijn ook een aantal tips om effectief om te gaan met fouten in productieomgevingen.<\/p>\n

Laten we maar snel beginnen!<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Bekijk onze videogids over het omgaan met JavaScript fouten<\/a><\/h3>\n<\/kinsta-video>\n

Wat zijn JavaScript fouten?<\/h2>\n

Fouten bij het programmeren verwijzen naar situaties waarin een programma niet functioneert zoals het zou moeten. Het kan voorkomen wanneer een programma niet weet hoe het de taak moet afhandelen, zoals wanneer het probeert een niet-bestaand bestand te openen of een webgebaseerd API endpoint probeert te bereiken terwijl er geen netwerkverbinding is.<\/p>\n

Deze situaties zorgen ervoor dat het programma fouten naar de gebruiker stuurt en stelt dat het niet weet wat er nu moet gebeuren. Het programma verzamelt zoveel mogelijk informatie over de fout en meldt vervolgens dat het niet verder kan.<\/p>\n\n

Intelligente developers proberen deze scenario\u2019s voor te zijn en zich in te dekken, zodat de gebruiker niet zelf een technische foutmelding als “404”<\/a> hoeft uit te vogelen. In plaats daarvan tonen ze een veel begrijpelijker bericht: \u201cThe page could not be found.\u201d<\/p>\n

Fouten in JavaScript zijn objecten die worden weergegeven wanneer er een programmeerfout optreedt. Deze objecten bevatten veel informatie over het type fout, de instructie die de fout heeft veroorzaakt en de stack trace op het moment dat de fout optrad. JavaScript stelt programmeurs ook in staat om custom errors (aangepaste fouten) te maken om extra informatie te verstrekken bij het oplossen van problemen.<\/p>\n

Eigenschappen van een fout<\/h3>\n

Nu de definitie van een JavaScript fout duidelijk is, is het tijd om dieper in de materie te duiken.<\/p>\n

Fouten in JavaScript hebben bepaalde standaard- en aangepaste eigenschappen die helpen de oorzaak en gevolgen van de fout te begrijpen. Fouten in JavaScript bevatten standaard drie eigenschappen:<\/p>\n

    \n
  1. message<\/strong>: Een tekenreekswaarde die het foutbericht overbrengt<\/li>\n
  2. name<\/strong>: Het type fout dat zich heeft voorgedaan (we zullen hier dieper op ingaan in de volgende sectie)<\/li>\n
  3. stack<\/strong>: De stack trace van de uitgevoerd code toen de fout optrad.<\/li>\n<\/ol>\n

    Bovendien kunnen fouten ook eigenschappen bevatten zoals columnNumber, lineNumber, fileName, <\/em>enz. om de fout beter te beschrijven. Deze eigenschappen zijn echter niet standaard en kunnen al dan niet aanwezig zijn in elk foutobject dat door jouw JavaScript applicatie wordt gegenereerd.<\/p>\n

    Stack trace begrijpen<\/h3>\n

    Een stack trace is de lijst met method calls waarin een programma zich bevond toen een event, zoals een uitzondering of een waarschuwing, plaatsvond. Dit is hoe een voorbeeld stack trace, vergezeld door een uitzondering, eruitziet:<\/p>\n

    \"Voorbeeld
    Voorbeeld van een stack trace.<\/figcaption><\/figure>\n

    Zoals je kunt zien, begint het met het afdrukken van de foutnaam en het bericht, gevolgd door een lijst met methoden die werden gecallt. Elke method call vermeldt de locatie van de source code en de regel waarop deze werd gecallt. Je kunt deze gegevens gebruiken om door je codebase te navigeren en te identificeren welk stuk code de fout veroorzaakt.<\/p>\n

    Deze lijst met methoden is \u201cstacked\u201d gerangschikt. Het laat zien waar je uitzondering voor het eerst werd gegenereerd en hoe deze zich verspreidde via de stacked method calls. Als je een catch voor de uitzondering implementeert, kan deze zich niet door de stack verspreiden en je programma laten crashen. In sommige scenario’s wil je echter mogelijk fatale fouten onopgemerkt laten om het programma opzettelijk te laten crashen.<\/p>\n

    Fouten vs uitzonderingen<\/h3>\n

    De meeste mensen beschouwen fouten en uitzonderingen meestal als hetzelfde. Het is echter essentieel om een klein maar fundamenteel verschil tussen de twee op te merken.<\/p>\n