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.

<script
  src="https://cdnjs.middleware.io/browser/libs/0.0.2/middleware-rum.min.js"
  type="text/javascript"
  crossorigin="anonymous"
></script>

<script>
  if (window.Middleware)
  {Middleware.track({
    projectName: "my-application",

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.

useEffect(() => {
  if (window.Middleware) {
    window.Middleware.setAttributes({
      name: "John Doe",
      email: "[email protected]",
      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.

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.

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");
}

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.

Modify Middleware script

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

<script>
  if (window.Middleware)
  {
    Middleware.track({
      projectName: "mw-application"
      serviceName: "my-application",
      accountKey: "<account-key>",
      target: "https://<UID>.middleware.io",
      env: "production",
      tracePropagationTargets: [/localhost:3000/i, /api.domain.com/i],