Rethinking Front-end Error Reporting

1,951
LogRocket
Modern Frontend Monitoring and Product Analytics

Understanding problems in web apps is hard. Between mysterious JavaScript errors, user-reported bugs, and issues caught in QA, there’s a constant struggle to get ahead of the problems affecting your users. And these are just the obvious issues — most bugs are never actually reported since users who have a bad experience just leave or suffer in silence.

Traditional error-reporting tools (like BugSnag, Sentry, and Rollbar) only solve part of the problem. Originally designed for logging server-side errors, they later added browser SDKs as front-end applications grew more complex. While these tools capture some useful information like stack traces and metadata, many teams find that their alerting is too noisy (too many false positives to be useful), and that they don’t capture enough context to elucidate complicated issues.

Front-end is different

Investigating front-end and backend errors are very different processes. Server-side code runs on a single platform. Often, the only state in the system that can cause hard-to-reproduce errors comes from easily logged events like database or cache queries. When an unhandled exception in server code takes place, it usually means there is a clear-cut problem that needs to be fixed.

On the front-end, things aren’t so simple. The average web application runs in over 15 different browsers, across hundreds of device types. State can be highly complex, coming from memory, local storage, local databases, service workers, and APIs. A web app must be robust to connectivity issues and cross-browser differences, and unlike the backend where exceptions are usually clear-cut, it can be tricky to gauge the impact on the frontend.

Given the frequency and diversity of errors that front-end developers see, the most important question becomes, did this affect the user? Unfortunately, looking at just a stack trace and an exception message, it’s very difficult to know. Is this a P0 crippling bug? Or maybe just a nuisance.

Answering the right questions

You never quite know how things will break. (credit: xkcd.com)

Two years ago, we started thinking about what the perfect front-end bug report would look like. Clearly, it would collect basic information like a stack trace, metadata, and frequency histograms. But to really gauge the impact on the user, especially for hard-to-reproduce bugs, it has to let you actually see what happened.

LogRocket is our audacious attempt at doing just that — reproducing an issue as if it happened in your own browser.

It’s all in the video

At the center of a LogRocket error report is a pixel-perfect video that accurately captures what the user saw on screen. In order to do this without any performance impact, LogRocket instruments the DOM to record the HTML and CSS on the page at the time of the issue.

In addition, LogRocket records console logs, JavaScript errors, stacktraces, network requests/responses with headers + bodies, browser metadata, and custom logs. It also has deep integrations with libraries like React, Redux, and Angular to log actions and application state.

Watching the video is the fastest way to quickly know if an exception actually affected the user. And if it did, you can easily figure out what happened by reviewing network requests, logs, and application state.

User-reported bugs

When users ask for help, whether through a help desk, email, or worst of all, on Twitter — it is crucial that support and developers can quickly understand what went wrong. Unfortunately this typically means asking the user for screenshots, logs, and steps to reproduce.

With LogRocket, you can just search for a user and replay sessions where they encountered issues or asked for support. We’ve built integrations with most help desks like Intercom to let you view the user’s history directly from a chat.

Sometimes, it’s unclear if a user is just confused, or actually experiencing a bug. By reviewing the video replay, console and network logs from their session, you can easily make this distinction.

Most bugs aren’t explicit exceptions

While monitoring and fixing JavaScript exceptions is crucial to application health, the reality is that the majority of problems users experience aren’t explicit code errors and aren’t ever reported. UI glitches, slow performance, broken interfaces, and even confusing UX all negatively affect user happiness and your bottom line.

If front-end teams want to be able to ship new features quickly, they must have confidence that these issues are being proactively detected and surfaced.

Furthermore, issues of any type must be trustworthy — if there are too many false positives, alerts will simply be ignored.

Our mission: Surface all front-end problems that negatively affect users

JavaScript exceptions are just the first type of “issue” that we’ve started surfacing in LogRocket. The telemetry we’re collecting on the front-end lets us detect performance issues, broken interfaces, confusing UX, and more. We’ve started working with a select group of our customers like Reddit, Twitch, and AOL to surface these issues and will be rolling out to more customers in the next few months.

If you’re an existing LogRocket customer or want to start working with us, get in touch and you can join the beta.

Front-end is the future

The shift toward rich single page apps has undoubtedly improved both user experience quality and developer productivity. But with greater complexity comes the need for more observability. Existing tooling is not yet sufficient for teams to have confidence in the front-end code they ship.

At LogRocket, we’ve taken what we believe is a big step toward a solution — but there’s lots more work to do. If you want to help define the next generation of tooling for front-end developers, we’d love to meet you. We’re hiring 🙂

