Real User Monitoring

Browser RUM Workshop

This example shows a browser->front->back end tracing example app running on a Mac (can be run on Windows).
The browser will call a frontend service which then calls a backend gateway service, and the RUM session trace ID will be propagated, showing front-to-back tracing.
The browser session RUM trace will be sent directly to Coralogix, and the locally hosted Node frontend/backend apps will send trace spans through the localhost OpenTelemetry collector to Coralogix.
Logs will be printed to the console and not collected by the collector in this example—the focus is on tracing.

Step 1 - Setup

Clone the repository:

git clone https://github.com/coralogix/workshops

Step 2 - Install and run an OpenTelemetry Collector on your Mac (Can work for Windows as well)

Start a new terminal - this must be run in a dedicated terminal (see screenshot below).

Navigate to the otelcol directory:

cd ./workshops/workshops/rum/otelcol

Download a current release of the contrib OpenTelemetry Collector for your Mac (Apple Silicon are the darwin_arm releases):
Download OpenTelemetry Collector

Configure the Coralogix Exporter in otel-config.yaml with your Coralogix key and domain and then start the OpenTelemetry Collector:

./source start-otelcol.sh

Step 3 - Execute the RUM workshop

Start a new terminal - this must be run in a dedicated terminal (see screenshot below).
Ensure current Node.js and npm are installed.

Add Coralogix RUM integration:

Modify src/index.js and add:

CoralogixRum.init({
   public_key: 'YOURKEY',
   application: 'YOURAPPNAME',
   version: 'YOURVERSION',
   coralogixDomain: 'YOURCORALOGIXDOMAIN',
   traceParentInHeader: {
      enabled: true,
      options: {
         propagateTraceHeaderCorsUrls: [new RegExp('.*')],
      },
   },
});

Set up node packages:
```
source 1-setup-node.sh
```
Package files using webpack:
```
source 2-webpack.sh
```
Start the node backend gateway service:
```
source 3-node-backend.sh
```
Start the node frontend service:
```
source 4-node-frontend.sh
```

Your screen should now look like the screenshot below, with the OpenTelemetry Collector in one terminal, the backend in another, and the frontend in another:

RUM Workshop Terminal Setup

Open web browser to exercise RUM sessions
- Open a browser to http://localhost:3000.
- Try each option on the page to exercise RUM trace examples.
Study the results in Coralogix
- Web browser RUM trace - notice the traceID:
- Backend gateway service - the traceID is the same as the web browser RUM session ID, demonstrating front-to-back tracing:
Optional: Clean up Node packages and webpack artifacts:
```
source 5-cleanup.sh
```

Mobile

Step 1 - Setup

Clone the repository:

git clone https://github.com/coralogix/workshops

Step 2 - Change to the workshop directory

Navigate to the proper directory for the workshop example:

cd ./workshops/workshops/mobilerum

Step 3 - The Workshops

The following examples are currently available:
- React Native
- iOS: Swift, UIKit

Mobile RUM Workshop: iOS

When using this workshop, ensure that the Coralogix Package Dependencies are updated: right-click on them and select update.

Follow the Coralogix SDK instructions and update the environment variable stanza according to your environment:

let options = CoralogixExporterOptions(
    coralogixDomain: CoralogixDomain.US2, // Set the Coralogix domain
    userContext: nil,                     // No user context provided
    environment: "PROD",                  // Environment set to production
    application: "CX-Demo-Swift",         // Name of the application
    version: "1",                         // Application version
    publicKey: "",                        // Public key for authentication
    ignoreUrls: [],                       // List of URLs to ignore
    ignoreErrors: [],                     // List of errors to ignore
    customDomainUrl: nil,                 // Custom domain URL (if any)
    labels: ["test": "example"],          // Additional labels for the RUM data
    debug: true                           // Debug mode enabled
)

Each project should build and run on an iPhone emulator (15 Pro Max was tested) and emit telemetry to the Coralogix RUM platform.

Step 4 - Using the Demo App

There are three current example tests on the demo app:
- Network requests: Will send user session data while the app is running.
- Exception: Will crash the app with an exception. Stop Xcode and then run the app in the emulator so the app restarts and instrumentation sends crash analytics to Coralogix.
- Crash: Similar to the exception above—crashes the app, stop Xcode, and re-run the app to send analytics.

React Native Workshop

Follow the instructions in the repo directory:
React Native Workshop