Installing RUM
Overview
Middleware Real User Monitoring (RUM) provides insights into your application or website through detailed data on user interactions and frontend performance. With real-time data on page load times, errors, and more you can quickly identify and resolve performance issues to improve user experience and engagement. Check out the video below for more information.

Prerequisites
JavaScript-based web application (mobile apps not currently supported)
Install
This guide walks you through setting up Real User Monitoring (RUM) with JavaScript. These instructions can also be found on the Installation page in your Middleware Account.
Step 1: Create Application Reference
Navigate to the Installation page in your Middleware Account. In the Real User Monitoring section, select Create New Application
and provide the application name, origin(s) and Trace Propogation Target(s) to whitelist. Multiple origins can be listed as a comma-separated list.
Step 2: Import Javascript CDN
Add the following script tag to the head section of your index.html file. The tag can be copied directly from the Installation page upon completing Step 1.
<script src="https://cdnjs.middleware.io/browser/libs/0.0.1/middleware-rum.min.js" type="text/javascript"></script>
Step 3: Initialize the SDK
Add the following lines in your index.html file below the script tag entered in Step 2. We recommend copying directly from the Installation page; select the appropriate Application from the list and copy the code snippet. The window.Middleware
attribute is set in the script from Step 2.
In the example below, env and recording are optional. Recording set to 1 is the default value and records the entire user session. To track only browser traces and errors set recording to 0.
<script>
if (window.Middleware){
Middleware.track({
serviceName: "service_name",
projectName: "project_name",
accountKey: "account_key",
target:"https://<UID>.middleware.io",
env: "production",
recording: "1"
})
}
</script>
Step 4: Add User Information [optional]
To gather user details add key-value pairs, as shown below. Any user metadata can be defined as a key-value pair.
if(window.Middleware){
...
defaultAttributes: {
name: 'John Doe',
email: 'john@email.com',
user_type: 'admin', // it can be key value pairs
}
}
Once RUM is configured, metrics should begin appearing on the RUM Dashboard in Middleware within a few minutes. For more information on the RUM Dashboards see here.
Connect RUM to Tracing
RUM Tracing allows you to gain insight into the specific actions of your users. You can watch time-stamped videos of user’s website interactions, pinpoint performance bottlenecks across your platform, and identify the major causes of customer drop off.
The following installation uses OpenTelemetry B3 Propagator heads. You can learn more about B3 Propagation here.
Install
Step 1: Modify Middleware SDK
Add tracePropagationTargets
to your SDK from Step 3 of the RUM Installation.
<script>
if (window.Middleware){
Middleware.track({
serviceName: "service_name",
projectName: "project_name",
accountKey: "account_key",
target:"https://<UID>.middleware.io",
env: "production",
recording: "1"
tracePropagationTargets: [/localhost:3000/i, /api.domain.com/i]
})
}
</script>
Step 2: Modify APM SDK
In order to enable Trace Propagation, some languages require the OTEL_PROPAGATORS=b3
environment variable. Those languages are called out in the table below. All other langugages will work with the standard APM install.
Supported APMs
Language | Supported | APM Version | Environment Variable |
Cloudflare | ✖️ | ✖️ | ✖️ |
Go | ✅ | >= 1.1.100 | ✖️ |
Java | ✅ | ✖️ | ✅ |
.NET | ✅ | ✖️ | ✅ |
Next.js | ✅ | ✖️ | ✖️ |
Node.js | ✅ | >= 1.2.5 | ✖️ |
PHP | ✖️ | ✖️ | ✖️ |
Python | ✅ | >= 0.3.2 | ✖️ |
Ruby | ✅ | >= 2.1.0 | ✅ |
Vercel | ✅ | ✖️ | ✖️ |
Access RUM From Trace List
To access your Session Replay data, navigate to the APM section, select the Trace List tab and choose a trace to view your data.

Was this page helpful?