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.

Install

If you are installing RUM with Next.js, skip to the following Next.js section.

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.

HTML
<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: "1" is the default value and records the entire user session. To track only browser traces and errors set recording: "0".

JavaScript
<script>
    if (window.Middleware){
        Middleware.track({
            serviceName: "service_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.

JavaScript
if(window.Middleware){
...
defaultAttributes: { 
    name: 'John Doe', 
    email: 'john@email.com', 
    user_type: 'admin', // it can be key value pairs
}
}

If you need to define attributes post initialization of the SDK, utilize the Middleware.setAttributes method, as exemplified in the following example.

The .setAttributes method must be called after the .track method in Step 3.
JavaScript
<script>
if(window.Middleware){
        Middleware.setAttributes({
            name: 'John Doe',
            email: 'john@email.com',
            user_type: 'admin',
        })
    }
</script>

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.

Step 5: Add Custom Logs [Optional]

Use these functions to keep track of different types of issues in your system, making it easier to monitor and fix problems.

JavaScript
<script>
if(window.Middleware){
    Middleware.error("Your error message")
    Middleware.error(new Error("Your error message"))
    Middleware.info("info message")
    Middleware.warn("warn message")
    Middleware.debug("debug message")
    }
</script>

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. Learn more about B3 Propagation here.

You must have a Middleware APM Agent installed in order to use the tracing feature. Install a Middleware APM here.

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.

For more information about using RUM, head to the RUM Workflow page.

Supported APMs

LanguageSupportedAPM VersionEnvironment 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✖️✖️

Troubleshooting

Need assistance or want to learn more about Middleware? Contact us at support[at]middleware.io.