Better 404 Error Messages in DoneJS

Steal 1.7.0 introduces improved error messages when we encounter a 404.

Previously you would see an error like this:

Now, instead, you will see this:

Notice in the old error message the stack trace contained a lot of steal.js code that is unrelated to your code. Most of what is shown in that stack trace is from the Promise polyfill that steal.js includes, it’s not even relevant if you were debugging Steal!

In the improved error message we wanted to really highlight what the problem was so we added:

  • A message explaining what has happened with a link to some documentation about this error.
  • A block of code showing where the error occurred. Here we see that import './file-missing'; is the line where we are importing a module that isn’t in our file system.
  • In the (smaller) stack trace it includes a link to that same file that contains the import.

The hope is that this is enough information to aid you in figuring out what is going on. Often this as simple as a typo. Seeing the code inline will make those cases immediately evident.

Plugin integration

In DoneJS apps code is not loaded just from JavaScript modules, but also from stache using can-import. Steal 1.7.0 provides an API from which plugins can provide the line numbers where errors occur so that we can show the inline code correctly.

done-autorender, steal-stache, and done-component have already been updated. If you find another plugin that could use this integration, let us know!

done-autorender

The improved error messaging is available in done-autorender 2.1.0.

done-component

done-component includes it in 2.1.0 as well:

steal-stache

The improved errors are available in steal-stache 4.1.0:

Next steps

These error messages are part of the improve error messaging epic that was the top voted item in the most recent DoneJS Community Survey.

We will continue to add more improved error messages within steal in the next few weeks. This will include:

  • Errors when parsing JSON.
  • Errors when a package.json is missing required fields (like the main).
  • Errors when you forget to save a package in your package.json.
  • Syntax errors within source files.

And more! If you have specific errors that you’d like to see improve, please comment in the issue.

5 Likes