“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
<head><script type=”text/javascript”>
var consoleErrors = [];
function logError(e) {
try {
consoleErrors.push([e.error.stack, e.lineno, e.timeStamp]);
} catch (e) {}
};
window.addEventListener("error", logError);
</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="contactForm">
<label for="email">Your email address</label>
<input id="email" type="email" name="email" required="true">
<label for="name">Your name</label>
<input id="name" type="text" name="name" required="true">
<label for="comments">Description</label>
<textarea id="comments" name="comments" rows="3"></textarea>
<input id="documentUrl" type="hidden" name="documentUrl">
<input id="console" type="hidden" name="console">
<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>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
logErrorsThat’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.