LogRocket
Modern Frontend Monitoring and Product Analytics
Tools mentioned in article
Open jobs at LogRocket
Sales Engineer
Boston, MA or - US
About LogRocket Founded in 2016, LogRocket's goal is to make every experience on the web as perfect as possible. We're solving a huge challenge for product managers and developers - understanding the user experience. LogRocket is the first system that gives these teams complete visibility into their customer's experience using their web apps - through pixel-perfect replays of user sessions and clear insight into logs, errors, and network activity.  We've already attracted an elite roster of over 2,800 customers including ClassPass, Capital One, Cisco, and Rippling, just to name a few. Our focus is on building software with care and craftsmanship and our engineering blog posts offer a taste of that. Backed by top investors such as Matrix Partners, Battery Ventures, and Delta-V Capital, we've raised $55M in funding and we're eager to bring talented people onboard to support our growth. We're on a mission to improve society's experience with software and that's where you come in. <li>Assist&nbsp;Sales and Customer Success team with initial discovery calls and customer on-boarding</li><li>Work closely with prospective customers to clearly communicate and demonstrate LogRocket's value proposition</li><li>Answer&nbsp;technical questions for prospective and current customers</li><li>Identify&nbsp;customer pain points and position LogRocket as a solution</li><li>Become an expert in LogRocket's product and technology stack</li><li>Lead On-Premise installations</li><div><br></div> <li>3+ years of Sales Engineer experience</li><li>Familiar with React, Redux, Angular, or other modern front-end frameworks</li><li>Experience&nbsp;with AWS or other cloud providers, preferred</li><li>Strong communication&nbsp;and customer service skills</li><li>Experience problem solving and troubleshooting in a fast-paced environment</li><div><br></div> <li>Extensive health, dental, and vision benefits</li><li>Open vacation policy - we all work hard and take time for ourselves when we need it, no strings attached</li><li>Three months of fully-paid parental leave to any employee welcoming a child into their home</li><li>401k and commuter benefits</li><li>Generous stock options - we all get to own a piece of what we’re building</li><li>Regular team outings and activities</li><li>Flexible working hours and location</li><li>Monthly employee gifts</li><li>For those in office, catered lunches throughout the week and a fully stocked kitchen with all your favorite snacks (healthy & non-healthy)</li>
Customer Solutions Engineer
- US
About the Role LogRocket is seeking a motivated individual to join our team as a Customer Solutions Engineer. As a key member of the Customer Solutions team, your primary focus will be serving as a technical resource for our Customer Success, Support, and Sales departments. Your responsibilities will include leading troubleshooting efforts as well as conducting training and Q&A sessions with customers and prospects. Your expertise in frontend web development and deep understanding of the LogRocket product will be paramount in sharing best practices and providing solutions to customer challenges. Ensuring successful LogRocket implementation and supporting our user base will be an integral part of the Customer Solutions Engineer role. In this role you’ll use your unique viewpoint, sitting between our customers and the LogRocket product, to share feedback with Engineering and Product to improve LogRocket and optimize our internal processes. <li>Frontend web developer, either in your past life or currently</li><li>You love engaging with customers, building relationships, and helping others&nbsp;</li><li>A self-starter, driven by a passion for continuous learning and innovation</li><li>Team player, adept at collaborating with diverse groups</li><li>A problem-solving mindset, thriving in fast-paced environments</li><li>Superb organizational skills, ensuring professionalism and efficiency in customer interactions</li><li>Strong communicator who isn’t afraid to ask questions</li> <li>3-5 years of customer-facing experience in the B2B SaaS space, preferably with APM tools</li><li>1-2 years of frontend web development experience, plus a strong understanding of modern web technologies</li><li>Experience troubleshooting technical customer issues and delivering solutions</li><li>Demonstrated success collaborating with technical teams across diverse geographies and functions</li><li>Exceptional organizational skills, adept at managing multiple tasks across departments</li><li>Outstanding communication abilities, both written and verbal</li><li>Ability to work East Coast business hours</li> <li>Extensive health, dental, and vision benefits</li><li>Open vacation policy - we all work hard and take time for ourselves when we need it, no strings attached</li><li>Three months of fully-paid parental leave to any employee welcoming a child into their home</li><li>401k and commuter benefits</li><li>Generous stock options - we all get to own a piece of what we’re building</li><li>Regular team outings and activities</li><li>Flexible working hours and location</li><li>Monthly employee gifts</li><li>For those in office, catered lunches throughout the week and a fully stocked kitchen with all your favorite snacks (healthy & non-healthy)</li>
Lead Software Engineer
Boston, MA or - US
About LogRocket Founded in 2016, LogRocket's goal is to make every experience on the web as perfect as possible. We're solving a huge challenge for product managers and developers - understanding the user experience. LogRocket is the first system that gives these teams complete visibility into their customer's experience using their web apps - through pixel-perfect replays of user sessions and clear insight into logs, errors, and network activity.  We've already attracted an elite roster of over 2,800 customers including ClassPass, Capital One, Cisco, and Rippling, just to name a few. Our focus is on building software with care and craftsmanship and our engineering blog posts offer a taste of that. Backed by top investors such as Matrix Partners, Battery Ventures, and Delta-V Capital, we've raised $55M in funding and we're eager to bring talented people onboard to support our growth. We're on a mission to improve society's experience with software and that's where you come in. <li>Design a system to automatically detect the most common user paths across millions of events</li><li>Implement a search backend that allows users to search in real time across billions of log entries</li><li>Build a machine learning pipeline that automatically detects bugs in our users' apps</li><li>Automate database scaling to improve operating cost while maintaining the ability to respond to traffic spikes</li><li>Build a system that automatically recommends integrations for customers based on their toolset</li> <li><b>If you don’t meet all of these, we still encourage you to apply. We believe that code is code, regardless of language, and learning different tools is part of joining a new company</b></li><li>7+ years of experience in a full stack or backend development role, preferably with a SaaS company</li><li>Experience with state of the art cloud technologies, including architectural principles, specific tools of the trade, and their strengths and weaknesses</li><li>Hands-on experience building and redesigning highly available distributed systems</li><li>Familiarity with modern Javascript-based applications and frameworks</li><li>Experience in development environments with demanding scalability or availability requirements</li><li>A strong collaborator who is transparent about progress on tasks, seeks feedback early and often, works effectively with the team to deliver on engineering estimates </li><li>Proven success collaborating with leadership and cross-functionally teams to refine projects, plan and deliver high-quality work that aligns with our product roadmap and strategy </li><li>Acts as a mentor to junior engineers and provides coaching to upskill other team members </li><div><br></div> <li>Extensive health, dental, and vision benefits</li><li>Open vacation policy - we all work hard and take time for ourselves when we need it, no strings attached</li><li>Three months of fully-paid parental leave to any employee welcoming a child into their home</li><li>401k and commuter benefits</li><li>Generous stock options - we all get to own a piece of what we’re building</li><li>Regular team outings and activities</li><li>Flexible working hours and location</li><li>Monthly employee gifts</li><li>For those in office, catered lunches throughout the week and a fully stocked kitchen with all your favorite snacks (healthy & non-healthy)</li>
Senior Software Engineer
Boston, MA
About LogRocket Founded in 2016, LogRocket's goal is to make every experience on the web as perfect as possible. We're solving a huge challenge for product managers and developers - understanding the user experience. LogRocket is the first system that gives these teams complete visibility into their customer's experience using their web apps - through pixel-perfect replays of user sessions and clear insight into logs, errors, and network activity.  We've already attracted an elite roster of over 2,800 customers including ClassPass, Capital One, Cisco, and Rippling, just to name a few. Our focus is on building software with care and craftsmanship and our engineering blog posts offer a taste of that. Backed by top investors such as Matrix Partners, Battery Ventures, and Delta-V Capital, we've raised $55M in funding and we're eager to bring talented people onboard to support our growth. We're on a mission to improve society's experience with software and that's where you come in. <li>Design a system to automatically detect the most common user paths across millions of events</li><li>Implement a search backend that allows users to search in real time across billions of log entries</li><li>Build a machine learning pipeline that automatically detects bugs in our users' apps</li><li>Automate database scaling to improve operating cost while maintaining the ability to respond to traffic spikes</li><li>Build a system that automatically recommends integrations for customers based on their toolset</li> <li><b>If you don’t meet all of these, we still encourage you to apply. We believe that code is code, regardless of language, and learning different tools is part of joining a new company.</b></li><li>Familiarity with the state of the art in cloud technologies, including architectural principles, specific tools of the trade, and their strengths and weaknesses</li><li>Some experience in development environments with demanding scalability or availability requirements</li><li>Familiarity with modern Javascript-based applications and frameworks</li><li>A strong collaborator who is transparent about progress on tasks, seeks feedback early and often, works effectively with the team</li><li>A motivated worker who delivers on engineering estimates</li><li>At least one previous full-time software engineering role</li> <li>Extensive health, dental, and vision benefits</li><li>Open vacation policy - we all work hard and take time for ourselves when we need it, no strings attached</li><li>Three months of fully-paid parental leave to any employee welcoming a child into their home</li><li>401k and commuter benefits</li><li>Generous stock options - we all get to own a piece of what we’re building</li><li>Regular team outings and activities</li><li>Flexible working hours and location</li><li>Monthly employee gifts</li><li>For those in office, catered lunches throughout the week and a fully stocked kitchen with all your favorite snacks (healthy & non-healthy)</li>
Verified by
You may also like