Skip to main content

Reports

Go to personal account

Functionality for collecting errors and creating comprehensive reports on your website.

Image with report example

Overview​

Using an embeddable script, users and QA engineers can easily show where the bug is hiding, and you can get debug information and immediately start fixing it.

Setup

To do this, create a project and connect the script to your site.

Service structure​

Inside the Reports service there are Projects, it is assumed that you create a separate project for each of your sites. Projects are separated by a unique captureKey. Inside projects, reports you create with screenshots and video recordings will appear.

Installation​

Place the code on the HTML page before the closing <head> tag:

<!-- tuna. Screen and user actions recording -->
<script>
    window.reportOptions = {
        captureKey: "YOUR_CAPTURE_KEY"
    };
</script>
<script src="https://reports.tuna.am/latest/index.js" async></script>

Replace YOUR_CAPTURE_KEY with yours from the desired project.

Calling the script to create a report​

There are several ways to create a report:

  • Hotkeys
  • Button (data attribute)
  • Call from code (JS)
  • URL argument

Hotkeys​

Use the key combination

CTRL + ALT + S

Button click​

Call the report creation form by adding a button with a data attribute:

<button data-report-trigger>
    Report an error
</button>

Call from code​

Call the report creation form from your code by adding the command:

if (typeof window.autoCapture !== 'undefined'
    && window.autoCapture.showCaptureModal) {
    window.autoCapture.showCaptureModal();
}

URL argument​

Call the report creation form by adding the argument report=true to the URL in the address bar.

https://example.com/dashboard?report=true

Request to create a report with screen recording​

If you want the user to record a report for you not from the site, but to demonstrate the problem on their workstation, then you can create a link with a request for screen recording.

By following the link, the user will be able to record a video for you and tell you about the problem.

What does a report look like?​

Inside the report you will find a screenshot or video and all the debugging information from the console, network operations, user actions and a snapshot of the page DOM tree.

The first tab contains general summary information about the client, device and browser.

Report visibility​

By default, a report is created with visibility - For team members only, but you can make it public. For example, to conduct a dialogue with a client who created a report.