Browser RUM - ReactJS

Install

When using ReactJS, you have direct access to the index.html or template HTML file. You must define the structure of your RUM application with one of the following methods:

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.

Add User Information

To gather user details add key-value pairs, as shown below. Any user metadata can be defined as a key-value pair. You can add this details once Middleware sdk is initialized. You can write the following code in react component after the user has logged in.

Once RUM is configured, metrics should begin appearing on the RUM Dashboard in Middleware within a few minutes.

Add Custom Logs

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

Distributed 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.

Modify Middleware script

Add tracePropagationTargets to your SDK from the RUM Installation page. The tracePropagationTargets value must be in regex format.

The Middleware JavaScript client is by default configured with all headers. You can change your headers by adding tracePropagationFormat to change the headers to w3c or b3.

Need assistance or want to learn more about Middleware? Contact our support team at [email protected].