Errors: your website’s biggest worst kept secret!

When we find an error, it usually leads to one of two questions:

  • How many users are getting errors?
  • What errors are generated on our app?

In both cases the action is the same … find the errors and fix them. Simple!

Less simple is defining what constitutes an error. We’re not talking about simply a 404 “Page Not Found” error. Errors can be anything from a form not submitting properly, to your app or website not loading for a specific user because of a problem with a server.

Let’s take a look at some errors together and see how we can track them.

UX Errors

Although user experience errors can take quite a bit of effort to track, identify and replicate, they are also the errors that can have the biggest impact on your bottom line.

You or your colleagues might not even see some of them as errors but, in the case of your bottom line, it’s your user’s experience with your website or app that counts so it’s worth paying attention.

Forms that don’t (always) work

formerrorwrong
There is nothing wrong with the phone number… and yet it shows as invalid.

Every big action inside an app or eCommerce website uses a form. From creating an account to buying a product, logging in and sending a message… the list goes on. The bigger the form, the higher the chances that something might go wrong.

One example of an error that can be so obscure that you and your colleagues might never see it is when a user enters their mailing address. Forms that force a zip code to validate with numbers only can cause chaos for International users.

Such an error can have a big impact on conversion rates for users from specific countries. Most users won’t take the time to email you to tell you about the error, leaving you with a lost sale and completely in the dark as to why.

While form tracking is a complex issue, form error tracking is straightforward and easy to implement:

  • each time a user submits a form and is greeted by an error, send that error to Google Analytics

Go the extra mile. To see the impact the form errors are having on users, generate video sessions of their form filling with InspectLet.

Install InspectLet on the form pages and each time an error happens, label the video session as “error”. Doing so will allow you to filter the errors and see them happen as if in real time.

Broken links

404Broken links that are supposed to open a new page will send the user to either a 404 page or, as happens in many cases, it may redirect the user back to the homepage. Enormous frustration all round!

If he is redirected to a 404 page, here’s a good tutorial that will show you how to track the error in Google Analytics. This will give you a good snapshot of how many people land on such error pages.

If your user is redirected to the homepage things start to get a little more complicated. The data in Google Analytics will suggest that people went to the home page out of choice when this is simply not the case.

If you’d prefer not to use a 404 page, all is not lost. Adding an extra parameter to the redirect will help you track these broken links. For example, instead of redirecting users to http://mywebsite.com, redirect them to http://mywebsite.com?broken-link=1.

This will allow you to check in Google Analytics how many people ended up on URLs that contain broken-link=1. Replace the value “1″ with the actual page from where the user is coming and it becomes much easier for you to identify the error and fix it.

Broken JavaScript

trackjs
Track.js reporting JavaScript errors from your website

I don’t think we could imagine the web as it is today without JavaScript. Web apps use this language for anything from design to advanced functionalities.

Most of the time, when Javascript goes wrong, nothing happens. Literally. The user is expecting a specific action but their click has no effect. Frustrating for your user but this is especially frustrating for you the owner because, since no error is displayed, it becomes very difficult to even know that an error occurred.

To make things even worse, JavaScript will behave differently on different browsers and on older browsers, it is the advanced scripts that fail most often.

The easiest way to track broken JavaScript scripts is to use track.js:

Broken design

While you expect your website to look and feel the same for everyone, this is often not the case. Design elements gone wrong can have a big impact on your users, especially if the elements they are looking for are not visible or accessible.

Unless users report it, broken design is difficult to capture and report on, especially if it is broken on specific mobile devices which you don’t have access to.

One way to do check for these errors is to use tools like crossbrowsertesting.com or browsershots.org. These services will generate screenshots of any of your pages on any resolution/browser/OS combination.

Servers & Services Errors

Server or infrastructure errors can be fatal to your app (it will stop working or simply not load) or they can create loading time issues, making the app or website load very slowly.

Implementing error tracking on the front end of the app for these errors makes no sense. The front end will not load in the first place so there will be no one to report the error.

Monitoring server errors is usually the job of the sys admins in your organization and they can give you access to their error reporting interface.

We are big fans of Nagios, a system that alerts us in real time, any time something goes wrong on our server infrastructure.

There is also the infamous 500 Internal server error which usually has a dramatic effect on the users who face it. Ask your sys admin to create an automatic report detailing how many times this error occurs on your service.

It is often triggered by programming mistakes which, if discovered, can easily be fixed.

As these errors happen on your server you can do two things to monitor them:

  • log them in log files
  • send them by email and/or SMS. Each time an error occurs you will receive an email notification so you can intervene in real time.

Go the extra mile

Install an infrastructure status system and make it public so that users can check it when something is not working. Make sure to announce on social networks when critical errors block access to your app and again when everything has been fixed and works as expected.

Here is an example we love:

basecamp_status