Updated Performance Metrics design

Performance Detail Page updates

We’re excited to release an updated version of the Performance Metrics design.

When you first visit Performance Metrics for your app, you’ll notice that we’ve added 95th percentile data to the table, as well as changing the Impact visualization to a bar. Both will give you a clearer indication of which endpoints or routes may be the cause of slow performance for your users.

Performance Detail Page updates

Diving deeper into a specific route or endpoint, the breakdown now shows more of the trace name and includes a timeline in the top to give a better overview of when particular traces ran. You’ll see how much time is spent in the database, if your external calls are slow, when the cache is in play, and when your app is rendering templates.

We’ve also updated the Distribution Graph to make it more clear which bucket you’re seeing traces from.

Once you have discovered that slow transaction, open it to reveal a new stacktrace design. You’ll see who authored the code, when it was committed, and which release it was a part of. Make sure you set up Git integration to get this information in your stacktraces.

Performance Detail Page updates

As part of this change, we’ve rewritten the Performance pages in React. Besides a considerable speed bump, this gives us much more flexibility when developing new features. Expect more exciting updates in the coming weeks!

These design updates will initially support Node.js and AngularJS only. As always, we’re incredibly excited to hear what you think of the changes, so hit the chat-button in the lower right corner to get in touch.

About the author
Mark Jensen is a product designer and code enthusiast who runs to eat.
You can follow him on Twitter or his blog.