--- title: Improved Error Handling in DoneJS description: DoneJS has recently added improved error messaging to several of its projects. Read on about our philosophy on errors and see how they can improve your development workflow. image: https://www.bitovi.com/hubfs/bulb-card-close-up-1083626.jpg --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com March 27, 2018 # Improved Error Handling in DoneJS DoneJS has recently added improved error messaging to several of its projects. Read on about our philosophy on errors and see how they can improve your development workflow. ![The Bitovi Team](https://www.bitovi.com/hubfs/TheBitoviTeam%20(1).png) The Bitovi Team Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) [DoneJS](https://donejs.com) now features improved error handling and messaging for those on [donejs](https://donejs.com/Guide.html)[@2](https://donejs.com/Guide.html). In recent weeks we have added: - A formatted error page highlighting what went wrong thanks to [donejs-error-format](https://github.com/donejs/donejs-error-format). - The ability for done-serve to recover from just about any error while preserving [hot module replacement](https://donejs.com/Features.html#hot-module-swapping). - Code snippets in error messages that show where the problem occured. - Links to documentation explaining each error in greater detail. This video shows off the incredible developer experience we are striving for in DoneJS (make fullscreen to get a better view):   The [DoneJS](https://donejs.com/) homepage talks about *usability*, *performance*, and *maintainability* as being the cornerstones of the framework. In version 1 we put a strong focus on performance; in version 2, we are now looking towards maintainability. With CanJS 4.0, we started to place more emphasis on the debugging experience. [can.queues.logStack()](https://canjs.com/doc/can-queues.logStack.html) and [can-debug](https://canjs.com/doc/can-debug.html) combined provide insight into how data and events cause changes throughout an application. Recently we have extended this emphasis to other tools in our suite: [steal](https://stealjs.com/) (module loading and bundling), [done-ssr](https://github.com/donejs/done-ssr) (server-side rendering), and [done-serve](https://github.com/donejs/done-serve) (development server). Because DoneJS is a full-stack framework, we can provide a holistic development experience. With the [Improved Error Messages and Handling proposal](https://github.com/donejs/donejs/issues/1073) we set out to fix 2 things: - Make done-serve more resilient to errors and bad application state. - Revisit how we structure error messages for greater clarity. In this article I'll go over what we did and where we want to take things from here. ## The Importance of Good Errors Writing good error messages can be difficult to do for a variety of reasons, including that errors are often unanticipated events. (hopefully). If a library doesn't have good error messages it might be because they are focused on steering you in the right direction before errors occur. In DoneJS we have traditionally put an emphasis on guides as a way of teaching developers how to use our libraries. When you start developing your own application you tend to run into things that guides don't teach you, and that's where API documentation comes in. Error messages should be a bridge between a developer's use of a library and deeper understanding of advanced concepts. The idea being that error messages should not only help you fix your immediate problem but also guide you towards a better understanding of the framework. A good error message should follow the [Five Ws](https://en.wikipedia.org/wiki/Five_Ws) (with *how* replacing *when*). Here's an example of a new error message in [steal-less](https://github.com/stealjs/steal-less/releases/tag/v1.3.0): ![](https://lh6.googleusercontent.com/z7bDCQ4HS1cn70z9MYNS8HYJ2Z4skLN6fyMIsaF4egEpJIZmf0tjZmf-sf-evLSbD3c87-loNjLrptiwJL7oB9lTw_SvxQLl38w0N8CbDD44QnVYbKOeRKo1URbzwNStMoj9y-ut)   It tells you: - **What** occurred - A stylesheet could not be fetched. - **Who** was involved - *not-exists.less* in the code frame. - **Where** the error occurs - The stack trace points to main.less line 2. - **Why** the error might have occurred - Perhaps the file hasn't been saved yet, and therefore isn't present on disk, or perhaps the path is incorrect in the parent stylesheet. - **How** this error can be avoided - by linking to documentation on [stealjs.com](https://stealjs.com/docs/index.html) that explains how paths are resolved in steal. All of these parts are important, but I especially like the **why**. Errors are helpful for teaching, but we all will encounter errors from time to time and providing suggestions on how to fix the problem helps speed up development workflow. DoneJS is in a unique position to answer the why because it is involved from the moment files are created through testing out their functionality. For this cycle we worked on almost a dozen different error scenarios to improve the messaging. Most of these came in Steal, as loading modules is common source of errors. Here are a few of the highlights: ### Missing Files (404s) This was the first error I worked on and it's an error that everyone encounters. The error looks like this now: ![](https://lh3.googleusercontent.com/mxDHGK6YN2aQuBdaMQY-R4A8SpSkb953uqtqlKpkmrbUa7NG99mkIbvMovrmyVwcOtCgO29Z4TFoxSJ4V4HVM4cTXYAwdqShxpalrWHqRxosh93oJGcujSUzZwmBKw1JB6oKSXqo)   When I started working on it, it looked like this: ![](https://lh4.googleusercontent.com/tTzg8dwnIkY7CL_hEcFnshKnokKlzjVb06fWgvforQhu3nOhTzPUkor-IEtniC-fuZcwR3sUSY_PjJofSyVawOtsjlF4ZSlXJ8VksvQhPhm00eXNwrT0gW9n7WHhmjrAnji7MiyI)   So to improve this I wanted to: - Remove the steal.js stack trace, replacing it with the line in the parent module that was importing the missing module. - Create a page on stealjs.com that documents [this particular error message](https://stealjs.com/docs/StealJS.error-messages.html#404-not-found) and gives some hints at what could be the problem. - Show a snippet of the code where the error takes place. For small issues like typos this becomes quickly apparent, making for a quick fix. This error message works with plugins that provide the right metadata. Here's [steal-stache](https://github.com/canjs/steal-stache) providing an error that points to the [can-import](https://github.com/canjs/can-view-import) that imports the missing file: ![](https://lh3.googleusercontent.com/b1tXxQS7tddRIF1rvuPEIgUNqJctSb4EIVXmnMQQ9OtYzjONyutbddlymTC5dhyl8PErzCxDnuLh-dI2-_4UacmkkkY1uZ6iRRw87ndMAZAUzPX4en62y-Q0esqqKkyBVHw3e4Xn) ### Syntax Errors Since this is such a common category of mistake we wanted to clean these up as much as possible. In addition to CommonJS and ES modules, we also improved JSON syntax errors. Here's a case where a property isn't wrapped in double quotes: ![](https://lh5.googleusercontent.com/u82txHAo9Y8GRlpcuIE0BEaM2nsiP4RBNp1PdvHP8LcT383yc4jDY-guI7820BB30MMgKWBTcyhM_RWnG9iKss7pJelRHSJhYDk9FrQtBmn3K_-x0eoCIEMS8qGM7JicgkScqPnt)   The stack trace at the bottom shows that the error occurs in config.json, line 5. ## Error Handling in done-serve In development, done-ssr is connected to hot module swapping just as the browser is. In the browser you can reset things very easily by refreshing. But this is more cumbersome to do with the server; you have to kill it and restart. This meant we needed to make done-ssr more resilient to errors so that it could fix itself once code was corrected. We felt the best workflow would be: - You run donejs develop and the server starts, connecting to a HMR (hot module replacement) server. - An error occurs (maybe one of the ones listed in the section above) and the server remembers this error and renders HTML for it. - Once an error occurs, the server will continue to render the error page until fixed. - Once fixed, the server's state is restored; HMR refreshes the browser to a working state. To achieve this, we had to add some new [APIs to steal](https://github.com/stealjs/steal/releases/tag/v1.9.0) to provide errors that occur during HMR, and create a library for formatting error messages. The video at the top of this article shows off the workflow and how everything comes together. If you are not using done-serve, you can still get the nicely formatted error messages by using [donejs-error-format](https://github.com/donejs/donejs-error-format). If you are using express, your code most likely will look like: ``` const express = require("express"); const errorFormat = require("donejs-error-format"); const ssr = require("done-ssr-middleware"); const app = express(); app.use(express.static(__dirname + "/public")); app.use(ssr({ config: __dirname + "/package.json!npm" })); // The last middleware should be the error handler app.use(function(error, request, response, next) { let parts = errorFormat.extract(error); let html = errorFormat.html(parts); console.error(error); response.type("html").end(html); }); ``` ## Next Steps Now that the infrastructure is in place, we'll continue to improve error messages and provide more consistency across projects. We're also looking into ways to provide tighter integration with DoneJS projects so you could do things like write error messages with inferred links instead of hardcoded URLs. We're continuing to explore these types of integration points. We want feedback on these sorts of things, so please [file an issue](https://github.com/donejs/donejs/issues) with your ideas. [![Tag for canjs](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) canjs ](https://www.bitovi.com/blog/topic/canjs)[![Tag for stealjs](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) stealjs ](https://www.bitovi.com/blog/topic/stealjs)[![Tag for donejs](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) donejs ](https://www.bitovi.com/blog/topic/donejs) Previous Post ![banner-donejs-release](https://www.bitovi.com/hs-fs/hubfs/banner-donejs-release.jpg?height=117&name=banner-donejs-release.jpg) [ DoneJS 2.0 Released ](https://www.bitovi.com/blog/donejs-2.0)   Next Post ![discovery-launch-liftoff-23764](https://www.bitovi.com/hs-fs/hubfs/discovery-launch-liftoff-23764.jpg?height=117&name=discovery-launch-liftoff-23764.jpg) [ March 2018 DoneJS Community Update ](https://www.bitovi.com/blog/march-2018-donejs-community-update) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/donejs-error-handling", "@type" : "WebPage", "description" : "DoneJS has recently added improved error messaging to several of its projects. Read on about our philosophy on errors and see how they can improve your development workflow." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "The Bitovi Team" }, "dateModified" : "March 27, 2018, 4:51:24 PM", "datePublished" : "2018-03-27 16:36:23", "description" : "DoneJS has recently added improved error messaging to several of its projects. Read on about our philosophy on errors and see how they can improve your development workflow.", "headline" : "Improved Error Handling in DoneJS", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bulb-card-close-up-1083626.jpg" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```