User Action and Error Screenshots

Overview

User action screenshots enable you to capture a wide range of user actions, including clicks, page views, form submissions, and other engagement metrics. Additionally, you can capture and store screenshots to document the exact moment an error occurs within a software application or system, or based on custom logic triggers you define. Use the screenshots to provide crucial context for diagnosing and troubleshooting issues by capturing the state of the application, user interactions, and relevant error messages at the time of the failure.

Features

Visual context: Screenshots may include screenshots of the application interface, showing the exact state when the error occurred, helping developers understand the user’s experience.
Operation modes: Choose between an automatic or a manually triggered screenshot.
Environment details: Information about the environment where the error occurred or a user action taken can be included, aiding in reproducing the issue. These are:
- Description
- Timestamp
- User email
- App version
- Page fragment

Benefits

Faster troubleshooting: By providing a comprehensive view of the context, screenshots help developers quickly identify and resolve issues, reducing downtime.
Improved documentation: Screenshots serve as a useful record for future reference, helping teams track recurring issues and their resolutions.
Enhanced user insights and support: Support teams can use screenshots to better understand behavior patterns and preferences, capture user-reported issues, leading to more effective communication and quicker resolutions.

How it works

SDK

The UI screenshots are a part of the RUM browser SDK, which allows for:

Instrumentation: Manually instrument the screen screenshot function.
Sampling: Specify the desired sample rate for the screenshots.
Trigger function: Trigger the screenshot in a custom manner using a provided function.

Coralogix UI

You can access screenshots and their details through the Error Tracking (Errors and Templates) tab in the RUM section of the UI. Additionally, each User Session shows the total number of screenshots captured, with the option to view them in detail.

Prerequisites

Ensure that these URLs are allowed in your Content Security Policy (CSP). Then, select the domain associated with your Coralogix account.

CSP URL

Script Source (script-src) https://cdnjs.cloudflare.com/ajax/libs/pako/

Connect Source (connect-src) https://ingress.<eu1 | eu2 | us1 | us2 | ap1 | ap2>.rum-ingress-coralogix.com
The screenshots are a subset of session recordings and share the same configurations, including settings such as masking, sample rate, and others. Enable session recording (sessionRecordingConfig) to start capturing screenshots.

CoralogixRum.init({
  // ...
  sessionRecordingConfig: {
    enable: true,
    // ...
  },
});

Configuration

Activate manual screenshots. Once enabled, the system takes a single screenshot.

CoralogixRum.screenshot();
// or with a description
CoralogixRum.screenshot('Screenshot after the user logged in');

Alternatively, configure automatic screenshot capture based on custom logic by using the beforeSend function.

CoralogixRum.init({
  // ...
  beforeSend: (event) => {
    // ...
    // automatically take a screenshot when an error occurs and append the screenshot ID to the event
    if (event.event_context.type === 'error' && event.session_context.user_name === 'CEO') {
      const id = CoralogixRum.screenshot('creating a screenshot due to an error!');
      event.screenshotId = id;
    }

    return event;
  },
});

Accessing screenshots in Coralogix UI

In the Corlagix UI, go to RUM > Error Tracking > Errors or Templates.

A camera icon on a template row signifies that screenshot(s) have been stored.
Click the camera icon to view the stored screenshot.
Review the screenshot information: timestamp, user email, app version and the relevant section of the Coralogix UI. If needed, enter description of the screenshot.
Click See Log to display the error logs.
Click the ellipsis (...) to open the Actions menu and select the following options:
- Copy - Copies a drilldown link of the error, its query or template ID.
- Explore - Displays error analytics, associated log, or user sessions.
- Add to Investigation - Attaches the screen capture to a current, new, or other investigation.
- Create Alert - Opens the alert creation panel, enabling you to initiate an alert based on the error.
- Error - Displays the Error Tracking page, providing details about the error that served as the source for the screenshot.
- Trace - Displays the Traces page to view traces of the network error.
- User Session - Accesses the user’s own session to view additional actions that were performed.
- User Replay - A recording of the user session where the error was detected.
You can also view the screenshots by navigating to RUM > User Sessions.

A camera icon on a session row signifies that screenshot(s) have been stored.
Click the camera icon to view the stored screenshot(s).

Support

Need help?

Our world-class customer success team is available 24/7 to walk you through your setup and answer any questions that may come up.

Feel free to reach out to us via our in-app chat or by sending us an email to [email protected].

User Measurements

Next RUM Saved Views

CSP	URL
Script Source (script-src)	`https://cdnjs.cloudflare.com/ajax/libs/pako/`
Connect Source (connect-src)	`https://ingress.<eu1 \| eu2 \| us1 \| us2 \| ap1 \| ap2>.rum-ingress-coralogix.com`