appsignal

First steps towards a new front-end architecture

Robert Beekman

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.

Robert Beekman

Robert Beekman

As a co-founder, Robert wrote our very first commit. He's also our support role-model and knows all about the tiny details in code. Travels and photographs (at the same time).

All articles by Robert Beekman

Become our next author!

Find out more

AppSignal monitors your apps

AppSignal provides insights for Ruby, Rails, Elixir, Phoenix, Node.js, Express and many other frameworks and libraries. We are located in beautiful Amsterdam. We love stroopwafels. If you do too, let us know. We might send you some!

Discover AppSignal
AppSignal monitors your apps