Logo of AppSignal

Menu

First steps towards a new front-end architecture

Robert Beekman on

Today we launched the first parts of our rewritten front-end code. Here’s what we changed.

We took the two most visited screens — the error and performance incident pages — and converted them to offer a new, snappy interface running on React. We also split up the information presented on these pages, using tabs for navigation.

The incidents table now takes up the full width of the page. This allows us to add additional columns with more actionable information in the future.

incidents

On the performance incident page we added a new column, showing the total time spent on a specific incident. This column makes it easier to identify the performance issues that have the highest impact on your app.

graphs

Graphs now have their own tab, utilizing all the available horizontal space.. This makes interacting with the graph a lot easier, and provides more granularity because there’s less information to pack in a single pixel.

Besides these major changes we also improved the way we show throughput in the graphs. You’re now able to easily compare throughput rates for minutely and hourly resolutions.

graph

These are the first steps leading to a more dynamic front-end. The new foundation based on React allows us to provide real-time updates and client-side caching for faster interaction in the future, something we’re already putting to good use on features that are currently under development.

10 latest articles

Go back

Subscribe to

Ruby Magic

Magicians never share their secrets. But we do. Sign up for our Ruby Magic email series and receive deep insights about garbage collection, memory allocation, concurrency and much more.