Why Frontend Developers Need Logs Too – InApps 2022

As web apps grow in scope and complexity, so do the demands on frontend developers. Unfortunately, the logging and monitoring tools available to frontend developers have largely failed to keep pace with the challenges of modern web apps.

On the front end, users expect web apps to run across different devices, browsers and operating systems. Simultaneously, they need to maintain complex states and interact with a diverse set of databases and APIs. All this complexity generates plenty of opportunities for something to go wrong.

When things do go wrong, lack of logging infrastructure often means frontend developers never get the news at all. Frontend developers need logs to access vital information.

Getting Frontend Developers the Data They Need

Backend developers are blessed with various logging APIs and software tools that help them monitor important events and collect critical metrics. Monitoring and logging are relatively easy tasks on the server-side, where apps run in (mostly) controlled environments. Developers can collect verbose logs rich with clearly defined error reporting.

The frontend is not so simple. It can be challenging to determine the source of an exception or unusual error. Understanding which problems are relevant to the user experience is more challenging, as most user issues go unreported.

On the backend, we can mitigate a lack of user-error reporting with logs and notifications. However, on the frontend, a lack of user reporting traditionally means that developers are missing a crucial part of the puzzle: browser logs.

Often, the only way to get to the bottom of a complex frontend issue is to await bug reports accompanied by browser logs that enable developers to diagnose the problem. Without information from the user’s browser, it can be nearly impossible for developers to sort out the complex states that result in errors and exceptions.

With the vast scale and increasing reliance on frontend web apps, developers can’t simply cross their fingers and hope for conscientious users to report errors.

Solving the Browser Logging Problem

Developers familiar with modern backend logging know that it transcends simple data collection. A vast ecosystem of monitoring and observability tools allows developers to synthesize their log data into detailed explorations of system states.

Frontend developers could use all these powerful observability technologies as well, except they are often missing one thing: the raw data. Fortunately, folks working in the observability space aren’t blind to this issue. Opportunities for frontend developers to collect, visualize and use logging data are beginning to catch up to what is available on the backend.

One example of observability tools leaping from the backend to the frontend is LogDNA’s Browser Logger. LogDNA has an existing toolkit of centralized log management and visualization tools, but like most technologies in this space, it maintained a backend emphasis until recently.

With Browser Logger, frontend developers can take advantage of LogDNA’s rich monitoring tools. The super-lightweight tool automatically collects essential user data, including browser version, operating system, URL, and data about errors and events. Frontend developers can also configure this tool to record specific, customized metadata to help trace issues.

All of this data aggregates into LogDNA’s centralized monitoring platform, giving developers access to visualizations and various tools for exploring the data that Browser Logger captures.

Monitoring Our Way to Better Web Apps

The hard truth is, waiting for user reports puts frontend developers behind the curve: They can only put out fires that have already started. Automatically collecting browser logs, in contrast, empowers savvy developers to spot the smoke before the fire causes a significant issue.

Frontend developers can preempt problems by analyzing trends, referencing expansive data sets to perform rapid diagnostics and monitoring system health. They can also set custom alerts to be automatically triggered when the smoke starts. All of this combines to put frontend developers in a much more comfortable position to refine and expand their apps.

To build better web apps, we can’t rely on our creativity alone. We also need historical data about what works and what does not.

Fortunately ― as our friends on the backend know well ― modern observability tools are exceptional at making sense of the past. LogDNA’s Browser Logger finally invites frontend developers to the observability party.