SumoLogic · jpipkin1 · Dec 2, 2025 · Dec 1, 2025
@@ -121,8 +121,7 @@ We’re excited to announce that we've updated the Sumo Logic Kubernetes Helm Ch
 
 To learn more, see [Set up Data Collection for Kubernetes](/docs/observability/kubernetes/collection-setup) and the diagram below, which distinguishes support available on Falco for collection and enrichment.
 
-![K8s.png](/img/kubernetes/K8s-architecture.png)
-
+<img src={useBaseUrl('img/kubernetes/K8s-architecture.png')} alt="Kubernetes architecture" style={{border: '1px solid gray'}} width="800" />
 
 ---
 ### October 18, 2023 (Apps)

@@ -4,11 +4,13 @@ title: Search RUM Browser Traces
 sidebar_label: RUM Browser Traces
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 To collect browser RUM traces, create a [trace query](/docs/apm/traces/view-and-investigate-traces) that specifies traces starting with the value you gave to `<name_of_your_web_service>` as a root service name. You can also include the following filters as an operation name:
 * `documentLoad` as an operation name to find traces that correspond to page loads.
 * `Click on *` as an operation name to detect click actions that most likely resulted in XHR calls
 * `Navigation: *` as an operation name to detect single-page app navigation changes
 
 Click on any of the load spans, such as `documentLoad`, `documentFetch`, or `resourceFetch` (for `documentLoad`), to open a right-side panel with detailed span metadata, including timing events.
 
