Rethinking Front-end Error Reporting

1,343
LogRocket
Record and Replay for Redux apps

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
Record and Replay for Redux apps
Tools mentioned in article
Open jobs at LogRocket
Developer Advocate
Boston, MA
Get in on the ground floor at one of Boston's top startups and help solve a huge challenge for developers: understanding customer experience. We're looking for a highly motivated technologist to join our team as a Developer Advocate and help grow the LogRocket brand. Our Developer Advocate will continue to foster LogRocket's relationships within the web development community, keeping tabs on what product teams need to improve customer experiences. Additionally, the Developer Advocate will help users understand LogRocket’s benefits and value proposition. As a Developer Advocate, you will be speaking for LogRocket, so it’s essential that you create and cultivate LogRocket's voice through all of your outbound interactions. You should be excited about talking to frontend engineers all day with the aim of creating and empowering a strong LogRocket community. 
  • Grow online communities: social/Dev.to/Reddit/etc.
  • Product marketing: Address common user questions with website copy, docs, and blog posts
  • Team activation: Help activate and educate high-value teams and identify potential case studies and customer references
  • Content: Working with our Content Director, you’ll contribute regularly to our editorial calendar. Topics will have a broad scope, from educational content creation (resources, tutorial), to thought leadership and some product marketing
  • Over time, help build out our developer advocate team by training and mentoring new LogRocket team members

  • Engineering background and ability to get into the nitty gritty of frontend engineering
  • Strong technical writing skills
  • Ability to move fluidly between strategy and execution
  • Experience creating and distributing content across multiple platforms
  • Excellent communicator, natural bridge-builder and conflict defuser
  • Self-motivated and organized, ability to work independently
  • Competitive salary and equity package
  • Health, dental, and vision plans
  • Unlimited vacation time and generous holiday breaks
  • Culture of learning and development
  • 401k and commuter benefits
  • Catered lunch
  • Senior Engineer - Mobile
    Boston, MA
    Get in on the ground floor at one of Boston's top startups and help us solve a huge challenge for developers and product teams - understanding customer 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 customers (such as Reddit, Bloomberg and NBC) and recently raised a $15M Series B to continue building a world-class product and team. We’re looking for an experienced developer to join our team as the first Senior Mobile Engineer. This person will play a critical role in leading our mobile initiatives and expanding LogRocket's services to the mobile developer market. As the Senior Mobile Engineer, your extensive engineering background and knowledge will prove to be vital for delivering our first-of-its-kind mobile product to LogRocket customers. If you love building tools for other developers and solving exciting challenges, let’s talk!
  • Lead all initiatives related to native mobile support
  • Own the development, launch, and support of new mobile features
  • Monitor early adoption and leverage user feedback to make improvements
  • Work directly with customers and internal stakeholders to troubleshoot complex issues
  • Identify opportunities to increase adoption of LogRocket's mobile solution
  • You’re passionate about developer tools, with an extensive engineering background
  • Experience designing, building, testing, and delivering in agile environment
  • Deep knowledge of mobile frameworks at the OS level (iOS and Android)
  • Familiar with latest mobile application trends and technologies
  • Strong collaboration and communication skills
  • You get excited about low-level performance tuning and optimizing bandwidth usage
  • You're interested in compilers
  • You have a history of working with applications focused on security and privacy
  • Catered lunch throughout the week and a fully stocked kitchen with all your favorite snacks (healthy AND non-healthy)
  • Open vacation policy - we all work hard and take time for ourselves when we need it, no strings attached
  • Extensive Health, Dental, Vision benefits paid for by us, along with 401k and Commuter benefits
  • Generous stock options - we all get to own a piece of what we’re building
  • Regular team outings and activities (craft nights, boat cruises, excursions out of the city, and many more!)
  • Flexible working hours and location
  • Ample opportunities to learn and take on new responsibilities in a fast-paced, growth-mode startup
  • Rust Software Engineer
    Boston, MA
    Rust Software Engineer Get in on the ground floor at one of Boston's top startups and help us solve a huge challenge for developers and product teams - understanding customer 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 customers (such as Reddit, Bloomberg and NBC) and recently raised our Series B to continue building a world-class product and team. About the Role We’re looking for an experienced software engineer to lead LogRocket's expansion to the mobile developer market. You will be working on our SDK that provides LogRocket's monitoring and session replay functionality to native iOS and Android apps, working closely with business and technical leadership to bring this new product to market. We chose Rust to power our SDKs for its performance, portability, and ease-of-use. It also helps that it’s just plain fun to work with :)
  • Lead all initiatives (development, launch and support) related to our native mobile SDKs
  • Monitor early adoption and leverage user feedback to make improvements
  • Work directly with customers and internal stakeholders to troubleshoot complex issues
  • Identify opportunities to increase adoption of LogRocket's mobile solution
  • You get excited about low-level performance tuning and optimizing bandwidth usage
  • Experience designing, building, testing, and delivering in agile environment
  • Ability and interest to write production-quality Rust code (or strong desire to learn Rust)
  • Strong collaboration and communication skills
  • Experience building native iOS and/or Android SDKs
  • You have a history of working with applications focused on security and privacy
  • Catered lunch throughout the week and a fully stocked kitchen with all your favorite snacks (healthy AND non-healthy)
  • Open vacation policy - we all work hard and take time for ourselves when we need it, no strings attached
  • Extensive Health, Dental, Vision benefits paid for by us, along with 401k and Commuter benefits
  • Generous stock options - we all get to own a piece of what we’re building
  • Regular team outings and activities (craft nights, boat cruises, excursions out of the city, and many more!)
  • Flexible working hours and location
  • Ample opportunities to learn and take on new responsibilities in a fast-paced, growth-mode startup
  • Site Reliability Engineer
    Boston, MA
    Site Reliability Engineer LogRocket's mission is to help engineering and product teams create excellent experiences for their customers. By recording videos of user session, along with logs and network data, LogRocket intelligently highlights UX issues and surfaces the root cause of every bug. In this role, you'll build and maintain the tooling and infrastructure that allows LogRocket and our customers to deploy, scale, and monitor a high-throughput event processing system. You will handle on-call events, help with issue resolution, own post-mortems, and advocate for changes to improve the stability and security of the platform. For customers with on-premise hosting, you will be a technical resource to help them effectively run LogRocket in uniquely constrained environments across a variety of cloud offerings. We recently raised a $15M Series B and are currently doubling in usage every few weeks. It's a great time to join!
  • Work with members of the engineering team to identify and resolve spikes in processing latency in our ingestion worker pool
  • Help build tools to streamline the onboarding and release process for customers using LogRocket's On-Premise offering
  • Collaborate with our sales engineers to set up a customer’s LogRocket installation in a completely air-gapped environment
  • Overhaul a fleet of nginx load-balancers handling 100s of thousands of requests per second without incurring downtime
  • Automate database scaling to improve operating cost while maintaining the ability to respond to traffic spikes
  • Familiarity with the state of the art in cloud technologies, including common providers, specific tools of the trade, and their strengths and weaknesses
  • Experience operating applications and databases with demanding scalability or availability requirements
  • Proven expertise in modern container orchestration practices (we use Kubernetes on GKE)
  • A strong understanding of the performance, architecture, tooling, and cost of cloud systems
  • A security focused mindset with a solid understanding of incident response and risk mitigation
  • A strong collaborator who is transparent about progress on tasks, seeks feedback early and often, works effectively with the team and customers
  • Catered lunch throughout the week and a fully stocked kitchen with all your favorite snacks (healthy AND non-healthy)
  • Open vacation policy - we all work hard and take time for ourselves when we need it, no strings attached
  • Extensive Health, Dental, Vision benefits paid for by us, along with 401k and Commuter benefits
  • Generous stock options - we all get to own a piece of what we’re building
  • Regular team outings and activities (craft nights, boat cruises, excursions out of the city, and many more!)
  • Flexible working hours and location
  • Ample opportunities to learn and take on new responsibilities in a fast-paced, growth-mode startup
  • Verified by
    You may also like