Skip to content

Commit

Permalink
Consolidated RUM and APM pages
Browse files Browse the repository at this point in the history
  • Loading branch information
rcastley committed Oct 12, 2023
1 parent 960f3da commit 3c27e09
Show file tree
Hide file tree
Showing 2 changed files with 95 additions and 8 deletions.
18 changes: 10 additions & 8 deletions content/en/s4r/02-rum.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,12 @@ As we know, modern web experiences can appear simple, but are complex, asynchron

From this page we can see a variety of metrics, such as: highest page load times, number of frontend and backend errors, top pages by views, top endpoints, and Google’s web vitals metrics. We also get out of the box views for front end health, back end health, and custom events so it's quick to see trends, anomalies, and even create detectors from these views.

(Note: You can learn more about Web Vitals metrics here: https://web.dev/vitals/)
{{% notice style="note" %}}
You can learn more about Web Vitals metrics here: [https://web.dev/vitals](https://web.dev/vitals)
{{% /notice %}}

{{% notice style="grey" title="Click the filter bar across the top, show different filtering options" %}}
![Filter options for the dashboard](../images/filters.png?width=50vw)
![Filter options for the dashboard](../images/filters.png)

{{% /notice %}}

Expand All @@ -31,12 +33,12 @@ In the top-left corner I can see that my highest page load times are higher than
{{% /notice %}}

{{% notice style="grey" title="Highlight “Page Load” chart, and click “See All”" %}}
![Page load preview with URLs and load times](../images/load.png?width=50vw)
![Page load preview with URLs and load times](../images/load.png)

{{% /notice %}}

{{% notice style="grey" title="Show and hide filters as you mention them" %}}
![Tag Spotlight filters](../images/spotlight.png?width=50vw)
![Tag Spotlight filters](../images/spotlight.png)

{{% /notice %}}

Expand All @@ -47,7 +49,7 @@ In this graph at the top of the page I can see that there are some alarming page
{{% /notice %}}

{{% notice style="grey" title="Click and drag to filter the view down to one of the spikes on the graph, then click the sessions tab" %}}
![Highlighting a spike on the line graph](../images/spike.jpg?width=50vw)
![Highlighting a spike on the line graph](../images/spike.jpg)

{{% /notice %}}

Expand All @@ -56,8 +58,8 @@ Now, if I look at these spikes I can see the P99 is even more alarming, so let
{{% /notice %}}

{{% notice style="grey" title="Click on the session that appears after filtering with the long duration, if more than one click the one with the highest duration. Click on the /cart/checkout process in the waterfall view to collapse the expanded view so you no longer see the tags." %}}
![List of user sessions associated with this app and time period](../images/sessions.png?width=50vw)
![Waterfall of requests for a specific user session](../images/waterfall.png?width=50vw)
![List of user sessions associated with this app and time period](../images/sessions.png)
![Waterfall of requests for a specific user session](../images/waterfall.png)

{{% /notice %}}

Expand All @@ -66,7 +68,7 @@ Here I can see one of the clicks this user made during this session. And I can s
{{% /notice %}}

{{% notice style="grey" title="Click on the long green checkout span that has a blue APM link" %}}
![Long checkout span includes link to APM](../images/span.png?width=50vw)
![Long checkout span includes link to APM](../images/span.png)

{{% /notice %}}

Expand Down
85 changes: 85 additions & 0 deletions content/en/s4r/03-apm.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
---
title: Splunk APM
weight: 9
---
{{% notice style="grey" title="Hover over the APM link" %}}
![APM link preview](../images/trace-preview.png)

{{% /notice %}}

{{% notice style="blue" title="Say" icon="user" %}}
This is where the end to end value of the Splunk Observability Cloud starts to show. We can hover over this APM link to reveal some quick, at a glance, info about what’s happening on the backend.

This performance summary is clearly showing two actionable things:

1. Time is being spent in the app (not db, network, or external); and
1. There are errors occurring in these back-end services, and I can see precisely which service is producing the “root cause” for this particular trace (in this case the payment service in dark red).

To dig further, I can explore two different paths, depending on the questions I want to ask.

Let’s explore both to understand why I might want to do one or the other.

{{% /notice %}}

{{% notice style="grey" title="Click on the Workflow Name “frontend:/cart/checkout” or open both links in new tabs" %}}
![Workflow link to APM](../images/preview-workflow.png)

{{% /notice %}}

{{% notice style="grey" title="Viewing the service map" %}}
![APM service map with largest errors shown on paymentservice bubble](../images/map.png)

{{% /notice %}}

{{% notice style="blue" title="Say" icon="user" %}}
The service map confirms what we saw earlier, that the issues at this particular time are coming from the paymentservice. We can also see that it is relying on a external service.

We can use a capability called “Tag Spotlight” to understand if there is anything notable about these erroneous transactions.

{{% /notice %}}

{{% notice style="grey" title="Click on the paymentservice circle, and then click on “Tag Spotlight” on the right" %}}
![Service map with paymentservice selected and Tag Spotlight link](../images/paymentservice.png)

{{% /notice %}}

{{% notice style="blue" title="Say" icon="user" %}}
Tag Spotlight is a powerful capability in Splunk Observability Cloud that helps us make sense of the unique transactions flowing through our application.

Tags can be indexed, both on the service where they originate, as well as globally (covering the entire transaction), to help developers understand more about a subset of the transactions that are occurring.

{{% /notice %}}

{{% notice style="grey" title="Point out the tenant level and version" %}}
![Tenant level and version tags showing relevant requests and errors](../images/tags.png)

{{% /notice %}}

{{% notice style="blue" title="Say" icon="user" %}}
At a glance we can see that the different kinds of customers (gold, bronze, and silver) are all similarly impacted, but the new version of our code (v350.10) has 100% of the errors.

In many investigations we might filter on some of these tags to narrow our view, but we have a pretty good picture already of what’s going on.

{{% /notice %}}

{{% notice style="grey" title="Click on one of the higher peaks, on the errors line, to get exemplars with errors" %}}
![Example traces with relevant errors](../images/examples.png)

{{% /notice %}}

{{% notice style="blue" title="Say" icon="user" %}}
Now I can look at some of the specific traces that have errors, to understand precisely what happened.

{{% /notice %}}

{{% notice style="grey" title="Click on a trace that has root (solid red) errors on the paymentservice" %}}
![Trace detail showing multiple paymentservice requests with errors](../images/trace.png)

{{% /notice %}}

{{% notice style="blue" title="Say" icon="user" %}}
Now I’m starting to get a good picture of what’s going on. This checkout process is making an API call to an external service over and over again and failing.

I’d like to look at the logs to see precisely what the error is.

{{% /notice %}}

0 comments on commit 3c27e09

Please sign in to comment.