-![RUM-trace-view with border.png](/img/rum/RUM-trace-view-with-border.png)
+<img src={useBaseUrl('img/rum/RUM-trace-view-with-border.png')} alt="RUM trace view with border" style={{border: '1px solid gray'}} width="800" />
@@ -102,7 +102,7 @@ This can be also replaced with an internal OpenTelemetry collector if you wish t
 Use the copied script in your page head inside the `<head>` `</head>` tags. The script sends trace data in [OTLP/JSON over HTTP](https://github.com/open-telemetry/opentelemetry-specification/blob/master/specification/protocol/otlp.md#otlphttp) protocol. 
 
 :::tip
-You can view and copy a script anytime by clicking **Show script** for the source.<br/> ![show-script.png](/img/rum/show-script.png)
+You can view and copy a script anytime by clicking **Show script** for the source.<br/><img src={useBaseUrl('img/rum/show-script.png')} alt="Show script" style={{border: '1px solid gray'}} width="200" />
 :::
 
 The following are base script examples, populated when you create and configure a source in the above instructions.

@@ -36,7 +36,7 @@ import AppUninstall from '../../reuse/apps/app-uninstall.md';
 Once the RUM app has been installed, use the Real User Monitoring view to gain visibility into your web app's performance and end-user activity, such as geographic location, browser type, operating systems used. These dashboards visualize RUM metrics gathered from browser tracing instrumentation.
 
 1. [**New UI**](/docs/get-started/sumo-logic-ui). In the main Sumo Logic menu, select **Observability**, and then under **Real User Monitoring**, select **User Experience**. You can also click the **Go To...** menu at the top of the screen and select **User Experience**.  <br/>[**Classic UI**](/docs/get-started/sumo-logic-ui-classic). Go to the **Home** screen and select **Explore**. Then in the upper-left corner of the screen, select **Real User Monitoring** from the dropdown menu.
-1. Select your desired dashboard from **Dashboard** dropdown menu in the header:<br/>![explore rum with red box.png](/img/rum/explore-rum-with-red-box.png)<br/> There are three dashboard types on the **Application**, **Service**, and **Environment** levels, and a single one on the **Action type** and **Action** levels.
+1. Select your desired dashboard from **Dashboard** dropdown menu in the header:<br/><img src={useBaseUrl('img/rum/explore-rum-with-red-box.png')} alt="Explore RUM with red box" style={{border: '1px solid gray'}} width="800" /><br/> There are three dashboard types on the **Application**, **Service**, and **Environment** levels, and a single one on the **Action type** and **Action** levels.
 1. Set your desired filters. RUM data is organized on five levels:
    * **Application**. corresponds to the value of the application tag set in your [RUM script](/docs/apm/real-user-monitoring/configure-data-collection/#step-2-add-rum-script-to-your-page-header). This should correspond to your whole website defined by its business function, such as `the-coffee-bar-app`.
    * **Service**. corresponds to the name of the service in your [RUM script](/docs/apm/real-user-monitoring/configure-data-collection/#step-2-add-rum-script-to-your-page-header). The value should correspond to the JavaScript code executed in your browser, such as `coffee-bar-frontend`. You can have multiple services for each application.
@@ -47,7 +47,7 @@ Once the RUM app has been installed, use the Real User Monitoring view to gain v
      * **route changes**. Single-page-app specific way to navigate to a new page/view without having to load a new document.
    * **Action Name**. Automatically generated from URLs. No configuration is required. The specifics of it will depend on action type. Action names can contain asterisks (`*`) to replace automatically-detected dynamic parts of the URL. If you have action names that overlap, the action name with an asterisk contains data for page loads NOT contained in more specific action names. For example, `http://www.site.com/path/page.htm` does not contain actions from `http://www.site.com/path/*`.
 
-Example:<br/><img src={useBaseUrl('img/rum/explore-view-rum.png')} alt="Real User Monitoring Load Action Dashboard" />
+Example:<br/><img src={useBaseUrl('img/rum/explore-view-rum.png')} alt="Real User Monitoring Load Action Dashboard" style={{border: '1px solid gray'}} width="800" />
 
 
 ## Navigating RUM Dashboards
@@ -67,9 +67,9 @@ You can also click on any data-point on the charts to open a details panel and v
 
 Overview dashboards on all view levels have a panel showing geographical user activity for the selected entity. Geographic dashboards measure user activity as dot size and performance as a color.
 
-![RUM Overview dashboard](/img/rum/RUM-Overview.png)
+<img src={useBaseUrl('img/rum/RUM-Overview.png')} alt="RUM Overview dashboard" style={{border: '1px solid gray'}} width="800" />
 
-![RUM Overview Application and RUM Overview Service dashboards](/img/rum/RUM-Overview-Application-Service.png)
+<img src={useBaseUrl('img/rum/RUM-Overview-Application-Service.png')} alt="RUM Overview Application and RUM Overview Service dashboards" style={{border: '1px solid gray'}} width="800" />
 
 ### RUM TopN Application/Service
 
@@ -83,7 +83,7 @@ Use these dashboards to:
 
 You can select the timing metric type in the **statistic** dropdown on the dashboard header. This will change the browser time metrics types on charts. You can also define the top N number for all charts.
 
-![RUM TopN Application and RUM TopN Service dashboards](/img/rum/RUM-TopN-Application.png)
+<img src={useBaseUrl('img/rum/RUM-TopN-Application.png')} alt="RUM TopN Application and RUM TopN Service dashboards" style={{border: '1px solid gray'}} width="800" />
 
 ### RUM Performance Analytics Application/Service
 
@@ -96,7 +96,7 @@ Use these dashboards to:
 
 You can click on any data point on the charts to open a details panel and view the **Infrastructure** tab to drill-down to traces representing user transactions from the selected time point. For cross-dimensional metrics, only the average statistic type is available.
 
-![RUM-Performance-Analytics-Application dashboard](/img/rum/RUM-Performance-Analytics-Application.png)
+<img src={useBaseUrl('img/rum/RUM-Performance-Analytics-Application.png')} alt="RUM Performance Analytics Application dashboard" style={{border: '1px solid gray'}} width="800" />
 
 
 ## Collecting Browser Errors
@@ -113,7 +113,7 @@ Browser error logs, although collected via RUM script, contribute to your log Co
 
 Data in the index is query-able using normal log search query. Here’s a sample query and results:
 
-<img src={useBaseUrl('img/rum/logerrors1.png')} alt="Sumo Logic log search displaying error logs filtered by the operation 'click on Pay'" />
+<img src={useBaseUrl('img/rum/logerrors1.png')} alt="Sumo Logic log search displaying error logs filtered by the operation 'click on Pay'" style={{border: '1px solid gray'}} width="800" />
 
 The following fields are available to better aggregate and filter your results:
 * Application
@@ -130,10 +130,10 @@ Because errors do not always have to be connected with user actions, it is ok to
 
 In addition to that, we also aggregate that information in form of log-query based panels and display on various dashboards:
 
-<img src={useBaseUrl('img/rum/logerrors2.png')} alt="Real User Monitoring log errors per second graphic" />
+<img src={useBaseUrl('img/rum/logerrors2.png')} alt="Real User Monitoring log errors per second graphic" style={{border: '1px solid gray'}} width="800" />
 
-<img src={useBaseUrl('img/rum/logerrors-xhr.png')} alt="Real User Monitoring log errors XHR per second graphic" />
+<img src={useBaseUrl('img/rum/logerrors-xhr.png')} alt="Real User Monitoring log errors XHR per second graphic" style={{border: '1px solid gray'}} width="800" />
 
-<img src={useBaseUrl('img/rum/logerrors-by-browser.png')} alt="Real User Monitoring log errors by browser, operating system, and geolocations graphic" />
+<img src={useBaseUrl('img/rum/logerrors-by-browser.png')} alt="Real User Monitoring log errors by browser, operating system, and geolocations graphic" style={{border: '1px solid gray'}} width="800" />
 
 Logs collection is enabled by default. You can disable by setting `collectErrors=false` in your RUM script options.
@@ -21,7 +21,7 @@ The following document load metrics are collected from JavaScript. These are ava
 
 These metrics, presented in the form of areas on the **Website Performance** panels on [RUM dashboards](/docs/apm/real-user-monitoring/dashboards), can help you understand the sequence of events (pictured below) from user clicks to a fully loaded document.
 
-![Diagram showing various navigation metrics from user clicks to a fully loaded document, including DNS resolution, SSL connection, TCP establishment, request end, first byte, response end, interactive time, and processing end](/img/rum/Navigation-metrics.png)
+<img src={useBaseUrl('img/rum/Navigation-metrics.png')} alt="Document load metrics" style={{border: '1px solid gray'}} width="800" />
 
 Timing metrics are not calculated if the visibility state of the document is "hidden" at any point during the load.
 

@@ -19,7 +19,7 @@ To access span analytics:
 
 A new **Spans** page opens. Data is displayed once you run a query.
 
-![Spans page](/img/apm/spans-page.png)
+<img src={useBaseUrl('img/apm/spans-page.png')} alt="Spans page" style={{border: '1px solid gray'}} width="800" />
 
 From here, you can filter and aggregate by any standard or custom span attribute (tag) and create charts to visualize results. If you find something interesting, you can quickly explore your raw span records in the **Messages** tab.
 
@@ -54,11 +54,11 @@ This micro lesson provides an overview of Span Analytics, and describes the term
 
 You can build a spans query using the provided input fields. By default, you'll see an input for **Filters** and **Visualize**.
 
-![blank spans query](/img/apm/spans-query-blank.png)
+<img src={useBaseUrl('img/apm/spans-query-blank.png')} alt="Blank spans query" style={{border: '1px solid gray'}} width="800" />
 
 Once you click the text area of an input field, you'll get a dropdown menu that provides the available options detected from your data. You can manually type into these input fields or select from the dropdown of available options.
 
-![dropdown for spans filter](/img/apm/dropdown-for-spans-filter.png)
+<img src={useBaseUrl('img/apm/dropdown-for-spans-filter.png')} alt="Dropdown for spans filter" style={{border: '1px solid gray'}} width="400" />
 
 ### Filters
 
@@ -90,7 +90,7 @@ If you define **Visualize**, an option to set **Group By** appears, allowing
 
 If you define **Group By**, you'll see another option to set a **Limit** value. This allows you to reduce the number of results by an order.
 
-![spans query](/img/apm/spans-query.png)
+<img src={useBaseUrl('img/apm/spans-query.png')} alt="Spans query" style={{border: '1px solid gray'}} width="800" />
 
 :::note
 When you run a query using **Visualize** and/or **Group By**, the results tab automatically switches to **Aggregates**.
@@ -106,11 +106,11 @@ You set the time range of the query at the top right of the Spans page, above th
 
 Once you have defined your spans query, with filters and aggregation if desired, click the search button to run the search. It looks like the following:  
 
-![spans search button](/img/apm/spans-search-button.png)
+<img src={useBaseUrl('img/apm/spans-search-button.png')} alt="Spans search button" style={{border: '1px solid gray'}} width="100" />
 
 You can pause or stop your search by clicking the appropriate icons below the search button.  
 
-![pause or stop spans query](/img/apm/pause-or-stop-spans-query.png)
+<img src={useBaseUrl('img/apm/pause-or-stop-spans-query.png')} alt="Pause or stop spans quer" style={{border: '1px solid gray'}} width="100" />
 
 ## Search results
 
@@ -120,10 +120,10 @@ You can pause or stop your search by clicking the appropriate icons below the se
 
 The **Messages** table shows your raw span data. You can click on any row to open a right-side Details pane (similar to the one in [Trace View](/docs/apm/traces/view-and-investigate-traces)) showing span details and options to navigate to other parts of the system from there.
 
-![messages results](/img/apm/spans-messages-results.png)
+<img src={useBaseUrl('img/apm/spans-messages-results.png')} alt="Messages results" style={{border: '1px solid gray'}} width="800" />
 
 * To move a column left or right, hold click and drag it to a different location in the table.
-* To adjust column width, click and drag the vertical line in between the columns.<br/> ![resize column](/img/search/get-started-search/search-page/resize-column.png)
+* To adjust column width, click and drag the vertical line in between the columns.<br/><img src={useBaseUrl('img/search/get-started-search/search-page/resize-column.png')} alt="Resize column" style={{border: '1px solid gray'}} width="200" />
 * To reset column width to the default size, double-click the vertical line to the right of a column name.
 
 #### Facets
@@ -132,36 +132,36 @@ The **Facets** panel provides a list of all the metadata fields returned from yo
 
 The content of the Facets panel is affected by your current active filters and time range, but shows any found metadata tag (span attribute) with its top 10 values, including any custom tags you may [add to your data](/docs/apm/traces/get-started-transaction-tracing/opentelemetry-instrumentation/java/custom-tags-configuration). By default, the fields used in the query are shown in the Messages table.
 
-![Facets expanded](/img/apm/facets-expanded.png)
+<img src={useBaseUrl('img/apm/facets-expanded.png')} alt="Facets expanded" style={{border: '1px solid gray'}} width="300" />
 
 * You can adjust which fields are displayed in the raw span messages table by checking or unchecking the box next to the field in the Facets panel.
 * Use the search field to easily find the metadata from your data. This applies the filter to both tag names and their values.
 * The number of values found for each is displayed for your reference.
 * Add and remove fields from your query by hovering over a field and clicking.  
 
-![facets add to query](/img/apm/facets-add-to-query.png)
+<img src={useBaseUrl('img/apm/facets-add-to-query.png')} alt="Facets add to query" style={{border: '1px solid gray'}} width="300" />
 
 ### Aggregates tab
 
 The **Aggregates** tab shows your data charted. See Panels from Dashboard for details on the settings. However, note that not all settings will be available on the Spans page. The interface will only show you available settings.
 
-![spans-aggregates-visualize](/img/apm/spans-aggregates-visualize.png)
+<img src={useBaseUrl('img/apm/spans-aggregates-visualize.png')} alt="<your image description>" style={{border: '1px solid gray'}} width="<insert-pixel-number>" />
 
 #### Add to Dashboard
 
 You can add to a dashboard as long as your total dashboard-originated `_trace_spans` read volume does not exceed 200x of your tracing ingest. Contact your Sumo Logic representative for paid subscription service options for volume requirements exceeding 200x of your tracing ingest.
 
 To add your aggregated span data to a dashboard:
 
-1. Click the three-dot kebab menu icon and select **Add to Dashboard**.<br/>  ![add-to-dashboard-spans](/img/apm/spans-add-to-dashboard.png)
-1. In the **Add Panel to Dashboard** window, provide a **Panel Title** and enter an existing **Dashboard** name or add to a newly created a new one, as seen in this screenshot.<br/> ![span-dashboard](/img/apm/span-dashboard.png)
+1. Click the three-dot kebab menu icon and select **Add to Dashboard**.<br/><img src={useBaseUrl('img/apm/spans-add-to-dashboard.png')} alt="Add to dashboard spans" style={{border: '1px solid gray'}} width="400" />
+1. In the **Add Panel to Dashboard** window, provide a **Panel Title** and enter an existing **Dashboard** name or add to a newly created a new one, as seen in this screenshot.<br/><img src={useBaseUrl('img/apm/span-dashboard.png')} alt="Span dashboard" style={{border: '1px solid gray'}} width="800" />
 1. When you're done assigning the panel to a dashboard, click **Add**.
 
 #### Open in Search
 
 To further enhance your query, you can use the [Search Query Language](/docs/apm/traces/search-query-language-support-for-traces) for more advanced use cases by opening a Search of your spans. Click the three-dot kebab menu icon and select **Open in Search**.  
 
-![span-open-in-search](/img/apm/span-open-in-search.png)
+<img src={useBaseUrl('img/apm/span-open-in-search.png')} alt="Span open in search" style={{border: '1px solid gray'}} width="400" />
 
 ### Examples
 
@@ -171,7 +171,7 @@ To compare the performance of different release versions defined by a custom tag
 
 Use the **filters** or **facets** features to find the appropriate service in the dropdown and select it. Next, select to visualize duration’s 95th percentile and pick a group by time. For example, 1-minute granularity and the `assemblyVersion` custom tag that carries version information. That’s it!
 
-![service percentile by time](/img/apm/service-percentile-by-time.png)
+<img src={useBaseUrl('img/apm/service-percentile-by-time.png')} alt="Service percentile by time" style={{border: '1px solid gray'}} width="800" />
 
 You can customize your chart by picking different visualization types and colors.
 
@@ -181,7 +181,7 @@ Next, let’s see how to find the distribution of different HTTP errors among ou
 
 Here is the simple query we used to visualize that data:
 
-![status codes spans example](/img/apm/spans-status-codes-example.png)
+<img src={useBaseUrl('img/apm/spans-status-codes-example.png')} alt="Status codes spans example" style={{border: '1px solid gray'}} width="800" />
 
 It’s now easier than ever to drill down into the information you care about. Note that our query only includes spans with codes from 4xx and 5xx ranges and visualizes the count of such spans, broken down by two dimensions, service and status code. Easy!