The Shifting Landscape of Modern Application Stacks

The modern application stack is undergoing a seismic shift, with the center of gravity moving towards the frontend. The demand for rich, performant user interfaces, scalable infrastructure, and increased developer productivity has led to the deployment of new application architectures. As a result, stateful single-page frontends now communicate with disparate microservices, serverless functions, smart CDNs, and third-party APIs.

The Challenges of Monitoring Modern Applications

While this shift has undoubtedly improved end-user experience and application availability, it has introduced a new set of challenges to monitoring applications. Understanding performance in web apps is notoriously difficult, with slow API calls, heavy client-side JavaScript, and complex user flows making it a constant struggle to ensure applications perform well and offer an excellent user experience.

The Limitations of Traditional APM Tools

Traditional APM tools, designed for monitoring monolithic server-side apps, have added browser SDKs as frontends grew more complex. However, their frontend telemetry is limited, focusing mostly on page loads, resource timings, and JavaScript errors. Many teams find that their alerting is too noisy, with too many false positives, and they don’t capture enough context to help them understand the actual impact of technical issues on the end user.

The Unique Challenges of Frontend Monitoring

Monitoring frontend and backend applications are vastly different processes. In modern single-page apps, performance is affected by a multitude of factors, including network requests, JavaScript execution, local resource access, CPU load, and memory usage. Slowness can be introduced from the backend, CDN layer, internet connectivity, JavaScript performance, or client device.

Frontend Performance Monitoring

A comprehensive frontend monitoring solution should capture key metrics such as:

• CPU usage
• Memory usage
• Browser crashes
• Initial page load times

This allows developers to understand how their app is performing on the frontend, both at an aggregate level and for specific pages or flows.

Analyzing Complex Flows

Measuring the time between events, such as clicks on a certain button, page loads, network requests, or custom events, can help developers gauge performance of complex flows.

const startTime = performance.now();
// perform some action
const endTime = performance.now();
const timeBetweenEvents = endTime - startTime;
console.log(`Time between events: ${timeBetweenEvents}ms`);

Understanding Impact

While graphs and charts provide a high-level view of application performance, it’s essential to understand how performance numbers and network errors affect the user experience. This can be achieved by jumping from any graph directly into actual user sessions, allowing developers to see the video of what users experienced and immediately understand and empathize with the quality of their user experience.

Debugging User-Reported Issues

When debugging user-reported issues, it’s crucial to have visibility into key metrics such as:

• CPU usage
• Memory usage
• Network request timings

This allows developers to understand why their application was slow and identify areas for improvement.

Alerting

Setting up alerting for critical metrics can help developers stay on top of performance issues. This can be achieved through integrations with popular communication tools such as Slack, email, or webhooks.

// Example alerting setup
if (cpuUsage > 80) {
  sendAlert('High CPU usage detected!');
}

The Future of Frontend Development

The shift towards rich single-page apps has undoubtedly improved both user experience quality and developer productivity. However, with greater complexity comes the need for more observability. As the application stack continues to evolve, it’s essential to stay ahead of the curve with innovative monitoring solutions that cater to the unique challenges of frontend development.