OpenReplay
Navigate back to the homepage
BLOG
Browse Repo
Back

Introducing OpenReplay Metrics

Mehdi Osman
October 30th, 2020 · 2 min read

Frontends make or break digital experiences. Think about it, web applications that we fall in love with are reliable and user-friendly, but even more, they are consistently fast. So how can you find out how your application is behaving in real-world conditions, and resolve any performance bottlenecks that are impacting customer experience?

This is what motivated us to build OpenReplay Metrics, our new monitoring offering that helps developers raise the bar and ship frontends that are performant, not just operational.

Developers: Make and prove improvement

OpenReplay Metrics provides a ready-to-use dashboard with over 40 widgets (such as rendering times, CPU usage, memory consumption, framerate and crashes) that help frontend developers keep an eye on their application’s performance and make sense of what impacted their users.

Metrics Overview

All these metrics come with several filters allowing you to quickly drill-down on key issues and compare performance across different releases, countries, browsers, devices or user cohorts (“paid” vs “free”). This makes it easy to track code changes and prove improvements.

Metrics Comparison

Developers can also define alerts on select metrics and be notified on slack, email or webhooks whenever their criterias are met. This way, critical slowdowns, introduced for example by a new release, can be quickly spotted before hitting more users.

Alerts

Rich-critical Context

Without proper context, problems become tricky to solve and developers would hardly know which ones to prioritize. How can we know which issues are to be addressed immediately if we cannot assess their impacts on users?

OpenReplay session replay provides that full context so you instantly know where the problem is and go fix it. It is like looking over you user’ shoulder while having your browser’s inspector open. It lets developers reproduce issues, replicate crashes and errors. But most importantly, it’s their direct line to customer experience, helping them feel painful experiences, see where users struggle and how it affects their behavior.

In addition to logging network requests, javascript errors, console and application state, OpenReplay tracks things such as long tasks, CPU load, framerate, memory usage and nodes count. These metrics are synced with each replay so you can analyze performance over the session’s duration, and understand what happened before, during and after an issue occurred.

By pointing out every facet of your web app, from user action to little technical clues, OpenReplay lets developers instantly know the root cause of every issue in their web app, bringing down TTR from days to minutes.

How can I set this up?

If you’re using our npm, then simply update the package to benefit from the latest fixes and features, including metrics. Otherwise, if you’re running on OpenReplay snippet (or GTM or Segment) then there’s nothing to do, it’s all there already.

One more thing, OpenReplay metrics doesn’t incur extra cost. It’s available in all plans, including the free tier.

Frontend Application Monitoring

A broken experience is not always due to an error or a crash, but may be the consequence of a bug or a slowdown that went unnoticed. Did my last release introduce that? Is it coming from the backend or the frontend? OpenReplay helps answer those questions and figure out what part of your code requires fixing or optimization. Because inconsistent performance simply drives customers away, causing retention and revenues to drop.

As we embrace agility, we push code more frequently than ever, and despite our best testing efforts, our code may end up breaking for a variety of reasons. Besides, frontend is different. It runs on different browsers, relies on complex JS frameworks, involves multiple CDN layers, gets affected by 3rd-party APIs, faulty internet connections, not-so-powerful devices and slow backends. In fact, frontend requires better visibility, and OpenReplay provides just that.

Your frontend is your business. It’s what people touch and feel. Let’s make it fast, reliable and delightful!

Start monitoring your web app for free.

More articles from OpenReplay Blog

Polling in React using the useInterval Custom Hook

UseInterval is a custom Hook on React that makes intervals simpler in your web app.

October 9th, 2020 · 6 min read

Developing React JS Global State Library With Atom Abstraction

In line with Recoil, Atom Abstraction eliminates selector functions for render optimization and makes API pretty intuitive.

October 5th, 2020 · 3 min read
© 2021 OpenReplay Blog
Link to $https://twitter.com/OpenReplayHQLink to $https://github.com/openreplay/openreplayLink to $https://www.linkedin.com/company/18257552