Can syntax errors be caught in JavaScript?

Question

A SyntaxError is thrown when the JavaScript engine encounters tokens or token order that does not conform to the syntax of the language when parsing code.

But if there's a syntax error, how could the program even run in the first place?

How can JavaScript syntax errors even be caught?

related: http://stackoverflow.com/questions/12219154/ignore-javascript-errors-in-a-page-and-continue-executing-the-script — Ciro Santilli OurBigBook.com, Sep 18 '16 at 23:18

score 33 · Answer 1 · answered Aug 12 '16 at 16:26

You cannot use try-catch blocks to handle syntax errors as they are thrown while the code is being parsed and not while it's running.

However you can use window.onerror and figure out that there's an error. You must ensure that the onerror function is defined in a separate script tag and not in the tag in which the error may be present!

Eg:

This will not work, because the script is yet to start running when the error is thrown:

<script>
  window.onerror = function (e) {
    console.log('Error: ', e);
  };
  console.log('a'');
</script>

This will work:

<script>
  window.onerror = function (e) {
    console.log('Error: ', e);
  };
</script>
<script>
  console.log('a'');
</script>

jsfiddle demo

score 16 · Answer 2 · answered May 31 '17 at 04:51

In the JS world, SyntaxError CAN be a runtime exception. This can arise, for instance, when trying to parse a JSON response that isn't JSON format. The server can send back lots of types of responses, so if you send a HTML body response to your request that's expecting JSON in the body, you're going to get a SyntaxError thrown in the JS. In such a case, you would get an error message that looks something like this: SyntaxError: JSON Parse error: Unrecognized token '<'.

But there are other runtime SyntaxErrors you could get as well. Mozilla has a list of some here: SyntaxErrors for JSON parsing

You may want to catch these in your code. You can do so with a generic try/catch block like this:

try {
  JSON.parse('<html></html>');
} catch (e) {
  console.log("I catch & handle all errors the same way.");
}

OR you can look for the SyntaxError specifically:

try {
  JSON.parse('<html></html>');
} catch (e) {
  if (e instanceof SyntaxError) {
    console.log("I caught a pesky SyntaxError! I'll handle it specifically here.");
  } else {
    console.log("I caught an error, but it wasn't a SyntaxError. I handle all non-SyntaxErrors here.");
  }
}

Mozilla has even more info on JS errors and handling them.

Yup. I think this is really a confusing name. This `SyntaxError` is not really a syntax error in the language sense (e.g.: you started a string with quotation mark but don't have the closing quotation mark anywhere, etc). The latter indeed cannot be caught. `SyntaxError` is really just a runtime error. It just has an unfortunately confusing name. — Zheng Liu, Jan 08 '21 at 15:08

score 14 · Accepted Answer · edited Nov 19 '14 at 20:34

14

It's runtime errors that can be caught with try-catch, not syntax errors (if you eval your code you can handle syntax errors in the evaled code but that's just weird).

I'd recommend you read these:

edited Nov 19 '14 at 20:34

Pacerier

86,231
106
366
634

answered May 11 '11 at 11:01

oberhamsi

1,303
8
18

+1 on the evaling code into excistance and catching exceptions on the syntax errors being possible, but wonky. – Martijn May 11 '11 at 11:07
native javascript's JSON.parse throws SyntaxErrors – That Realty Programmer Guy Aug 11 '22 at 23:40

Farhan stands with Palestine · Answer 4 · 2016-05-05T18:18:28.790

4

You can catch programmer-generated and runtime exceptions but you cannot catch JavaScript syntax errors, though you may handle them in some browsers using window.onerror.

This is taken from the book JavaScript- The Complete Reference by Thomas-Powell which I like very much. You can refer to the code examples in that book.

edited May 05 '16 at 18:18

answered Nov 18 '14 at 14:57

Farhan stands with Palestine

13,890
13
58
105

Do you have a code example? Which browsers do you mean? – Pacerier Nov 19 '14 at 20:21

score 0 · Answer 5 · answered Sep 08 '20 at 01:01

You specifically cannot catch parser-generated SyntaxErrors since they are thrown by the parser, which has no idea what try/catch blocks do. More info on that - Learning how programming languages work

There is a way to catch SyntaxErrors that are generated during code execution. This method is slow, and I would not recommend it. You can catch SyntaxErrors using eval().

var code = `function() {
doSomething()
somethingElse()
var x = 5 + 5
// No ending curly brace` // The code to be run using eval

try {
  eval(code) // Try evaluating the code
} catch (e) {
  if (e.name !== 'SyntaxError') throw e // Throw the error if it is not a SyntaxError
  
  console.log('A SyntaxError has been caught\n\nDetails:\n' + e) // It is a SyntaxError
}

Alternatively, you could use new Function(), which is up to 93% faster - https://jsben.ch/1HLQ1

var code = `function() {
doSomething()
somethingElse()
var x = 5 + 5
// No ending curly brace` // The code to be run using eval

try {
  new Function([], code) // Try evaluating the code
} catch (e) {
  if (e.name !== 'SyntaxError') throw e // Throw the error if it is not a SyntaxError
  
  console.log('A SyntaxError has been caught\n\nDetails:\n' + e) // It is a SyntaxError
}

Can syntax errors be caught in JavaScript?

5 Answers5

Linked

Related