Skip to content

Commit 6b768ec

Browse files
hagen-phagen-p
committed
inital draft for RUM
1 parent 6d5dad4 commit 6b768ec

File tree

3 files changed

+93
-59
lines changed

3 files changed

+93
-59
lines changed

‎content/en/conf24/1-zero-config-k8s/8-rum/_index.md‎

Lines changed: 87 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,82 +2,115 @@
22
title: Real User Monitoring
33
linkTitle: 8. Real User Monitoring
44
weight: 9
5-
hidden: true
5+
hidden: false
66
---
77

88
## 1. Enable RUM
99

10-
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**.
10+
To enable Real User Monitoring (RUM) instrumentation for your application, you need to add the Open Telemetry Javascript [**https://github.com/signalfx/splunk-otel-js-web**](https://github.com/signalfx/splunk-otel-js-web) snippet in the web pages.
1111

12-
Your instructor will inform you which token to use from the dropdown, click **Next**. Enter **App name** and **Environment** using the following syntax:
12+
The Spring PetClinic application uses a single HTML page as the "index" 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.
13+
For our workshop we will use the following snippet to the **HEAD** section of the index.html page to achieve the desired integration
1314

14-
- `<INSTANCE>-petclinic-service` - replacing `<INSTANCE>` with the value you noted down earlier.
15-
- `<INSTANCE>-petclinic-env` - replacing `<INSTANCE>` with the value you noted down earlier.
15+
``` html
16+
<script src="env.js"></script>
17+
<script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js" crossorigin="anonymous"></script>
18+
<script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web-session-recorder.js" crossorigin="anonymous"></script>
19+
<script>
20+
var realm = env.RUM_REALM;
21+
console.log('Realm:', realm);
22+
var auth = env.RUM_AUTH;
23+
var appName = env.RUM_APP_NAME;
24+
var environmentName = env.RUM_ENVIRONMENT
25+
if (realm && auth) {
26+
window.SplunkRum && window.SplunkRum.init({
27+
beaconUrl: 'https://rum-ingest.' + realm + '.signalfx.com/v1/rum',
28+
rumAuth: auth,
29+
app: appName,
30+
version: '1',
31+
environment: environmentName
32+
33+
});
34+
SplunkSessionRecorder.init({
35+
beaconUrl: 'https://rum-ingest.' + realm + '.signalfx.com/v1/rumreplay',
36+
rumAuth: auth
37+
});
38+
const Provider = SplunkRum.provider;
39+
var tracer=Provider.getTracer('appModuleLoader');
40+
} else {
41+
// Realm or auth is empty, provide default values or skip initialization
42+
console.log("Realm or auth is empty. Skipping SplunkRum initialization.");
43+
}
44+
</script>
45+
```
1646

17-
The wizard will then show a snippet of HTML code that needs to be placed at the top of the pages in the `<head>` section. The following is an example of the (do not use this snippet, use the one generated by the wizard):
47+
To speed up the workshop we already added the snippet to the code in the Repo you have downloaded earlier, and you already have a build that includes this snippet when rebuild all the services in the previous exercise
1848

19-
``` html
20-
/*
21-
22-
IMPORTANT: Replace the <version> placeholder in the src URL with a
23-
version from https://github.com/signalfx/splunk-otel-js-web/releases
24-
25-
*/
26-
<script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js" crossorigin="anonymous"></script>
27-
<script>
28-
SplunkRum.init({
29-
realm: "eu0",
30-
rumAccessToken: "<redacted>",
31-
applicationName: "petclinic-1be0-petclinic-service",
32-
deploymentEnvironment: "petclinic-1be0-petclinic-env"
33-
});
34-
</script>
49+
If you want you can verify the snippet we added to the index.html by viewing the file:
50+
51+
{{< tabs >}}
52+
{{% tab title="view index.html [esc q to quit]" %}}
53+
54+
``` bash
55+
view ~/spring-petclinic-microservices/spring-petclinic-api-gateway/src/main/resources/static/index.html
3556
```
3657

37-
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.
58+
{{% /tab %}}
59+
{{< /tabs >}}
60+
61+
Note, that we also include a env.js file, this contains/sets the variables used by the integration to the desired values, right now they are empty so the integration isn't loaded. and no Rum traces are sent to splunk..
62+
63+
Lets set the
64+
65+
So, let's run the script that will update variables to the right value so we will see RUM traces in the Splunk Observability Suite RUM UI:
3866

39-
Let's then edit the layout page:
67+
{{< tabs >}}
68+
{{% tab title="Update env.js for RUM" %}}
4069

41-
```bash
42-
vi src/main/resources/templates/fragments/layout.html
70+
``` bash
71+
. ~/workshop/petclinic/scripts/push_env.sh
4372
```
4473

45-
Next, insert the snippet we generated above in the `<head>` section of the page. Make sure you don't include the comment and replace `<version>` in the source URL to `latest` e.g.
46-
47-
```html
48-
<!doctype html>
49-
<html th:fragment="layout (template, menu)">
50-
51-
<head>
52-
<script src="https://cdn.signalfx.com/o11y-gdi-rum/latest/splunk-otel-web.js" crossorigin="anonymous"></script>
53-
<script>
54-
SplunkRum.init({
55-
realm: "eu0",
56-
rumAccessToken: "<redacted>",
57-
applicationName: "petclinic-1be0-petclinic-service",
58-
deploymentEnvironment: "petclinic-1be0-petclinic-env"
59-
});
60-
</script>
61-
...
74+
{{% /tab %}}
75+
{{% tab title=" Output" %}}
76+
77+
```text
78+
Repository directory exists.
79+
JavaScript file generated at: /home/splunk/spring-petclinic-microservices/spring-petclinic-api-gateway/src/main/resources/static/scripts/env.js
6280
```
6381

64-
## 2. Rebuild PetClinic
82+
{{% /tab %}}
83+
{{< /tabs >}}
6584

66-
With the code changes complete, we need to rebuild the application and run it again. Run the `maven` command to compile/build/package PetClinic:
85+
now to verify if the env.js has been created correctly lets review the file
86+
{{< tabs >}}
87+
{{% tab title="cat env.js" %}}
6788

68-
```bash
69-
./mvnw package -Dmaven.test.skip=true
89+
``` bash
90+
cat ~/spring-petclinic-microservices/spring-petclinic-api-gateway/src/main/resources/static/scripts/env.js
7091
```
7192

72-
```bash
73-
java \
74-
-Dserver.port=8083 \
75-
-Dotel.service.name=$INSTANCE-petclinic-service \
76-
-Dotel.resource.attributes=deployment.environment=$INSTANCE-petclinic-env,version=0.314 \
77-
-jar target/spring-petclinic-*.jar --spring.profiles.active=mysql
93+
{{% /tab %}}
94+
{{% tab title=" Output" %}}
95+
96+
97+
env = {
98+
RUM_REALM: 'eu0',
99+
RUM_AUTH: '[redacted]',
100+
RUM_APP_NAME: 'ph-zeroconf-dev-eu0-1-1-store',
101+
RUM_ENVIRONMENT: 'ph-zeroconf-dev-eu0-1-1-workshop'
102+
}
78103
```
79104
80-
Then let's visit the application using a browser to generate real-user traffic `http://<IP_ADDRESS>:8083`.
105+
{{% /tab %}}
106+
{{< /tabs >}}
107+
108+
109+
Now restart the api-serveic
110+
111+
```text
112+
kubctl whatever to restart the container..
113+
```
81114

82115
In RUM, filter down into the environment as defined in the RUM snippet above and click through to the dashboard.
83116

‎content/en/conf24/_index.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
title: Conf24 Workshops
33
menuPost: " <i class='fa fa-user-ninja'></i>"
44
weight: 20
5-
hidden: true
5+
hidden: false
6+
draft: true
67
---
78

89
{{% children containerstyle="ul" style="li" depth="1" description="true" %}}

‎workshop/petclinic/scripts/push_env.sh‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@ if [ -d "$REPO_DIR" ]; then
1515
# Write the content to the JavaScript file
1616
cat <<EOF > "$JS_FILE"
1717
env = {
18-
RUM_REALM: '$RUM_REALM',
19-
RUM_AUTH: '$RUM_AUTH',
20-
RUM_APP_NAME: '$RUM_APP_NAME',
21-
RUM_ENVIRONMENT: '$RUM_ENVIRONMENT'
18+
RUM_REALM: '$REALM',
19+
RUM_AUTH: '$RUM_TOKEN',
20+
RUM_APP_NAME: '$INSTANCE-store',
21+
RUM_ENVIRONMENT: '$INSTANCE-workshop'
2222
}
2323
EOF
2424

0 commit comments

Comments
 (0)