This article continues the OpenTelemetry with Elastic Observability article, covering “How to set up the OpenTelemetry demo with Elastic Observability” using Docker Compose or Kubernetes.

Elastic real user monitoring, or RUM, captures user interactions with the web browser and provides a detailed view of the “real user experience” of your web applications from a performance perspective.

Elastic’s RUM Agent is a JavaScript Agent, which means it supports any JavaScript-based application. RUM can provide valuable insight into your applications.

Benefits of RUM (Real User Monitoring)
RUM performance data can help you identify bottlenecks and discover how site performance issues affect your visitors’ experience
User-agent information captured by RUM enables you to identify the browsers, devices, and platforms most used by your customers so that you can make informed optimizations to your application
Along with location information, individual user performance data from RUM helps you understand the regional performance of your website worldwide
RUM provides insight and measurement for your application’s service level agreements (SLA)
RUM gathers information on customer visits and clicks behavior over time that can be useful for development teams to identify the impact of new features.

We will cover step-by-step mechanisms for enabling RUM(Real User Monitoring) in the application and then monitor it in Elasticsearch Observability.

Download and Install the application from Github Repo either on Docker or Kubernetes and configure it as described in OpenTelemetry with Elastic Observability.

Once the application is up and running, Go to Your deployment → Integration→APM →RumJS→copy configuration as seen in below image.
Copy the below configuration settings for setting up the Agent as a dependency.

You can install the Agent as a dependency on your application with

npm install @elastic/apm-rum --save

The Agent can then be initialized and configured in your application like below. Refer to the integration documentation for more details.

Alternatively, copy the below configuration settings for setting up the Agent with Script Tags.

Now we will configure the frontend application with these settings to RUM.

Navigate to your application service folder(opentelemetry-demo/src/frontend/Dockerfile) and update the docker file with

RUN npm install @elastic/apm-rum --save

Navigate to the application(frontend) service folder (opentelemetry-demo/src/frontend/pages/_app.tsx) and update the configuration for RUM.
You can customize the service name and environment parameters.

//CONFIGURE RUM AGENT
import { init as initApm } from '@elastic/apm-rum';
if (typeof window !== 'undefined'){
   initApm({
       serviceName: 'otel-frontend',    
       serverUrl: '<url>',
       serviceVersion: '',
       environment: 'demo'
   });
}

Service name: It represents your application in the APM UI.

Service version: This is the version of your application. This version number is also used by the APM server to find the right source map.

Server URL: This is the APM server URL. Note that the APM server URL is normally accessible from the public internet because your RUM agent reports data to it from end-user browsers on the internet.

environment: This is helpful in a shared environment where multiple users are accessing for better filtering.
Login to Kibana and then navigate to the User Experience section of Observability and analyze the RUM data and play around with the available metrics.

Reference:

https://www.linkedin.com/pulse/opentelemetry-elastic-observability-rahul-ranjan-3l6bc/

https://opentelemetry.io/docs/demo/

https://www.elastic.co/guide/en/observability/8.14/apm-configuration-rum.html