Measuring app performance is challenging, and engineers frequently struggle to identify where areas of their app run slow or fail. Understanding every way your app causes user frustration is crucial for resolving issues that affect the user experience but don’t cause a crash or error.
For example, a relatively simple user action like tapping a button to upload a photo could trigger several services. There could be a service to upload the photo to your backend, a separate service for image manipulation like compressing or resizing, and another service for storing the result in your database.
If users complain that your app takes too long to upload their profile picture, how can you track down the specific service that’s causing this problem?
This is where Performance Tracing comes into play.
In this post, we’ll dive into the intricacies of Performance Tracing, shedding light on its key components, mechanics, and benefits.
Understanding Performance Tracing
Performance Tracing is the monitoring and analysis of various aspects of an app’s performance, which provides engineers visibility into custom operations. It allows you to track and monitor key parts of your app’s performance — everything from simple actions to complex user flows — which allows you to prioritize and resolve issues efficiently.
Through Performance Tracing tools, engineers can pinpoint the specific steps causing a delay in their app. For example, if you’ve built an e-commerce app, you might discover that users continually start the purchase process, but don’t reach completion.
You also note that the app isn’t crashing on this screen. To get to the bottom of the issue, you check your error logs and note that there are no failures being captured there either. What’s the next step?
In this instance, you’d need to know how long the process takes. Maybe completing a purchase is so slow that it’s causing users to give up and abandon their carts out of frustration. You need visibility into the cause of this slowdown, but what type of visibility do you need exactly?
This is where the ability to track specific areas of an app becomes advantageous. You may need to track the specific “add to cart” feature or the step where the user adds payment information. In the realm of Performance Tracing, this is a span.
On a more broad level, you might want to track the entire user checkout flow, including adding to cart, adding their payment information, billing and shipping addresses, coupons, etc. In the realm of Performance Tracing, this is a trace.
With the insight garnered from spans and traces, you can then troubleshoot the issue and improve the app’s responsiveness for the user.
Performance Tracing empowers engineers to create more efficient and enjoyable app experiences for users. Below, we’ll break down how.
What is a span?
A fundamental concept within Performance Tracing is the “span.” A span represents an operation or the “work” taking place on a service. It also allows for metadata like the span’s name, span ID, parent span ID, start and end timestamps, attributes, events, and status.
Spans can take on a variety of forms. For example, a span might represent something as broad as fetching images as a user scrolls on an e-commerce app, or something as granular as the calling of a single function.
What is a trace?
A trace describes the end-to-end journey of one or more connected spans. While a span gives you the ability to track specific aspects of your user journey, a trace provides you with the overall picture of a user flow.
You can think of a trace as a tree of operations and a span as the branches within the tree. To have a trace, you must have at least one span underneath it but can contain more than one span.
Spans can become quite granular. If you have one large “parent” span, you may also have several “child” spans nested underneath this. A span can contain one or more spans within it, but it’s worthwhile to note that a span with no children is just a tree with one branch, so this can be considered a trace as well.
You can learn more about spans, traces, and Performance Tracing in action in this video:
How do traces and spans work?
Traces and spans have a parent-child relationship. A trace traverses the entire journey that many spans, together, take to finish a large operation that consists of smaller operations.
Spans also contain a parent-child relationship. Within one large “parent” span, there can be several “children” nested underneath.
Now, let’s cover an example of Performance Tracing.
A trace could represent the entire journey of a page loading with information you’ve requested, and the spans are the individual pieces of work that accomplish this task.
As shown in the image below, the browser’s work to load the page is one span, the backend’s work to process the JSON request is another span, and the database server’s work to fulfill your query is another span.
Within these three parent spans, there are child spans that represent smaller, more specific units of work being done to fulfill various elements of the request.
What are the benefits of Performance Tracing?
There are many benefits of Performance Tracing. Let’s run through a few below. With Performance Tracing, you’re able to:
- Measure what matters most: You’re not limited to pre-built measurements, you can instrument spans and traces to monitor important segments of work in your app, whether it’s a payment flow, checkout flow, login flow, etc.
- Analyze at a granular level: Because spans and traces have a parent-child relationship, you’re able to leverage this relationship to track sub-workflows, measure success rates, distinguish failures, and even add custom metadata tags for detailed app analysis.
- Resolve issues with precision: Tracing allows mobile teams to quickly identify problems in the mobile app’s performance and troubleshoot with ultimate precision, reducing resolution time significantly.
- Pinpoint areas for optimization: Teams can identify distinct areas within key flows that are slow but aren’t outright failing. This enables you to keep your app high quality and keep your users engaged.
Pinpoint app performance issues with Embrace
Embrace is a data-driven toolset designed to make the job of a mobile engineer easier. We use automated data collection and a unified platform to reduce the time and effort of searching for insight across disparate tooling.
With Embrace, engineers can identify, prioritize, and solve problems in their apps with greater ease.
Embrace’s Performance Tracing empowers engineering teams to monitor crucial sections of their apps with precision. It does this by allowing you to create custom traces and spans for key areas in your app.
At a high level, you can quickly see the timing of your traces with P50, P90, P95, and P99 measurements alongside the ability to review the completion and failure percentages, as shown in the image below.
Let’s say you notice a trace has experienced a slowdown or an increase in failure rate and you’d like to dig in further to investigate. You can click any trace and dive into a more detailed view.
Above, you can see the Trace Instance page which shows each span within a given trace and the details of each segment of the span. Outside of this timeline shown above, this page also includes the span ID, name, outcome, duration, device model, start time, end time, and more.
You can also filter to review traces based on any attribute you create. The attributes created are key-value pairs. For example, one attribute, or key, could be the user ID and the value would be the user’s unique ID or user number.
You also have the option to filter based on events. This is something you can instrument in a span when you’re setting it up in your code. An event could be the change in a variable’s value or even a point where an authentication milestone is successful. These filtering capabilities allow you to drill down to the exact mobile experiences you’re interested in.
It’s worthwhile to note that Embrace traces differ from “distributed tracing” because we capture the client side of things, or what’s happening in the app. If you’re looking to achieve distributed tracing with Embrace, then you can do this by connecting Embrace to other observability tools.
To learn more about Performance Tracing and experience it firsthand, you can try Embrace for free today.
Learn what tracing is, its differences in mobile and backend, and find out how it can help you optimize your mobile app performance.
Read more