Have you ever tried to get a user of your site to open the Chrome developer console to check for JavaScript errors? How about copying the error to send to you? It’s not going to happen if the user isn’t technical. This is why I created the JavaScript Error Log WordPress plugin.

What is JavaScript error reporting?

Any PHP error encountered by a user gets automatically logged to the server for you to review. JavaScript errors happen only in the user’s browser then they’re gone forever! The majority of users will have no idea that they encountered a JavaScript error, they’ll just know that they’re having a bad experience. Wouldn’t you want to know when your users are having a bad time interacting with your site?

How does it work?

The JavaScript Error Log plugin will load a small piece of JavaScript on your site that will watch for errors. When a user encounters an error the plugin makes an Ajax request to the server and logs it to the PHP error log. That’s all there is to it! Here’s an example:

[Fri Nov 04 18:41:59.543963 2016] [:error] [pid 1234] [client 127.0.0.1] JavaScript Error: Uncaught TypeError: Cannot read property 'tableSort' of undefined, file: /wp-content/plugins/fake/fake.js, referer: http://fakedomain.dev/

You can enable the plugin temporarily to log an error for a specific user, or leave it enabled to watch for all JavaScript errors. The plugin doesn’t have any menus or options, if the plugin is enabled it’s logging!

What’s next?

This plugin is still very new and I’ve got a few ideas for how to improve it:

Log somewhere other than the PHP error log.

The PHP error log was an easy choice. It already exists and the logs will be rotated and managed by most servers automatically. Benefits of logging elsewhere? PHP error logs can get noisy and make it difficult to process the information. We’ll also have more control, we could log more information like stacktraces and give users a way to clear the log.

Allow whitelisting JavaScript files.

JavaScript error reporting can also be noisy. For example, Chrome extensions can throw errors that will be picked up by this plugin. You should be able to whitelist the files you care about.

Alternatives

There are a few great hosted JavaScript error reporting services out there. Sentry is my favorite. It’s built for JavaScript and has a bunch of great features. You should probably use Sentry for larger more popular sites. The JavaScript Error Log plugin is great for one-offs or smaller sites.

How do I get the plugin?

Currently you can find it on GitHub:

https://github.com/octalmage/js-error-log

I plan on submitting the plugin to the WordPress.org plugin repository after I implement a few additional features.

Let me know what you think!