Skip to main content

Configuring RUM Data Collection

To collect traces from a browser, you'll first need to create a RUM HTTP Traces Source. The source will have an endpoint URL that you'll put in a script that sends trace data in OTLP/JSON over HTTP protocol.

Prerequisites

XHR and navigation/route changes support as well as errors collection require RUM script in version 4 or higher (https://rum.sumologic.com/sumologic-rum-v4.js). Make sure you're using the correct version in your pages. For automatic updates, use https://rum.sumologic.com/sumologic-rum.js.

For full end-to-end visibility, we recommended supplementing your RUM browser auto-instrumentation with the appropriate back-end tracing instrumentation.

Step 1: Create a RUM HTTP Traces Source

To configure a RUM HTTP Traces source:

  1. From Sumo Logic, select Manage Data > Collection > Collection

  2. If you've not yet created a Hosted Collector, follow these steps to do so.

  3. On the Collection page, click Add Source next to a Hosted Collector.
    add source

  4. Select RUM HTTP Traces.
    Real User Monitoring

  5. Under Source Type: RUM HTTP Traces, enter the following information:

    • Name for the Source.
    • Description. (Optional) description of the Source .
    • Source Host and Source Category. (Optional) Enter any string to tag the output collected from the source. These are built-in metadata fields that allow you to organize your data. We recommend you specify a Source Category indicating the data is from a browser.
      Real User Monitoring
  6. Enter Advanced options for Browser RUM. A list of FAQs on the page can provide help for these options. A table with all the available configuration parameters is available in the Sumo Logic OpenTelemetry auto-instrumentation for JavaScript README file.
    Real User Monitoring

    • Application Name. (Recommended) Add an Application Name tag of a text string to show for the app name in spans (for example, bookings-app). This groups services in the Application Service View. If left blank, services will belong to a "default" application. See Application Service Dashboards for more information. This setting is saved in the script for name_of_your_web_application.
    • Service Name. ( Required) Add a Service Name of a text string to show for the service name in spans (for example, bookings-web-app). This setting is saved in the script for name_of_your_web_service.

      To set up a service name dynamically (e.g., to have different service names for micro-frontend packages), leverage the getOverriddenServiceName function inside your page code to overwrite the default service name (requires RUM script v4.2.0 or higher). Service names should be of low cardinality and should describe parts of your website above page level. Here's an example code leveraging that function:
         window.sumoLogicOpenTelemetryRum.initialize({
    collectionSourceUrl:
    'https://service.sumologic.com/receiver/v1/rum/token==',
    serviceName: 'online-shop-frontend',
    applicationName: 'online-shop',
    getOverriddenServiceName: (span) => {
    const pathname = document.location.pathname;

    if (pathname.startsWith('/carts/')) {
    return 'online-shop-frontend-carts'
    }
    return 'online-shop-frontend-main'
    }
    });
    • Probabilistic sampling rate (optional): Add a Probabilistic sampling rate for heavy traffic sites in a decimal value based on percentage, for example, 10% would be entered as 0.1.

    • Ignore urls (optional): Add a list of URLs not to collect trace data from. Supports regex. For example: /^https:\/\/www.tracker.com\/.*/, /^https:\/\/api.mydomain.com\/log\/.*/. Please make sure provided URLs are valid JavaScript flavor regexes.

    • Custom Tags (optional): Click +Add and enter a key and value for each Custom Tags to show in spans from instrumented browsers. For example, click +Add and enter a key deployment.environment with a value of production. This information is saved in the script for name_of_your_web_service.

    • Propagate Trace Header Cors Urls (recommended): Add a list of URLs or URL patterns that pass tracing context to construct traces end-to-end. This information is saved in the script for list_of_urls_to_receive_trace_context. Some examples are /^https:\/\/api.mydomain.com\/apiv3\/.*/ and /^https:\/\/www.3rdparty.com\/.*/.. Please make sure provided URLs are valid JavaScript flavor regexes.

      Propagate Trace Header Cors Urls

      Sumo Logic cannot perform configuration validation of services of other origins. You should always enable context propagation and CORS configuration changes in a test environment before setting it up in production.

      Click here to review our recommendations

      This list is empty by default, which means trace context propagationallowing creation of end to and front end to backend traces for cross-origin requestsis not enabled because of browser CORS security restrictions. To connect your front-end and back-end traces, make sure your environment supports W3C Trace Context HTTP headers.

      To propagate tracing context to create front-end to back-end traces, set domain(s) to propagate W3C tracing context to. You must also configure your servers/APIs to accept and return following CORS headers in its response:

      Access-Control-Allow-Headers: traceparent, tracestate

      Valid cross-origin resources must include the prefix http:// or https:// and the domain name. The port number is not required unless it differs from the default for HTTP (port 80) or HTTPS (port 443).

    • Geolocation recognition: Select a Geolocation recognition option to automatically recognize geographical locations of your end clients from:

      • The country down to state (recommended for global websites)
      • A single country down to city level (recommended for local, country specific websites)
  7. When you are finished configuring the Source, click Submit.

  8. An HTTP Source Script is displayed in a pop-up with three different formats: synchronous, asynchronous, and npm. These are examples of scripts you can use with all configurations you entered when creating the source, including advanced options. Select a format and click Copy to Clipboard.
    Real User Monitoring

    The script includes a RUM HTTP Traces Source URL for collectionSourceUrl in the generated script. This is saved for the script as sumo_logic_http_traces_source_url. Your user's browser should be allowed to POST data to this URL.

    This can be also replaced with an internal OpenTelemetry collector if you wish to redirect browser traffic over it. In this case, replace this URL with the OpenTelemetry collector OTLP/HTTP receiver endpoint as described in Getting Started with Transaction Tracing. In this case, the OpenTelemetry collector exporter will send data to the RUM HTTP Traces Source URL.

Step 2: Add Script to Your Page Header

Use the copied script in your page head inside the <head> </head> tags. The script sends trace data in OTLP/JSON over HTTP protocol. The following are base script examples, populated when you create and configure a source in the above instructions.

<script src="https://rum.sumologic.com/sumologic-rum-v3.js" type="text/javascript"></script>
<script>
window.sumoLogicOpenTelemetryRum &&
window.sumoLogicOpenTelemetryRum.initialize({
collectionSourceUrl: 'sumo_logic_traces_collector_source_url',
serviceName: 'name_of_your_web_service',
propagateTraceHeaderCorsUrls: [
'list_of_domains_to_receive_trace_context',
],
});
</script>

The above script examples omit the version number and automatically uses most up-to-date version of it (which you can find here). If you want to manually control versioning of the script, please use:

RUM scripts can be also wrapped in the form of a browser extension/plugin for monitoring SaaS applications in environments where you can control user browser configuration (e.g., internal employees). To obtain a customized browser extension for your environment to monitor Real User Experience with Sumo Logic, contact your Account Team or Sumo Logic support.

tip

You can view and copy a script anytime by clicking Show Script for the source.
show-script.png

Legal
Privacy Statement
Terms of Use

Copyright © 2023 by Sumo Logic, Inc.