Measure Rendering Metrics and Maintain Seamless Visuals

Visual glitches frustrate users and put the reputation of your business at risk. When people interact with an app, they expect a seamless experience. But when frame rates drop, scrolling becomes jittery, or screens freeze, frustration sets in – causing users to abandon your app and take their business elsewhere. 

BugSnag from SmartBear empowers developers to create high-quality user experiences on their applications. Performance monitoring is a key part of this process.  That’s why we’re excited to share that BugSnag’s performance monitoring capability now allows you to track rendering metrics for your iOS, Android, and React Native applications. 

How it Works 

Using BugSnag’s performance monitoring feature, you can clearly see rendering issues related to slow and frozen frames in spans reported by the app and easily track the root cause.  

BugSnag automatically records the following rendering metrics while a span is active: 

• Rendered Frames – the number of frames that were rendered while the span was active 

• Slow Frames – the number of frames that missed their rendering deadline (e.g., 16ms at 60 FPS) 

• Frozen Frames – the number of frames that took greater than 700 ms to render 

With BugSnag, rendering metrics are only available for custom spans. Support for screen loads and other core metrics are coming soon. 

Rendering Metrics in Action 

Let’s look at a sample iOS application. For each custom span group, a user can see an aggregated metrics at a glance. This view shows the percentage of frozen frames (% of qualified spans where at least one frame render exceeded 700ms) and slow frames (% of qualified spans where ≥25% of frames missed the rendering deadline. 

Users can click into a span group and look at more granular data, including trends and the distribution of slow and frozen frames. You can then select a single span to see a full waterfall graph of its performance, including frozen frames and their duration. From here, you can discover what may have caused the slowdown and create a fix for future issues. Overall, monitoring your rendering metrics will allow you to consistently guarantee a smooth visual experience for your users.

Interested in learning more about error and performance monitoring? Check out our docs, and try BugSnag free for 14 days, no credit card required. As a note, rendering metrics is available on our Preferred plan and Enterprise plans.