Observability and Tracing: How to Improve Your Debugging Workflow
Having the right tools to support debugging is crucial for improving application performance and delivering an enhanced user experience. Traditional observability tools provide insights into application health and with a shift towards actionability, they also directly aid in the debuggability of your system, helping you pinpoint the root cause of issues in real-time. Every developer must establish a strong debugging workflow and this guide can help you level up your observability skills so that you can more quickly and effectively debug.
Learn the core concepts of how to make observability more actionable, traceable, and debuggable.
What is observability?
Observability tools have become table stakes for many engineering teams to be able to diagnose and resolve issues across multiple services. They provide insights into an application's internal state derived from aggregated system data, which can then inform developers where to focus their debugging efforts.
The 3 pillars of observability
The concept of observability is often framed around what is known as the "three pillars of observability":
Logs provide a detailed record of events within the system.
Metrics offer quantitative measurements such as CPU usage or request rates.
Tracing allows for tracking the flow of requests through the system.
These pillars work together to offer a comprehensive view of an application’s performance and health. To better understand how observability is approached, refer to our blog post, "Monitoring, Observability, & Debuggability Explained," which explores these concepts in detail. While useful, developers are still struggling with knowing what to prioritize and where to take action. At Sentry, we’ve been focusing our support for developers around tracing, as an earlier blog post mentioned, “You (we) don’t observe code. We (you) push code.”
What is tracing?
Tracing, also called distributed tracing when referring to tracing instrumented on a full stack instead of just frontend or backend, is emerging as the critical component to having strong debuggability across your system. Providing engineering teams with the capability to efficiently contextualize and prioritize issues, tracing is a specific debugging technique that becomes essential when dealing with complex systems, such as microservices-based architectures.
At its core, tracing links spans (timed operations and requests representing part of a workflow) across multiple services, enabling developers to trace the journey of an end-to-end request as it travels through various parts of the system. This process is critical for identifying where errors or performance bottlenecks occur within individual services, and contextualizes those issues across the entire system.
Using distributed tracing, developers can isolate and address these issues more effectively, leading to more resilient and efficient applications. Tools focused on debuggability, like Sentry, integrate solid tracing with an emphasis on actionability. Taking action is really only possible when your tools also:
Identify the right developers to solve the issue
Provide enough data to identify the root cause
Extrapolate critical details of the issue so developers can appropriately prioritize across all issues
Contextualize the issue so that developers can solve it without needing to rely on other teams for assistance
For a more in-depth exploration of distributed tracing and its benefits for developers, check out our blog post, "Distributed Tracing 101 for Full Stack Developers," which offers a comprehensive overview of this technique.
Traces vs. spans
From a technical perspective, tracing is broken into two representations of what is happening within a system:
Spans represent actions or tasks occurring within a service. They can capture a wide range of activities, from broad tasks, like a web server processing an HTTP request, to very detailed actions, like the execution of a single function.
Traces capture the complete sequence of connected spans, representing the end-to-end flow of operations.
When a trace links spans across multiple services, it is referred to as a distributed trace.
Tracing, as a component of observability and debuggability, empowers developers to diagnose and resolve issues across complex, multi-service architectures with greater speed and precision, ultimately leading to more robust and reliable applications.
Actionable observability is the key to a debuggable system
Observability, at its core, is about data. With an emphasis on logs, metrics, and traces, the goal is to provide developers with all the information to be able to resolve issues. But even with the support of these tools, developers are still wasting time trying to contextualize and prioritize issues. Platforms focused on debuggability, like Sentry, take those principles further. With an emphasis on actionability, the goal is to provide developers with context, insights, and tracing to be able to resolve issues faster.
Debug faster with tracing
Tracing, as a part of debugging workflow, significantly lowers MTTR (Mean Time to Resolution). By helping developers follow a request through every layer of the application, tracing makes it easier to pinpoint where things go wrong. This, along with other insights offered by your tools, speeds up the resolution process by reducing the time spent contextualizing, prioritizing, assigning, and diagnosing issues.
The key to an effective platform focused on debuggability, like Sentry, is to contextualize and group data in ways that are more actionable by developers. This focus on actionability, versus information overload, gives individual developers more power to resolve issues without requiring help from multiple teams.
Incorporating tracing and debuggability into the development process empowers frontend teams to deliver faster, more reliable, and user-centric applications. This, in turn, contributes directly to higher customer satisfaction and more efficient operations.
Improve application performance with tracing
As a frontend engineer, it is often the case that a page slowdown occurs because of a slow service being called. Tools that emphasize debuggability provide real-time performance data on key metrics such as page load times and resource utilization, but couple that with tracing to identify the root cause and not just the surface-level issue. Leveraging tracing to be able to understand how different components of the frontend interact with other services and consume resources is the single most important benefit to frontend developers using these tools. By optimizing these interactions, developers can reduce unnecessary resource usage, resulting in faster load times and smoother user experiences.
Sentry has been heavily focused on supporting debugging workflows, particularly through performance issues. Specifically, there are two key ways that you’re able to leverage the data Sentry offers through the instrumentation of tracing and monitoring:
Contextualize your Core Web Vitals with Sentry’s Trace View
To ensure you’re providing the best experience possible for your users, you must keep on top of your Core Web Vitals — such as LCP, FCP, INP, and CLS. However, poor Core Web Vitals on web pages and web apps don’t always point to an obvious frontend issue or obvious frontend fix. Bottlenecks that happen further downstream, such as requests made to backend services that make database calls, can often be the root cause of slowdowns and perpetual loading spinners.
Sentry’s Trace View contextualizes your Core Web Vitals alongside a full distributed trace, by surfacing data for TTFB, FCP, LCP, and Request Time, and adding helpful markers for those events on the trace timeline.
As a result, you’re able to identify which span(s) across your entire distributed systems of apps and services are affecting those important metrics. What’s also helpful, is that Sentry will proactively identify and create performance issues for you and link them in the trace view (and alert you if you have alerts configured). These issues could be created for a Slow DB Query or N+1 Query, for example.
Even if you’re not responsible for backend and database performance issues within your development team, thanks to Sentry, you’re able to provide a detailed report of the issue down to the specific lines of code that need some attention, so the right person can make the right fix.
Insights are focused on application health in Sentry
If you’re the kind of developer who likes data, Sentry collects a wealth of performance-oriented data about your projects, which you can observe and explore using Sentry’s Insights modules. Insights provides curated views and workflows to help you identify and fix performance issues that may or may not be triggering alerts. Using Insights, you can track and observe HTTP requests, database queries, and browser assets to help debug and improve performance. Mobile and Web Vitals offer insights into the health and performance of mobile and web applications, and Sentry also monitors caches, queues, and LLM calls to give you the data and context you need to further optimize application performance and health.
Sentry connects each piece of data it holds about your application together via the trace it belongs to — so wherever you choose to investigate issues about your app, everything is linked, contextualized, and debuggable.
Improve your debugging workflow with Sentry
As a developer, tracing allows you to see the entire journey of a request across your stack, pinpointing the exact causes of slowdowns and inefficiencies. You can start using Sentry today and add tracing to your development workflow, or check out one of our on-demand practical workshops that delve deeper into how tracing can help you optimize your code, improve user experiences, and deliver faster, more reliable applications. Take it from us. Your users will thank you, and so will your team. Unlock the full potential of your applications by gaining deep insights into performance bottlenecks with tracing from Sentry.
