Track JavaScript errors

JavaScript error tracking helps you to find all kinds of JavaScript errors on your website, even if everything looks correct at first glance. This can help you identify and handle any errors more quickly and easily.

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

Turn on automatic JavaScript error tracking

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 UX issues.
5. Turn on Detect JavaScript errors.

   

6. Click Save.
7. Click Publish.
8. Done! Once data is collected, it’ll appear in Analytics > Reports > Custom events. 

   

   Note: JavaScript errors are recorded in the following way:

   • Event category: JavaScript Errors
   • Event action: The URL of the failed script
   • Event name: Error details

   Tip: To find out which element caused the error, use manual tracking for error clicks. Using both methods gives you all the details you need.

Set up manual JavaScript error tracking

To set up manual JavaScript error tracking, 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>

   Parameters
   
   console.log(‘Error detected:’, error);
   
   window._paq.push([‘trackEvent’, ‘UX research’, ‘Error click’, target]);
   Custom event details.

2. Go to Menu > Tag Manager.
3. Navigate to Tags.
4. Click Add a tag.
5. Name the tag (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 only fire for visitors who accept the selected consent type.

9. In Tag triggers, click Choose existing trigger.
10. Select All page views and click Save.
11. Click Save to save the tag.
12. Test your tag in debug mode.
13. When you’re happy with how the tag works, click Publish.
14. In the next steps, you’ll need to set up reporting for error clicks.
15. Go to Menu > Analytics.
16. Navigate to Custom reports.
17. Create a custom report with the following setup:
    • Report type: Table
    • Dimensions: Page URL, Custom event action, Custom event name
    • Metrics: Events
    • Filter: Custom event category is UX research

    

18. Click Save.
19. All done!

    

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