JavaScript Errors - Throw, Try and Catch

mistakes are bound to happen

When the JavaScript engine executes JavaScript code, various errors occur:

It could be a syntax error, usually a coding error or a typo by the programmer.

Could be a typo or a missing feature in the language (maybe due to browser differences).

Errors may be due to incorrect output from the server or the user.

Of course, it could also be due to many other unpredictable factors.

JavaScript throws an error

When an error occurs, the JavaScript engine usually stops and generates an error message when something goes wrong.

The technical term to describe this situation is: JavaScript will throw an error.

JavaScript testing and capturing

The try statement allows us to define blocks of code that are tested for errors when executed.

The catch statement allows us to define a block of code that is executed when an error occurs in the try block of code.

JavaScript statements try and catch come in pairs.

grammar

try
  {
  // run the code here
  }
catch(err)
  {
  // handle errors here
  }

example

In the example below, we intentionally made a typo in the code of the try block.

The catch block catches the error in the try block and executes the code to handle it.

<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try
  {
  adddlert("Welcome guest!");
  }
catch(err)
  {
  txt="There was an error on this page.\n\n";
  txt+="Error description: " + err.message + "\n\n";
  txt+="Click OK to continue.\n\n";
  alert(txt);
  }
}
</script>
</head>

<body>
<input type="button" value="View message" onclick="message()">
</body>

</html>

Throw statement

The throw statement allows us to create custom errors.

The correct technical term is: create or throw an exception.

If you use throw with try and catch, you can control program flow and generate custom error messages.

grammar

throw exception

Exceptions can be JavaScript strings, numbers, logical values, or objects.

example

This example detects the value of an input variable. If the value is wrong, an exception (error) is thrown. catch will catch this error and display a custom error message:

<script>
function myFunction()
{
try
  {
  var x=document.getElementById("demo").value;
  if(x=="")    throw "empty";
  if(isNaN(x)) throw "not a number";
  if(x>10)     throw "too high";
  if(x<5)      throw "too low";
  }
catch(err)
  {
  var y=document.getElementById("mess");
  y.innerHTML="Error: " + err + ".";
  }
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

onerror listens for errors

It is impossible for us to use try-catch for all codes to prevent errors from appearing. Fortunately, the browser provides onerror, which can be used to monitor all errors globally.

grammar

window.onerror = function(message, source, lineno, colno, error) { ... }

Function parameters:

message: Error message (string). Available in HTML onerror=""handlers event.
source: URL of the script where the error occurred (string)
lineno: The line number (number) where the error occurred
colno: Column number (number) where the error occurred
error: Error object (object)

example

alert(message);

return false;

};
function myFunction()
{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
</script>

<h1>My First JavaScript</h1>
<p>Please input a number between 5 and 10:</p>
<input id="demo" type="text">
<button type="button" onclick="myFunction()">Test Input</button>
<p id="mess"></p>

Fundebug JavaScript Monitoring Plugin

Fundebug is a real-time monitoring platform for front-end JavaScript errors. After a lot of compatibility debugging, Fundebug's JavaScript monitoring plug-in has been able to automatically capture errors in various mainstream browsers, and can obtain the most comprehensive error information to help developers debug faster.

Typically, for example, because different platforms report different error information, an aggregation needs to be performed. Fundebg's intelligent error aggregation technology can integrate a large number of seemingly different errors that are actually the same.

For the same error generated by the same code, the error message on different browsers is different.

Errors with different names may be the same error:

For example , SyntaxError and ReferenceError ; errors with different message may be the same error,

For example can not find variable fundebug and fundebug is not defined . Moreover, the lineNumber, columnNumber, stack, and url of the same error may be different in different browsers.

Instructions

One line of code to access the plugin:

Supports multiple frameworks: AngularJS, Angular1, Angular2, Vue, React, etc.