Navigate back to the homepage
BLOG
Try NowLogin
Back

Introducing Asayer 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 Asayer 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

Asayer 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?

Asayer 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, Asayer 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, Asayer 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 Asayer snippet (or GTM or Segment) then there’s nothing to do, it’s all there already.

One more thing, Asayer 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? Asayer 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 Asayer 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 Asayer 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
© 2020 Asayer Blog
Link to $https://twitter.com/asayerioLink to $https://github.com/asayerioLink to $https://www.linkedin.com/company/18257552