Track JavaScript errors

Tracking JavaScript errors helps you spot all kinds of JavaScript errors on your website, even if, at first sight, everything looks correct. This can help you identify and handle all the errors faster and without much trouble.

You can set up tracking for JavaScript errors in two ways: (1) turn on automatic tracking and (2) set up manual tracking. You can use both methods at the same time because the manual one gives you additional information about errors.

Turn on automatic tracking for JavaScript errors

Note: This option is turned on by default. Collected data are saved as custom events, and they are counted as actions in your plan. So when you use this option, you’ll likely increase the number of tracked actions in a month. Just note that each detected JavaScript error is counted once per page view, even if the visitor clicks on a broken element many times.

To turn on automatic JavaScript tracking, follow these steps:

  1. Go to Menu > Tag Manager.
  2. Navigate to Tags.
  3. On the left, click Piwik PRO (tracking code).
  4. Scroll down to the UX issues.
  5. Check Detect JavaScript errors.
    Option to track JS errors in Piwik PRO
  6. Click Save.
  7. Click Publish.
  8. Once data is collected, you’ll see the errors in the custom event report under Analytics > Reports > Custom events
    Option to track JS errors in Piwik PRO
  9. Custom events for JavaScript errors record data in the following way:
    • Event category: JavaScript Errors
    • Event action: The URL of the failed script
    • Event name: Error details

    Tip: If you want to know which element caused the error, you need to use the manual tracking for error clicks (described below). It’s worth using both methods to have all the details.

Set up manual tracking for JavaScript errors

To set up manual tracking for JavaScript errors, follow these steps:

  1. Here’s the code that you’ll use:
    <script>
      (function() {
        "use strict";
        var getSelectorFromTarget = function(target) {var className = target.className !== "" ? "." + target.className : "";var targetId = target.id !== "" ? "#" + target.id : "";return [target.nodeName, className, targetId].join(" ")};
        var detectErrorClicks = function(subscribe) {var error;window.onerror = function(msg) {error = msg};var listener = function(event) {var selector = getSelectorFromTarget(event.target);setTimeout((function() {if (error) {subscribe(selector, error, (function() {document.removeEventListener("click", listener)}))}error = undefined}), 0)};document.addEventListener("click", listener)};
    
        detectErrorClicks(function(target, error, unsubscribe) {
          console.log('Error detected:', error);
          window._paq.push(['trackEvent', 'UX research', 'Error click', target]);
          // unsubscribe(); // Uncomment this line when you want to finish after first trigger
        });
      })();
    </script>

    In this code, you can change the following line:

    • console.log('Error detected:', error);

    and custom event parameters:

    •   window._paq.push(['trackEvent', 'UX research', 'Error click', target]);
  2. Go to Menu > Tag Manager.
  3. Navigate to Tags.
  4. Click Add a tag.
  5. Name the tag, for example Error clicks, and select the following type: Custom code (async).
  6. Click Next.
  7. In Tag code, paste the code prepared in step 1.
    Error clicks in Piwik PRO
  8. In Advanced tag settings > Consent type, select the following type: Analytics.
    Error clicks in Piwik PRO

    Note: Set it up if you use a consent form on your site. This tag will fire only for visitors who accept the selected consent type.

  9. In Tag triggers, click Choose existing trigger.
  10. Select All page views and click OK.
  11. Click OK to save the tag.
  12. Test your tag in debug mode.
  13. When you’re happy with how the tag works, click Publish.

To set up reporting for error clicks, follow these steps:

  1. Go to Menu > Analytics.
  2. Navigate to Custom reports.
  3. Create a custom report with the following setup:
    • Report type: Flat table
    • Dimensions: Page URL, Custom event action, Custom event name
    • Metrics: Events
    • Filter: Custom event category is UX research
    Error clicks in Piwik PRO
  4. Click Create a report.
    Error clicks in Piwik PRO

    Note: This setup works both for mobile and desktop devices.

Was this article helpful?

Technical support

If you still have some questions, visit our community.
There’s always someone ready to help!

Back to help center