Handle JavaScript errors via Typeform

It is a frustrating experience for users when there is a JavaScript error in your web application and it blocks their experience. Usually they have nowhere to report it. You can’t expect your user to go in the developer console and share the error with you.

Usually you would use a tool like Sentry or Rollbar to catch and report errors. Those tools improve developer experience, however we should also think about user experience — and there is a way to make it more pleasant. What if when your users experience an error, we display a typeform to collect additional feedback from the user?

Photo by Elisa Ventur on Unsplash

In this article, we will build a typeform for user feedback and embed it in a web page. The typeform will display only when an error occurs. This will improve your user experience and provide additional information on what happened. You can even follow up with your users on their issues or tell them when they are resolved.

Handling errors

You can catch any JavaScript errors in your page using a code like this:

window.addEventListener("error", (event) => {
  // your code here
});

We could trigger an error by calling a non-existing method to test the previous code. Let’s add a button that triggers an error:

<button onclick="foo()">click</button>

You will see the error in your browser console:

Error. Error. Does not compute 🤖

This allows you to log the error or display a friendly user message explaining the issue that just occurred.

Build the typeform

We need to build a form to gather feedback from your user. They can tell you what they were doing when the error occurred.

I have decided to add three hidden fields to my form:

• name — for user’s name (if available)
• email — for user’s email (if available)
• error — message from the JavaScript error that occurred

We can use the hidden fields name and email to follow up with the user. If the values are not set, the typeform will ask them to enter those values, but only if they agree to be contacted with a follow-up on the error.

I will also store the error message in the error hidden field. It provides more context when reviewing the report. I have also decided to display the JavaScript error message in my typeform, but you might want to avoid it as it usually makes little sense to non-technical users.

My typeform logic looks like this:

Error handling typeform logic

The form will:

• Greet the user by their name (if it’s present in the hidden field)
• Ask for additional feedback on what they were doing when the error occurred
• Ask to contact them with a follow up on the error.
• Collect name and email if they agree to be contacted (and we do not know this info already from hidden fields)

You can find my form here: https://form.typeform.com/to/KlAIU54T

The form is also available as a template, click here to copy it to your workspace. You can use it as a base for your own form or even reuse it as-is.

Put it all together

To embed the form into your website you will need to use Typeform Embed SDK. You can either install it as a dependency (via yarn or npm) or link to it from CDN.

Now, all we need to do is display the typeform on error:

window.addEventListener("error", (event) => {
  const { open } = window.tf.createPopup('KlAIU54T', {
    hidden: {
      name: user?.name,    // if available
      email: user?.email,  // if available
      error: event.message
    },
  })

  open()
});

When there is a JavaScript error on your page, it will show the following popup:

There was an error and we want to know more 💡

Your users can now provide additional feedback on their actions when an error happens. It shows that you care about their experience, even if it was not ideal.

See it in action

💡 See the live example here:

Static HTML Demo

📖 Source code is available in my Github repo:

typeform-embed/error-handling.html at main · mathio/typeform-embed

Next steps

Typeform is not a sufficient solution for handling error reports on its own. You should use a tool like Sentry or Rollbar to catch and report errors. Tools like that improve developer experience, however adding a typeform to your page could also improve the user experience.

Cheers to another issue successfully handled 🍻🤓

Do you have any questions or improvements to the solution above? Let me know on Twitter @mathio28.