Error Tracking - Top Suggestions and Tools
The key to success in life is learning from your mistakes. The same can be said for web development. Error tracking is a vital component to any web project because it helps you pinpoint performance problems before they get out of hand. Let's take a look at some of the best error monitoring tools and strategies for 2018.
What is error tracking?
Ideally, you want to identify bugs in your web application before users encounter them. First impressions are everything, and being greeted with an error message is a surefire way to scare off new visitors. Even worse, those users probably won't take the time to tell you that your app crashed on them. Worse still, they could start spreading the word on Twitter. Error tracking is the process of proactively identifying issues and fixing them as quickly as possible.
Error monitoring can get increasingly complicated as you deal with bugs reported by users and your production team, which is why having an efficient error tracking workflow from the beginning is so important.
How is error tracking useful?
As with any situation in life, it's easier to address small problems as soon as possible so that they don't become bigger problems. Thus, implementing error tracking from the very beginning of the development cycle will save your team a lot of time and headaches.
Backend error tracking
Backend, or server side, errors include things like page exceptions and JavaScript errors. Not all backend errors affect the user experience, but keeping track of them can prove helpful when tuning your app. The Google DevTools console can give you real-time feedback to help you trace the source of errors, and you can set handlers to automate exception data collection.
Keep in mind that not all code errors are noticeable to users. No matter which tools you use to track exceptions, the most challenging part of error monitoring is filtering out all the "noise" so that you can focus on the real problems. That's why human testers will always be necessary.
Frontend error tracking
Older error monitoring tools were primarily focused on backend errors. Backend error tracking is relatively straightforward since all server side code runs in the same place. Monitoring errors on the frontend requires a bit more work because frontend performance is highly dependant on the user's hardware, software and connection. You need to make sure that your website or app runs smoothly in over a dozen web browsers and hundreds of different devices, which is no easy feat.
Frontend errors include UI glitches, slow performance and broken interfaces. In addition to collecting data, you must understand exactly how errors impact the user experience. That's where reproducing bugs comes in.
Reproducing bugs
Reproducing bugs in web development means seeing errors for yourself by recreating the conditions under which they occur. "If you can't reproduce a bug, then you can't fix it," is a popular saying within web development circles.
Every website or app should provide a way for users to report bugs. For instance, that's why here at KeyCDN we offer a bounty program for users that find security bugs within our application.
Of course, there are also times when the problem lies not with your application but with the user's connection or network configuration. Fortunately, certain error tracking solutions allow you to record and replay user sessions so that you can see for yourself exactly what the user experienced.
Helpful error tracking tools
You'll find no shortage of error monitoring tools available online, but they offer varying amounts of insight. When debugging applications and tracking errors there are 2 main methods you can use. The first method is to use an automated solution. These track errors, alert you when an error occurs, and provide insights into how to replicate/resolve the issue.
The other method is manual debugging/error tracking where you can use a tool or service. These provide you with the ability to capture errors manually annotate them, and then ultimately send them to your development team. Using both automated and manual tools is recommended in order to ensure errors are kept at a minimum.
That being said, here are some of the best tools for tracking web application errors in 2018
Automated testing
1. Raygun
Raygun offers 3 separate services which can all be used simultaneously to keep a better eye on any website errors. This includes their crash reporting, real user monitoring, and APM solutions. With crash reporting, you'll be notified of any errors or crashes that occur. Their RUM product provides insight into performance bottlenecks, and how to improve them. While lastly, APM allows you to gather data on server side bottlenecks.
2. Rollbar
Rollbar is a full stack error tracking solutions. It captures any uncaught errors, report errors, and log messages. You can also monitor errors in real-time, get instant alerts, and review detailed error data in order to reproduce, and quickly fix the errors. Rollbar also has an extremely extensive list of languages it supports including: JavaScript, Angular, Node.js, Python, Ruby, Django, PHP, Clojure, .NET, Android, iOS, Haskell, Drupal, Rails and many more.
3. Sentry
Sentry is a bit different from the other error tracking tools in that it is open source. If you are a hobbyist you can use Sentry completely free. However as your project or business grows you'll need to purchase a paid plan. Sentry's dashboard provides you with a ton of useful information such as the stack trace, with source map support, and every URL's parameters and session information. You can also see the impact of each release to see where bugs are happening as well as provide users an easy way to report bugs.
4. LogRocket
LogRocket is a little bit different from the others. When LogRocket detects a bug, it automatically creates a video capturing exactly what users see on their screens. It also keeps track of JavaScript errors, browser metadata, console logs, stack traces, network requests and much more. That way, you can immediately reproduce errors to see if they affect the user, and you can determine how they happened by reviewing the logs. You can also integrate LogRocket with Redux, React, Angular and other libraries for more robust error monitoring.
Manual testing
5. Usersnap
Usersnap offers great compatibility with tools like Slack, Intercom, WordPress, Evernote and Drupal just to name a few. Thanks to JavaScript embedding, Usersnap even provides reports for client side errors. A handy floating widget makes it easy to add annotations on any web page. If you have a QA team, Usersnap is a great way to streamline the communication between them and the developers.
6. Marker
Marker integrates with collaboration tools like Trello and Slack to facilitate teamwork. When bugs occur, Marker sends a screenshot to everyone along with details about the user. Unfortunately, Marker is currently only available as an extension for Chrome, but the developers are working on further integration for WordPress.
7. DebugMe
The DebugMe extension is compatible with most web browsers including Chrome, Safari, Internet Explorer, Microsoft Edge and Opera. It allows team members to painlessly make annotations and share errors with each other. You can also embed code in your application's meta tags for built-in error tracking, and you may provide visitors an avenue to give feedback.
8. zipBoard
Enter your URL into zipBoard for a nice visual representation of your errors along with information to help you fix them. The built-in task manager lets you turn annotations into tasks and assign them to your teammates. Best of all, you can try the full version of zipBoard at absolutely no cost for your first project. If you choose to upgrade, you can add as many users as you please at no additional charge.
Establishing an error tracking workflow
There are four major approaches to error tracking. A comprehensive bug testing strategy should incorporate them all:
1. Automated testing
As early as possible during the development process, you should take advantage of a testing suite to automate the error tracking process. These programs help you set up test cases simulating actions users may take under various circumstances.
2. Manual testing
Sometimes a human eye is necessary to catch bugs, which is why large development teams employ human testers who spend hours manually testing software as it's being built. If you can't afford a team of dedicated testers, then the developers will have to perform double duty. BrowserStack and Usersnap are ideal tools for manual error tracking because they both run on the majority of operating systems and browsers. More traffic is coming from smart devices every year, so don't neglect mobile testing!
3. Crowdsourcing
Thanks to the rapid expansion of the web in recent years, crowdsourcing has become a popular solution for everything. Crowdsourcing in this context doesn't just mean giving users a way to report bugs. Services like Testbirds and Applause recruit users from all over the world to test software projects during their own time.
Some services charge a flat fee per project while others charge per bug found, which is good motivation for developers to not make mistakes. Testbirds offers video game testing and has a large presence in multiple countries, so it's ideal for developers who are trying to reach a global audience. Applause even provides testing for wearables and smart cards. While the idea of crowdsourcing error tracking is still catching on, you can expect to see more services like these popping up.
4. User reporting
Some users will certainly let you know if your app crashes on them, but few will actually provide enough information to help you fix it. That's why you must to make sure to ask users the right questions when they report a bug. Fortunately, error trackers like Jira Service Desk provide an easy way to set up templates for users to fill out when they encounter errors, and many of the tools mentioned above record information about the user's session.
Summary
The best error tracking software for your project depends on your team's size, budget and technical needs. Whether you're big or small, if you want to keep your visitors happy, you'll need to employ a combination of tools and strategies to efficiently catch bugs before they do.