3 Ways To Display Error Messages In Javascript (Simple Examples)

Welcome to a quick tutorial on how to display error messages in Javascript. Just started with Javascript and wondering where the error messages went? Or looking for ways to better deal with error notifications?

That covers the basic idea, but read on for detailed examples!

 

 

TLDR – QUICK SLIDES

[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-display-error-messages-in-javascript/” title=”How To Display Error Messages In Javascript” poster=”https://code-boxx.com/wp-content/uploads/2021/11/STORY-JS-20230518.webp” width=”360″ height=”600″ align=”center”]

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

1) DEVELOPER’S CONSOLE

<script>
function condemo () {
  // (A) CONSOLE LOG - OUTPUT TEXT OR VARIABLE IN CONSOLE
  var foo = "bar";
  console.log(foo);

  // (B) CONSOLE TABLE - OUTPUT ARRAY OR OBJECT IN TABLE FORM
  var colors = ["red", "green", "blue"];
  console.table(colors);

  // (C) CONSOLE ERROR - OUTPUT AN ERROR MESSAGE
  try {
    doesNotExist();
  } catch (err) {
    console.error(err);
  }
}
</script>
 
<button onclick="condemo()">
  Open developer's console and click on this
</button>

If you do not know the developer’s console, you are missing out too much. The developer’s console is the best place to show error messages, without scaring the “normal users” away. Here are 3 common console functions to know:

• console.log() will simply output a line or message into the developer’s console.
• console.table() outputs an array or object in a nice legible table form.
• console.error() outputs an error message.

 

 

2) ERROR ALERT

<script>
function doalert () {
  try {
    doesNotExist();
  } catch (err) {
    alert(err);
  }
}
</script>

<input type="button" value="Error Alert" onclick="doalert();">

Once upon a time in the Stone Age of the Internet, there is no such thing as a “developer’s console”. To do troubleshooting, we wrap entire code segments in a try-catch block and alert() the error message… It still works, but this is kind of an outdated method now.

 

 

3) HTML ERROR MESSAGE

<!-- (A) THE CSS -->
<style>
#err {
  display: none;
  background: #f54242;
  border: 1px solid #bd1717;
  padding: 5px;
  margin: 5px;
  color: #fff;
  font-weight: bold;
}
</style>
 
<!-- (B) THE HTML -->
<div id="err"></div>
<input type="button" value="Test Error" onclick="dohtml()">
 
<!-- (C) JAVASCRIPT -->
<script>
function dohtml () {
  try {
    doesNotExist();
  } catch (err) {
    let notify = document.getElementById("err");
    notify.innerHTML = err;
    notify.style.display = "block";
  }
}
</script>

Lastly, here is how we display the error message in HTML.

• Create an “HTML error container” – <div id="err">.
• When the error happens, get the HTML container – let notify = document.getElementById("err").
• “Push” the error message into the container – notify.innerHTML = err;

 

 

SHOWING ERROR MESSAGES – DOES IT MAKE SENSE?

Now that you know how to show error messages and notifications, one last question remains – Which one makes sense? Consider this, if you show Uncaught TypeError: Cannot read property 'addEventListener' of null to a “normal user”, that will scare them off instead.

Wouldn’t it be better to show a generic “an error has occurred” to the user, but capture the actual error message in the developer’s console instead? That’s something for you to think about.

 

 

INFOGRAPHIC CHEAT SHEET

 

LINKS & REFERENCES

• Console – MDN
• Interaction: alert, prompt, confirm – Javascript.info
• Introduction to the DOM – MDN
• How To Debug Javascript – A Very Simple Guide – Code Boxx
• Very Simple Popup In Vanilla CSS & Javascript – Code Boxx