Rethinking Frontend Monitoring
Apps—both running in your browser or device—are powering almost every business. Over the last few years, developers have largely adopted JavaScript, updated their legacy stacks with Single Page Applications (SPAs) and connected them to a set of serverless functions, microservices, CDNs and other third-party APIs. Besides, they’ve moved more code than ever to the customer browser to improve scalability.
Long gone are the days where frontends were connected to monolithic backends for mere display. They are now essential to delivering optimal user experience, which in turn became a business-critical concern for companies.
However, the increase in defects due to modern stack complexity, the lack of customer’s patience toward poor application performance and the constant pressure on teams to deliver richer interfaces faster, have created new problems to monitor.
Lay of the land
Traditional monitoring tools aren’t simply suited for the world of JavaScript browser-based apps. There are many of them out there, some are specialized, but they rarely solve for the frontend.
APM solutions do mainly care about issues on backends built with old server-side technologies. RUM measures performance metrics on availability from the client-side with poor support for SPA frameworks such as React, Vue or Angular. Exception trackers come in handy for capturing stacktraces but aren’t enough to reproduce tricky situations on the frontend. Session replay is useful to understand the user journey and visualize the steps that led to an issue, but the replay alone is rarely enough. Not to mention that these tools haven’t been built for developers, but rather for marketers and designers.
Taken separately, these tools don’t provide the full context to easily and quickly get to the root cause of problems. In other words, they fall short when it comes to helping frontend developers navigate through the complexity of their apps.
Frontend is the next frontier
Frontend is now at the heart of user experience. Churn, conversions, retention and reputation are significantly affected by bugs, slowness and crashes in your application. But due to the distributed nature of modern stacks, it’s become truly hard to understand bugs and deal with faulty performance.
Contrary to the backend, debugging frontend applications is a multidimensional problem. Code may run differently from one browser/device to another. Your app’s overall performance depends on many factors such as CDN, client device, bandwidth, third-party APIs, slow backend or CPU/memory load.
Frontend developers are in need of a holistic approach to monitor their single page applications. They require a unified platform that helps them make sense of complexity and fix issues as soon as they arise.
Frontend Application Monitoring (FAM)
This is why I started OpenReplay. I wanted to have flawless frontend monitoring. A tool that makes bug reproduction and performance tracking a breeze. Something that I wish had existed a decade ago when I was a frontend programmer.
We like to think of OpenReplay as a way to look over your user’ shoulder while having your browser inspector open. A tool that shows what users did and how the frontend reacted every step of the way. That ability to deeply understand problems—not just having clues—as if they happened on your local environment. To put it simply, OpenReplay is the place where frontend developers can easily reproduce bugs, track errors and improve their application’s performance.
Understand every issue
OpenReplay replays the video of a user session alongside all the technical details to quickly understand what went wrong. No more chasing users for screenshots and clues or going back-and-forth with QA. And by technical details we mean the full context of every session: network activity, resource loads, stacktraces, JS errors, console logs, store actions/state, page speed metrics like speed index and performance metrics such as memory usage or framerate.
We have support for GraphQL (Relay, Apollo) and for major state management libraries (Redux, VueX, MobX and NgRx). You can even plug your log management system through one of our several integrations and sync your backend logs with session replays.
Improve frontend performance
Performance issues are (1) tricky to debug and (2) rarely reported by users. If they’re not spotted by QA, they get out in the wild affecting your user experience and impacting your company’s bottom line.
These situations require more than basic resource timings, number of requests, JS errors or page loads. To better monitor performance, OpenReplay captures memory usage, framerate, network speed and computes advanced rendering metrics such as visually complete or time to interactive. The data feeds into our algorithms for analyzing and identifying problems. Sessions are then categorized by issue type (slow rendering, memory issues, crashes, slow animations, errors, slow backend) for easier triage of critical defects.
Our dashboard adds a visual element to performance monitoring and helps keep track of your application’s metrics over time. Widgets are predefined and don’t require any particular configuration, making insights easy to share across teams.
Feel your customer’s frustrations
Identifying bugs and faulty performance is one thing. Feeling your users’ frustrations is another one. Session replay lets you see your application through your users’ eyes. It shows you where they struggle, pinpoints their hesitation and helps you fine-tune every detail for an ideal digital experience. All user and stack events are indexed, making it easy to search for specific behavior, analyze complex flows and gauge the impact of defects on your business.
What’s next
Modern single page applications have offered the possibility to developers to build rich interfaces, that are both visually appealing and performant. But the existing tools haven’t coped with the increase in complexity and left a pretty large blind spot in application monitoring.
OpenReplay is rethinking frontend observability. We believe we’re on a good path toward a solution but the road is long. We’re putting more effort into building better algorithms that surface critical issues, smart alerting, more integrations to encourage collaboration among teams and support for automated tests.
We’re on an exciting journey to help frontend developers ship better software. Come talk to us if our mission resonates with you.
