Exception Handling in Javascript
javascript code में कई बार error आता है जिसे हम console tab में देखतें और फिर उसे ठीक करतें हैं | कुछ ऐसे errors होतें हैं जो काफी complicated होतें हैं जिसे समझना मुश्किल होता है |
उन errors को आसानी से समझने के लिए सही error details user को देना जरुरी होता है | इसीलिए javascript में errors को handle करने के लिए कुछ special method को define किया गया है और वो है try-catch method |
try-catch method को समझने से पहले जानतें हैं की errors कितने प्रकार के होतें ?
Types of Errors
javascript में errors 3 तरह के होतें हैं और वो है:
- Syntax Errors: जब कोई syntax में गलती होती है तब इस तरह की error आती है |
- Run-time Errors: जब program execution में कोई error आती है, तो उसे run-time error कहा जाता है |
- Logical Errors: किसी program अगर logic सही से नहीं लिखा गया है और expected output नहीं मिलता है तब उस error को logical error केहतें हैं |
javascript में compile time errors नहीं होता है, जो भी errors मिलतें हैं वो run-time के समय पता चलता है | इसीलिए javascript में सारे errors को exception ही कहा जाता है |
Exception को Error Object के जरिए बताया जाता है |
Error Object
javascript code में जब भी runtime errors आता है तब ये Error Object बनाता है और उसे throw करता है |
Error Object में 2 properties होतें हैं और वो है:
- name: ये object property error का नाम return करता है |
- message: ये object property से किस तरह की error है, वो message मिलता है |
JS try-catch method
- try block: try block में उस code को लिखी जाती है जिसमें error आने की संभाबना होती है |
- catch block: अगर error आया तो क्या message दिखाना है | कैसे user को बताना है की कैसी error आई है उस details को catch block में लिखा जाता है |
main code को try block में लिखा जाता है और error details को catch block में लिखा जाता है | अगर program run के समय किसी line में error आया तो वहीँ से try block से code run होना बंद हो जायेगा और सीधा catch block execute होना सुरु हो जायेगा |
और अगर कोई भी error नहीं आया तो try block की सारी code पूरी तरह से execute होगा और catch block code skip हो जायेगा |
try-catch syntax:
try
{
//try block code
}
catch(error)
{
//code for handling exception
}उदाहरण:
<!DOCTYPE html>
<html>
<head>
<script>
try{
console.log("try block code");
aa; //forgot to define variable aa
}
catch{
console.log("error has occured");
}
</script>
</head>
<body>
<h1>Exception Handling in Javascript</h1>
</body>
</html>
output:
उदाहरण में देखिए aa को define नहीं किया गया इसीलिए catch block error throw किया |
javascript try-catch-finally block
finally block को try-catch के साथ लिखी जाती है | जब try block में error आता है तो उसमें आगे का code, execute नहीं होता है और program cursor सीधा catch block में चला जाता है |
ऐसे में अगर कोई जरुरी code execute होना हो तब error आने की वजह से वो code execute नहीं हो पाता जैसे की कोई file close करना हो या कोई session end करना हो | इस समस्या का हल देता है finally block |
code जिसे किसी भी हालात में execute करना ही हो तब उसे finally block में लिखी जाती है | अगर error आया तब भी finally block का code execute होगा और error नहीं भी आया तब भी finally block का code execute होगा |
उदाहरण:
<!DOCTYPE html>
<html>
<head>
<script>
try {
console.log("try block code started");
console.log(a);
console.log("try block code end");
}
catch(error) {
console.log('Error message: ' + error);
}
finally {
console.log('Finally will execute always');
}
</script>
</head>
<body>
<h1>Exception Handling in Javascript</body><h1>
</body>
</html>
output
throw keyword
javascript code में जब हम कोई custom-error यानि user-defined error को handle करतें तब उसके error को throw keyword से catch block में भेजते हैं |
throw keyword custom error को hold करता है |
User-Define Exception
program में कुछ ऐसे logic या condition हम लिखते हैं जिसके validation के बिना आगे का code execute नहीं होता है | जरुरत के हिसाब से हमे कुछ restriction, कुछ validation लगाने पडतें हैं |
System के हिसाब से ये validation error में नहीं आता है, पर developer के point-of view इन validation की पूर्ति होना जरुरी होता है | अगर पूरा नहीं हुआ तो इसे custom errors कहा जाता है |
ऐसे errors को user-define exception के साथ handle किया जा सकता है |
requirements जैसे की कुछ input fields के entry के बिना user को registration करने के लिए allow नहीं करना | सही format में password डालना ये सब program की requirement होती है और इसे user-define exception के जरिए check किया जाता है |
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Input Exception Example</title>
<style>
h3{
text-align: center;
}
ul{
border:1px solid;
background-color: #e0d9d9;
width:320px;
padding: 10px;
margin: 10px auto;
}
li{
list-style: none;
padding: 5px;
}
input[type='button']{
color:green;
position: relative;
left:120px
}
.msgcolor{
color: red;
display: none;
}
</style>
</head>
<body>
<h3>User Login Page</h3>
<ul>
<li>
User name:
<input type="text" id="username">
<div class="idmsg msgcolor">*user name is required</div>
</li>
<li>
Password:
<input type="password" id="pwd">
<div class="pwdmsg msgcolor">*password is required</div>
</li>
<li>
<input type="button" value="Login" onclick="validate()">
</li>
</ul>
<script>
var validate = ()=>{
var id = document.querySelector("#username").value;
var pwd = document.querySelector("#pwd").value;
try{
if(!id){
throw "IDError";
}
else
document.querySelector(".idmsg").style.display = "none";
if(!pwd){
throw "PWDError";
}
else
document.querySelector(".pwdmsg").style.display = "block";
}
catch(error){
switch(error){
case "IDError":
document.querySelector(".idmsg").style.display = "block";
break;
case "PWDError":
document.querySelector(".pwdmsg").style.display = "block";
break;
}
}
}
</script>
</body>
</html>
उदाहरण में देखिए हमने एक login form लिया है और check किया है login name और password entry सही हुआ है या नहीं | requirement सही ना होने पर हमने error throw किया है |
output
