How 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?

The common ways to show error messages in Javascript are:

  1. By default, error messages will show up in the developer’s console. In most major browsers, press F12 > console.
  2. We can also use console.error("MESSAGE") or console.log("MESSAGE") to manually output messages in the developer’s console.
  3. Use try { CODE } catch (err) { alert(err); } to show the error message a dialog box.
  4. Lastly, create custom error notifications in HTML.
    • <div id="errmsg"></div>
    • try { CODE }
    • catch (err) { document.getElementById("errmsg").innerHTML = err; }

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

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

REAL QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes Error Messages Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

DISPLAY ERROR MESSAGES

All right, let us now get into the various ways to display error messages in Javascript.

 

1) DEVELOPER’S CONSOLE

1-console.html
<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

2-alert.html
<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

3-html.html
<!-- (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 background instead? That’s something for you to think about.

 

USEFUL BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

 

INFOGRAPHIC CHEAT SHEET

Display Error Messages In Javascript (Click To Enlarge)

 

LINKS & REFERENCES

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *