beautiful and helpful error reporting during underscore template rendering

Author: geoffp

lib/engine_underscore.js

@@ -21,26 +21,28 @@
 "use strict";
 
 var _ = require('underscore');
+
 var partialRegistry = {};
 var errorStyling = `
 <style>
-  body {
+  .plError {
     background: linear-gradient(to bottom, #f1f1f1 0%,#ffffff 60%);
     color: #444;
     padding: 30px;
   }
-  h1 {
+  .plError h1 {
     font-size: 16pt;
     color: #733;
     background: #fcfcfc;
     border-bottom: 1px solid rgba(0, 0, 0, 0.05);
     padding: 17px 30px;
     margin: -30px -30px 0 -30px;
   }
-  dt { font-weight: bold; }
+  .plError dt { font-weight: bold; }
 </style>
 `;
 
+
 // extend underscore with partial-ing methods and other necessary tooling
 // HANDLESCORE! UNDERBARS!
 
@@ -110,23 +112,21 @@ var engine_underscore = {
     // such will throw very real exceptions that will shatter the whole build
     // process if we don't handle them.
     try {
-      // console.log('got here for pattern', pattern.patternName, pattern.extendedTemplate);
-      // console.log('testing:', _.template('<%- foo %>')({foo: 'bar'}));
-      // console.log('data:', data);
       renderedHTML = compiled(_.extend(data || {}, {
         _allData: data,
         _partials: partials
       }));
     } catch (e) {
       var errorMessage = `Error rendering underscore pattern "${pattern.patternName}" (${pattern.relPath}): [${e.toString()}]`;
       console.log(errorMessage);
-      renderedHTML = `${errorStyling}
+      renderedHTML = `${errorStyling} <div class="plError">
 <h1>Error rendering underscore pattern "${pattern.patternName}"</h1>
 <dl>
-<dt>Message</dt><dd>${e.toString()}</dd>
-<dt>Partial name</dt><dd>${pattern.patternName}</dd>
-<dt>Template path</dt><dd>${pattern.relPath}</dd>
+  <dt>Message</dt><dd>${e.toString()}</dd>
+  <dt>Partial name</dt><dd>${pattern.patternName}</dd>
+  <dt>Template path</dt><dd>${pattern.relPath}</dd>
 </dl>
+</div>
 `;
     }