2

Tracking errors and 404 pages

There are lots of things to focus on when you're trying to improve the user flow and experience in your website or app but one of the easiest things you can do is fix the parts where it's breaking or throwing errors when your customers use it.

That makes sense, nobody wants a broken website or app but tracking these errors isn't something that occurs out of the box with most analytics tools, including Segment's analytics libraries.

Luckily, they are flexible enough that tracking these sorts of errors is pretty simple and I'll discuss how to do this for various situations and platforms below. 

404 Errors

404 errors are such low hanging fruit, it's pretty trivial to get meaningful insights into where customers are getting 404's with Segment's .page() method. When called from one of our client-side libraries, you get the current url and the referrer for free so you'll know where broken links are coming from. Whether internal or external links, this is super helpful for cleaning up a site that has gone through a couple iterations. Simply put a .page() call on your 404 pages like so and you'll be able to identify and fix what's causing your 404's.

analytics.page('404 Error');

This can then be viewed in any analytics tool that Segment integrates with or in the raw logs.

It's also good practice to customize your 404 errors a little bit, check out our 404 page for an idea of what you can do rather than the default error page you see everywhere.

Javascript Errors

We like to think of tracking Javascript errors as continuous QA. These are errors that the browser encounters while executing your code, regardless of whether that's a namespacing issue, browser incompatability, errors within your code or anything else that can happen in the wild-west of the browser. Sometimes a bug slips through during development or you intentionally didn't support legacy browsers, tracking these errors is a great way to measure just how much they are affecting your customer experience and can help in prioritizing bug squashes.

We partner with many Javascript error tracking tools that you can get running on your website without any additional coding needed, check out our list of partners who can help you with this here. We generally recommend using one of these tools to handle this for you because many of these errors are unexpected but if you want to track them separately, we'd recommend using a custom .track() event in the error handlers in your client side code or attached to the global .onerror event.

 Here's an example function you could insert into your code with a try/catch statement.

var errorTracker = function(continue) {
  try {
    continue();
  } catch (err) {
    analytics.track('Javascript Error', {
      error: err
    });
  }
};

We'd recommend being smarter about the properties you're passing through on this error event, i.e. breaking them out and only sending what you need.

Server-side Errors

Tracking errors on your servers is super helpful, if only because it sometimes helps diagnose site-wide errors that can seem unrelated without the server-side context. We find it helpful to put custom .track() events with one of our server-side libraries in your error handlers with context about where the error is occurring. Using the same type of tracker as the try/catch on the server side is even more performant as the events are queued and are batched in the background.