From c61d9740431d9797db68580664406ff3c9915a76 Mon Sep 17 00:00:00 2001 From: "Adam J. Smye-Rumsby" <36513285+adamjsr@users.noreply.github.com> Date: Fri, 29 May 2026 16:34:34 -0400 Subject: [PATCH] Update 4-rum.md Update navigation to reflect UI changes, improve readability --- .../1-petclinic-monolith/4-rum.md | 22 +++++++++++-------- 1 file changed, 13 insertions(+), 9 deletions(-) diff --git a/content/en/ninja-workshops/foundations/1-automatic-discovery/1-petclinic-monolith/4-rum.md b/content/en/ninja-workshops/foundations/1-automatic-discovery/1-petclinic-monolith/4-rum.md index e2087e014c..36da9b37bb 100644 --- a/content/en/ninja-workshops/foundations/1-automatic-discovery/1-petclinic-monolith/4-rum.md +++ b/content/en/ninja-workshops/foundations/1-automatic-discovery/1-petclinic-monolith/4-rum.md @@ -3,14 +3,14 @@ title: 3. Real User Monitoring weight: 3 --- -For the Real User Monitoring (RUM) instrumentation, we will add the Open Telemetry Javascript [**https://github.com/signalfx/splunk-otel-js-web**](https://github.com/signalfx/splunk-otel-js-web) snippet in the pages, we will use the wizard again **Data Management → Add Integration → RUM Instrumentation → Browser Instrumentation**. +For the Real User Monitoring (RUM) instrumentation, we will add the OpenTelemetry Javascript [**https://github.com/signalfx/splunk-otel-js-web**](https://github.com/signalfx/splunk-otel-js-web) snippet to the pages returned by the Spring PetClinic application. To do this, in Splunk Observability Cloud, navigate to **Data Management → Available Integrations → RUM Instrumentation → Browser Instrumentation**. -Your instructor will inform you which token to use from the dropdown, click **Next**. Enter **App name** and **Environment** using the following syntax: +Click **Next**. Your instructor will inform you which token to select from the Access token dropdown. Click **Next** again. Enter **App name** and **Environment** using the following syntax: - `-petclinic-service` - replacing `` with the value you noted down earlier. - `-petclinic-env` - replacing `` with the value you noted down earlier. -The wizard will then show a snippet of HTML code that needs to be placed at the top of the pages in the `` section. The following is an example of the (do not use this snippet, use the one generated by the wizard): +The wizard will then show a snippet of HTML code that needs to be placed at the top of the pages in the `` section. The following is an example of the snippet (do not use this example, use the version generated by the wizard): ``` html /* @@ -30,15 +30,17 @@ version from https://github.com/signalfx/splunk-otel-js-web/releases ``` -The Spring PetClinic application uses a single HTML page as the "layout" page, that is reused across all pages of the application. This is the perfect location to insert the Splunk RUM Instrumentation Library as it will be loaded in all pages automatically. +Copy the snippet to the clipboard or text editor. -Let's then edit the layout page: +The Spring PetClinic application uses a single HTML page as the "layout" page, that is reused across all pages of the application. This is the perfect location to insert the Splunk RUM Instrumentation Library, as it will be loaded in all pages automatically. + +Let's edit the layout page to add the snippet: ```bash vi src/main/resources/templates/fragments/layout.html ``` -Next, insert the snippet we generated above in the `` section of the page. Make sure you don't include the comment and replace `` in the source URL to `latest` e.g. +Next, insert the snippet we generated in the previous step, into the `` section of the page. Don't include any comments that were automatically added to the snippet, and also replace `` in the source URL to `latest` e.g. ```html @@ -57,12 +59,14 @@ Next, insert the snippet we generated above in the `` section of the page. ... ``` -With the code changes complete, we need to rebuild the application and run it again. Run the `maven` command to compile/build/package PetClinic: +With the code changes complete, we need to rebuild the application and run it again. Run the `maven` command to compile, build and package PetClinic: ```bash ./mvnw package -Dmaven.test.skip=true ``` +Next, start the updated application: + ```bash java \ -Dserver.port=8083 \ @@ -71,8 +75,8 @@ java \ -jar target/spring-petclinic-*.jar --spring.profiles.active=mysql ``` -Then let's visit the application using a browser to generate real-user traffic `http://:8083`. +Then access the application using a browser to generate real-user traffic: `http://:8083`. In RUM, filter down into the environment as defined in the RUM snippet above and click through to the dashboard. -When you drill down into a RUM trace you will see a link to APM in the spans. Clicking on the trace ID will take you to the corresponding APM trace for the current RUM trace. +When you drill down into a RUM trace you will see a link to APM in the spans. Clicking on the trace ID will take you to the APM trace corresponding to the current RUM trace.