Debugging SyntaxError: JSON.parse in OpenCart

debugging syntaxerrors in opencart

Getting a yet another SyntaxError building or running your OpenCart store?

Fortunately, debugging and fixing most of the common SyntaxError causes in OpenCart isn't a complex task – just like fixing OpenCart blank pages.

In most cases, you'll only need your browser's free Developer Tools at hand to assist you.

What are SyntaxErrors?

SyntaxError messages are not unique to OpenCart – they're thrown by the JavaScript engine trying to parse broken code.

In OpenCart stores, SyntaxErrors are usually caused by server-side errors from OpenCart models and controllers interfering with the client-side JSON parser.

There are different kinds of SyntaxErrors  you'll encounter in OpenCart, the most common being:

  • SyntaxError: JSON.parse: unexpected character
  • SyntaxError: Unexpected Token
  • SyntaxError: Unexpected Character

In the early versions of OpenCart, you would encounter most SyntaxErrors at checkout.

However, as OpenCart gets more complex, more asynchronous calls throughout the system make SyntaxErrors more common – so, you might encounter them when:

  • creating and editing orders and products via the admin-area
  • browsing products and categories in your store
  • adding products to cart and changing your cart contents
  • using both regular and third party checkouts
  • generally using third party OpenCart themes and plugins

That's not a complete list of course.

For example, the new OpenCart 3 lets you move your storage folder without checking the permissions – so, you just might get a SyntaxError right after installing your new shiny OpenCart store:

In this case, you can see the server-side error message causing the SyntaxError – it's a Permission denied PHP warning.

This means OpenCart can't move the storage folder to the new location due to the lack of write permissions – so, you'll easily fix this one by adjustin the permissions.

What about the cases where you don't see the underlying error message or don't see anything at all (e.g. you only have a button that doesn't work)?

 

Finding out the root cause of SyntaxErrors

To be able to fix SyntaxErrors in OpenCart, you'll first need to find the root cause.

You can do this in two common ways.

 

Find the underlying error message in the server log

Depending on the server-side error message causing your SyntaxError and your logging settings, you might be able to find the cause of your problems in the log file.

In an OpenCart setup, there are at least four different log files you can look into: OpenCart log, OCMOD log, server access log and server error log (and possibly the vQmod log, too – if you're using vQmod for OpenCart modifications).

In this case, you'll need to look into your server's main error_log file.

Its location will depend on your server configuration, but some of the common locations are:

  • /var/log/httpd/error_log
  • /var/log/apache2/error.log
  • /usr/local/apache/logs/error_log

If it's not there, check out the output of <?php phpinfo(); ?> to determine the location of the log file.

In case you're running OpenCart 3, you can browse your server's error log via Admin > System > Maintenance > Error Logs.

Now – if you're lucky, you'll see the server-side error message that's causing your OpenCart SyntaxError in the log file.

Here's what's been causing our OpenCart 3 SyntaxErrors:

When you know the underlying error message, fixing it gets much easier.

What if it's not in the log files, though?

 

View server response using Developer Tools

Since the JavaScript dialog doesn't give any details about the actual error, it is difficult to debug it using a plain web browser. Fortunately, there's a tool that will allow you to dig out the cause in no time.

Firebug addon for Firefox provides you with a toolset to monitor, debug and develop CSS, HTML, and JavaScript in any web page. Firebug is also available for Chrome browser. In case you are using Opera, Dragonfly's network log offers similar functionality.

After installing Firebug, open it from the Tools menu, make sure Console is enabled and active and navigate to the page giving you the error. In our case, it's the checkout page, so by the time we see the SyntaxError dialog, our Firebug console looks somewhat like this.

As you can see, Firebug console shows a list of requests executed during page load. The request of most interest to us is the last one since it's the one that causes the SyntaxError, so we want to take a closer look at it's contents. To do it, click on the request and scroll down to see what's inside.

The cause of the SyntaxError will be in the beginning of the response body. In our case, it's a notice about a missing language file for a custom payment module:

Notice: Error: Could not load language payment/pesapal!

Missing language files is one of the main causes of SyntaxErrors in OpenCart. Another common cause are various "Undefined index" PHP notices due to outdated or broken extensions or incorrectly performed updates to OpenCart.

Now when you know the actual problem, it shouldn't be too difficult solve it – by following our guide on Fixing Blank Pages and Server Errors in OpenCart.

Build a multi vendor marketplace with MultiMerch

Martin Boss

Martin is the founder of MultiMerch, an ex-OpenCart developer and an e-commerce enthusiast.You can also find him on LinkedIn, Twitter and Quora.