“Site doesn’t work”; “The app is broken for me.” “Page used to load but now something weird is happening.” Sound familiar? Ambiguous customer feedback can be a big challenge, and a huge time sink, for many startups. The common response to these complaints is another request - for browser version, operating system, where they were on the site, what they were doing, etc. Many of these requests never get a reply back, leading a startup team to wonder if the situation was a one-off or if they’re dealing with a serious problem they’re unaware of. There are many technologies that try to close the gap, including real user monitoring, observability tools, screen recording software, and Javascript error catching platforms. But oftentimes, the data isn’t good enough - it’s either aggregated and doesn’t refer back to the specific customer or can be cumbersome to get through the noise to understand what a real issue might be. Worse, most tools in these categories are expensive, and could run you in the $100s of dollars a month. On our platform, we recently launched a new Spider Solitaire and Hearts game. We started getting these same ambiguous bug reports - like the ones I referred to above. However, instead of subscribing to one of the many tools out there, we did something that cost us nothing and was very effective. What we did: Log console errors Attach them to the customer support form Profit Log console errors In our tag, we added the following script: <head> <script type=”text/javascript”> consoleErrors = []; { {
          consoleErrors.push([e.error.stack, e.lineno, e.timeStamp]);        
        } (e) {}
      }; .addEventListener( , logError); var ( ) function logError e try catch window "error" </ > script What that does is log all the errors, including stack traces, line numbers, and timestamps that occur on the user’s javascript console when they’re on the site. The beauty of this is that in most cases, the problem a user encounters also manifests itself as a javascript error (especially these days, when heavy-duty frontend applications are the norm). Attach errors to the contact us form Then, when a user writes in, we attach the object to the form. (Note, uses jQuery). <form id= > <input id= type= name= required= > <input id= type= name= required= > <textarea id= name= rows= > <input id= type= name= > <input type="submit" value="Send">
</form> <script type=”text/javascript”>
  $('#contactForm').on('submit', function(e) {
    e.preventDefault();
    let payload = {
      email: $('#email').val(),
      name: $('#name').val(),
      comments: $('#comments').val(),
      documentUrl: location.href,
      errors: consoleErrors,
    };
    $.post('/contact', payload, function(resp) {
      $('#contactSuccess').html('Contact form sent.').show();
    });
    window.setTimeout(function() { $('#contactModal').modal('hide')}, 1000);
    return false;
  });
<script> "contactForm" Your email address < = > label for "email" </ > label "email" "email" "email" "true" Your name < = > label for "name" </ > label "name" "text" "name" "true" Description < = > label for "comments" </ > label "comments" "comments" "3" </ > textarea "documentUrl" "hidden" "documentUrl" < = = = > input id "console" type "hidden" name "console" Profit You’ll note that in the example above, it is assumed that the contact us form is a modal that appears on the page, which prevents the site from reloading and therefore losing the object. However, if you need to send a user to another page, you can store the error output in local storage and retrieve it when you need to. logErrors That’s all! Then the next time someone writes in concerned about an issue, you’ll have the specific stack trace they are referring to right in the email.

Trace

Debug User Complaints Better by Logging Errors in Support Requests

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Do Hiring Managers Value Side Projects?

#10 Rules of Bug Bounty

The Noonification: Do Leaders Really Need Emotional Intelligence? (10/14/2022)

3 Web Design Factors to Ponder Before Starting an E-commerce Venture

5 Common Web Development Mistakes and How to Avoid Them

Do Hiring Managers Value Side Projects?

#10 Rules of Bug Bounty

The Noonification: Do Leaders Really Need Emotional Intelligence? (10/14/2022)

3 Web Design Factors to Ponder Before Starting an E-commerce Venture

5 Common Web Development Mistakes and How to Avoid Them

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps