Programmeringsfel är oundvikliga. Förr eller senare kommer din ansökan att uppleva något oväntat beteende. Precis som alla andra programmeringsspråk ger JavaScript upp fel när något går fel i din kod.

Fel stör det normala flödet av en applikation. Men de hjälper också till att skydda din applikation från oförutsägbart beteende. Att veta hur man hanterar fel korrekt är avgörande.

Varför är felhantering viktig?

Felhantering bidrar till en förbättrad användarupplevelse. Du kan byta ut JavaScripts standardfel och ibland utförliga fel med dina egna mer läsbara felmeddelanden. Du kan graciöst hantera orsakerna till vissa fel och hålla ditt program igång istället för att avsluta det.

Felhantering är också till hjälp under utveckling. Du kan fånga ett körtidsfel och göra något användbart med det, som loggar den till webbläsarkonsolen. Detta är mer graciöst än felet som orsakar en krasch och att man inte vet var eller varför felet uppstod.

Struktur för inbyggda JavaScript-fel

JavaScripts fel är objekt med tre egenskaper:

instagram viewer
  • namn: Detta är namnet på felet. Till exempel kommer ett saknat variabelnamn att ge ett fel som heter SyntaxError.
  • meddelande: Detta är brödtexten i meddelandet och förklarar felet textmässigt.
  • orsak: Du kan använda den här egenskapen med anpassade fel för att hålla reda på samtalsstacken.

Vanliga typer av fel i JavaScript

Här är några vanliga fel som finns i JavaScript.

Syntaxfel

Syntaxfel kan uppstå när JavaScript försöker tolka din kod. Det kommer att uppstå ett fel om din kod inte överensstämmer med rätt syntax. Några vanliga fel som kan orsaka syntaxfel är:

  • Variabelnamn saknas.
  • Saknar "}" efter en funktion.
  • Saknar ")" efter ett villkor.

Referensfel

Referensfel uppstår när ett program försöker referera till en variabel som inte är tillgänglig eller utanför omfattningen.

Skrivfel

JavaScript kan skapa ett typfel när det inte kan utföra en operation eftersom den förväntade typen är annorlunda än den som den tar emot.

URIerror

Det här felet uppstår om du använder en global URI-hanteringsfunktion – som decodeURIComponent() – felaktigt. Som ett resultat misslyckas kodningen eller avkodningen.

AggregateError

Detta fel används för att representera flera fel samlade i ett. Använd det när du vill kasta många fel samtidigt. Till exempel kan Promise.any() kasta en AggregateError() när alla löften som skickas till den avvisar.

Internt fel

Ett internt fel uppstår när ett fel uppstår i JavaScript-motorn.

RangeError

Vissa funktioner dikterar intervallet av värden du kan skicka som argument. Det här felet uppstår när du försöker skicka ett värde som inte ingår i det intervallet.

Felhantering med försök... Catch Block

JavaScript tillhandahåller inbyggd funktion för undantagshantering med försök... fånga... äntligen blockera. Det låter dig också ta upp dina egna fel med hjälp av kasta operatör.

Du kan använda ett try...catch-block för att hantera fel som uppstår under körning. Du skriver giltig kod som du förväntar dig att köra korrekt i försöksblocket. I fångstblocket kan du skriva felhanteringskod.

Prova {
// Giltig Javascript-kod
} fånga (fel) {
// Hanteringsfel
} till sist {
// Körs även när ett fel uppstår
}

Fångstblocket ignoreras om koden i försöksblocket inte ger upphov till några fel. Om det ger upphov till ett fel, hoppar exekveringen till fångstblocket. Koden i finalblocket körs oavsett om ett fel uppstår eller inte. Detta block är inte obligatoriskt, så uteslut det om du inte behöver det.

Koden du inkluderar i försöksblocket måste vara giltig. Om det inte är det kommer JavaScript att skapa ett analysfel.

Låt oss titta på ett praktiskt exempel:

Prova {
trösta.log (text)
} fånga (fel) {
trösta.logga(fel.meddelande)
} till sist {
 console.log("Kommer att utföras oavsett")
}

Detta program försöker logga värdet på textvariabeln. Eftersom den variabeln inte är definierad kommer programmet att ge ett fel. Detta fel är tryckt på konsolen i fångstblocket. Finalblocket körs sedan och skriver ut ett eget meddelande.

Referensfel: text är inte definierad
Kommer att utföras oavsett

I situationer där du behöver ta upp ditt eget fel, använd kasta operatör.

Tänk på det här exemplet som ger ett fel om informationen är falsk:

konst data = getData()
Prova {
 if (!data) {
 kasta "Inga data"
 }
trösta.log (data)
// Fortsätta
} fånga(fel) {
trösta.log (fel) // "Inga data"
}

I det här exemplet anropar programmet funktionen getData() och tilldelar dess resultat till datavariabeln. I försöksblocket ger blocket ett anpassat fel om data är tomma. Fångstblocket fångar det felet och loggar det till konsolen.

Att kasta fel är mycket fördelaktigt under utveckling. Du kan använda det anpassade felmeddelandet för att förstå varför din applikation inte fungerar som förväntat.

Som det här exemplet visar kan du använda en sträng för felobjektet. Du kan faktiskt skicka vilket JavaScript-uttryck som helst som ett fel. Men för överensstämmelse med inbyggda fel, använd ett JavaScript-objekt som innehåller ett namn och meddelande.

kasta {
 namn: "Felnamn", 
 meddelande: "Felmeddelande"
}

Du kan också använda JavaScripts inbyggda konstruktörer när du skapar fel. Dessa konstruktörer inkluderar bland annat Error, SyntaxError och ReferenceError.

För att skapa ett fel med felkonstruktorn, använd den här koden:

kastanyFel("Inga data")

Du kan nu referera till namnet och meddelandet.

trösta.log (error.name) // Fel
trösta.log (fel.meddelande) // Inga data

Utöka JavaScript-felobjektet

En anpassad felklass är praktisk när du hanterar fel som inte motsvarar de objekt som redan tillhandahålls av JavaScript. Du kanske till exempel vill isolera ett datavalideringsfel som en specifik typ som kallas ValidationError.

Du kan använda en JavaScript ES2015 klass för att skapa en anpassad felklass.

klassValideringsfelsträcker sigFel{
konstruktör(meddelande) {
super(meddelande);
 detta.namn = "Valideringsfel";
 }
}

Kasta ett fel med klassen ValidationError så här:

kastany ValidationError("Ditt felmeddelande")

Det kastade felet kommer att vara ett objekt med namn och meddelandevärden.

{
 namn: "Valideringsfel",
 meddelande: "Ditt felmeddelande"
}

Fel finns till för att hjälpa

Felhantering är en grundläggande del av programmering, vilket språk du än använder. JavaScript har bra stöd för att ta upp och fånga upp fel i stil med undantag. Den har också flera inbyggda feltyper som du kan hantera och använda för dina egna ärenden.

Vissa fel som syntaxfel kan förbli oupptäckta när du skriver JavaScript i "slarvigt läge". Genom att använda strikt läge kan JavaScript fånga upp fel som annars skulle ha ignorerats.