Skip to main content
Sumo Logic

Collect Traces from a Browser

The Sumo Logic OpenTelemetry auto-instrumentation for JavaScript library enables tracing in the browser. It can gather information about the load, execution, and rendering of your JavaScript applications and create traces on browser-to-database performance of every user transaction in real time, without sampling. This data is gathered directly from your end-user devices and displayed as individual spans, starting with each trace reflecting its request journey from the client throughout the whole application and back. All data collected is compatible with OpenTelemetry and doesn't use proprietary vendor code.

The full list of functionalities is available in the Sumo Logic OpenTelemetry auto-instrumentation for JavaScript README file.

Collect traces

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

Create an HTTP Traces Source

To configure an HTTP Traces Source:

  1. In the Sumo Logic web interface, select Manage Data > Collection > Collection

  2. On the Collection page, click Add Source next to a Hosted Collector.

  3. Select HTTP Traces

    http traces.png

  4. Enter a Name for the Source. A description is optional.

    traces for browser 1.png

  5. (Optional) For Source Host and Source Category, 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.

  6. When you are finished configuring the Source click Save.
  7. The HTTP Source Address is displayed in a pop-up, copy the URL. You'll need to provide it in the script you set up in the next section, instrument your web application.

    http trace url displayed.png

Edit and use the following script in your page head, with the <head></head> tags. The script sends trace data in OTLP/HTTP format.

<script
  src="https://cdn-service.<deployment>.sumologic.com/ui/js/thirdparty/sumologic-opentelemetry.js"
  data-collection-source-url="<sumo_logic_http_traces_source_url>"
  data-service-name="<name_of_your_web_service>"
  data-application-name="<app_name>"
>
 

  1. You need to replace <deployment> with aucadeeuinjp, us2, or blank for us1 based on the deployment your account is on. See endpoints for more information. For example, https://cdn-service.us2.sumologic.com/ui/js/thirdparty/sumologic-opentelemetry.js or https://cdn-service.sumologic.com/ui/js/thirdparty/sumologic-opentelemetry.js for us1.

    Your browser should be allowed to download from this domain.
  2. Replace <sumo_logic_http_traces_source_url> with the HTTP Traces Source URL you copied in step 8 above.

    • Within the endpoint URL you copied you also have to make a minor change. The hostname needs to be modified from collectors to rum-collectors.

      For example, if your URL is: 
          https://collectors.us2.sumologic.com/receiver/v1/trace/xxxxxxx

Change collectors to rum-collectors like:
    https://rum-collectors.us2.sumologic.com/receiver/v1/trace/xxxxxxx

Your browser should be allowed to POST data to this URL.

  1. Replace <name_of_your_web_service> with any text you want to appear as the service name in the spans. For example, "Bookings web frontend".

  2. (Recommended) If you use application name tags, specify the following in your script to ensure consistent tagging with your browser data:

data-application-name="<app_name>"

Where <app_name> is the name of your application used for backend spans. 

  1. (Optional) You can specify sampling for heavy traffic sites. For example, 10% would be added to the script as:

data-sampling-probability=0.1

  1. A table with all the available configuration parameters is available in the Sumo Logic OpenTelemetry auto-instrumentation for JavaScript README file. For example, you can exclude URLs from collection with the data attribute data-ignore-urls.

Search traces from the browser

Create a trace query that specifies traces starting with the value you gave to <name_of_your_web_service> as a root service name.