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

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.
   

   

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. 
   

   

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.
   

   

8. In Advanced tag settings > Consent type, select the following type: Analytics.
   

   

   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

   

4. Click Create a report.
   

   

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