Add global error handling, compiled Jade templates for index and erro…

…r pages
kriasoft · Mar 1, 2016 · e188388 · e188388
1 parent 4d62b4f
commit e188388
Show file tree

Hide file tree

Showing 7 changed files with 123 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -5,8 +5,8 @@
     "npm": ">=3.3 <4"
   },
   "dependencies": {
-    "babel-polyfill": "6.5.0",
-    "babel-runtime": "6.5.0",
+    "babel-polyfill": "6.6.1",
+    "babel-runtime": "6.6.1",
     "bluebird": "3.3.3",
     "body-parser": "1.15.0",
     "classnames": "2.2.3",
@@ -24,12 +24,13 @@
     "isomorphic-style-loader": "0.0.10",
     "jade": "1.11.0",
     "jsonwebtoken": "5.7.0",
-    "markdown-it": "^6.0.0",
+    "markdown-it": "6.0.0",
     "node-fetch": "1.3.3",
     "normalize.css": "3.0.3",
     "passport": "0.3.2",
     "passport-facebook": "2.1.0",
     "pg": "4.5.1",
+    "pretty-error": "2.0.0",
     "react": "0.14.7",
     "react-dom": "0.14.7",
     "react-routing": "0.0.7",
@@ -39,16 +40,16 @@
   "devDependencies": {
     "assets-webpack-plugin": "^3.3.0",
     "autoprefixer": "^6.3.3",
-    "babel-cli": "^6.5.1",
+    "babel-cli": "^6.6.0",
     "babel-eslint": "^5.0.0",
     "babel-loader": "^6.2.4",
     "babel-plugin-react-transform": "^2.0.0",
-    "babel-plugin-transform-runtime": "^6.5.2",
-    "babel-preset-es2015": "^6.5.0",
+    "babel-plugin-transform-runtime": "^6.6.0",
+    "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-0": "^6.5.0",
     "browser-sync": "^2.11.1",
-    "core-js": "^2.1.1",
+    "core-js": "^2.1.3",
     "css-loader": "^0.23.1",
     "csscomb": "^3.1.8",
     "del": "^2.2.0",
@@ -61,15 +62,16 @@
     "gaze": "^0.5.2",
     "git-repository": "^0.1.1",
     "glob": "^7.0.0",
+    "jade-loader": "^0.8.0",
     "jest-cli": "^0.8.2",
     "jscs": "^2.10.1",
     "json-loader": "^0.5.4",
     "mkdirp": "^0.5.1",
     "ncp": "^2.0.0",
-    "postcss": "^5.0.17",
+    "postcss": "^5.0.18",
     "postcss-import": "^8.0.2",
     "postcss-loader": "^0.8.1",
-    "postcss-scss": "^0.1.5",
+    "postcss-scss": "^0.1.6",
     "precss": "^1.4.0",
     "raw-loader": "^0.5.1",
     "react-transform-catch-errors": "^1.0.2",

diff --git a/src/components/Html/Html.js b/src/components/Html/Html.js
diff --git a/src/components/Html/package.json b/src/components/Html/package.json
diff --git a/src/server.js b/src/server.js
@@ -15,14 +15,13 @@ import bodyParser from 'body-parser';
 import expressJwt from 'express-jwt';
 import expressGraphQL from 'express-graphql';
 import jwt from 'jsonwebtoken';
-import React from 'react';
 import ReactDOM from 'react-dom/server';
+import PrettyError from 'pretty-error';
 import passport from './core/passport';
 import schema from './data/schema';
 import Router from './routes';
-import Html from './components/Html';
 import assets from './assets';
-import { port, auth } from './config';
+import { port, auth, analytics } from './config';
 
 const server = global.server = express();
 
@@ -82,7 +81,13 @@ server.use('/graphql', expressGraphQL(req => ({
 server.get('*', async (req, res, next) => {
   try {
     let statusCode = 200;
+    const template = require('./views/index.jade');
     const data = { title: '', description: '', css: '', body: '', entry: assets.main.js };
+
+    if (process.env.NODE_ENV === 'production') {
+      data.trackingId = analytics.google.trackingId;
+    }
+
     const css = [];
     const context = {
       insertCss: styles => css.push(styles._getCss()),
@@ -96,13 +101,31 @@ server.get('*', async (req, res, next) => {
       data.css = css.join('');
     });
 
-    const html = ReactDOM.renderToStaticMarkup(<Html {...data} />);
-    res.status(statusCode).send(`<!doctype html>\n${html}`);
+    res.status(statusCode);
+    res.send(template(data));
   } catch (err) {
     next(err);
   }
 });
 
+//
+// Error handling
+// -----------------------------------------------------------------------------
+const pe = new PrettyError();
+pe.skipNodeFiles();
+pe.skipPackage('express');
+
+server.use((err, req, res, next) => { // eslint-disable-line no-unused-vars
+  console.log(pe.render(err)); // eslint-disable-line no-console
+  const template = require('./views/error.jade');
+  const statusCode = err.status || 500;
+  res.status(statusCode);
+  res.send(template({
+    message: err.message,
+    stack: process.env.NODE_ENV === 'production' ? '' : err.stack,
+  }));
+});
+
 //
 // Launch the server
 // -----------------------------------------------------------------------------

diff --git a/src/views/error.jade b/src/views/error.jade
@@ -0,0 +1,63 @@
+doctype html
+html(lang="en")
+  head
+    meta(charset="utf-8")
+    title Internal Server Error
+    meta(name="viewport", content="width=device-width, initial-scale=1")
+    style.
+
+      * {
+        line-height: 1.2;
+        margin: 0;
+      }
+
+      html {
+        color: #888;
+        display: table;
+        font-family: sans-serif;
+        height: 100%;
+        text-align: center;
+        width: 100%;
+      }
+
+      body {
+        display: table-cell;
+        vertical-align: middle;
+        margin: 2em auto;
+      }
+
+      h1 {
+        color: #555;
+        font-size: 2em;
+        font-weight: 400;
+      }
+
+      p {
+        margin: 0 auto;
+        width: 280px;
+      }
+
+      pre {
+        text-align: left;
+        max-width: 1000px;
+        margin: 0 auto;
+      }
+
+      @media only screen and (max-width: 280px) {
+
+        body, p {
+          width: 95%;
+        }
+
+        h1 {
+          font-size: 1.5em;
+          margin: 0 0 0.3em;
+        }
+
+      }
+
+  body
+    h1 Internal Server Error
+    p Sorry, something went wrong.
+    pre= stack
+// IE needs 512+ bytes: http://blogs.msdn.com/b/ieinternals/archive/2010/08/19/http-error-pages-in-internet-explorer.aspx
diff --git a/src/views/index.jade b/src/views/index.jade
@@ -0,0 +1,18 @@
+doctype html
+html(class="no-js", lang="")
+  head
+    meta(charset="utf-8")
+    meta(http-equiv="x-ua-compatible", content="ie=edge")
+    title= title
+    meta(name="description", description=description)
+    meta(name="viewport", content="width=device-width, initial-scale=1")
+    link(rel="apple-touch-icon", href="apple-touch-icon.png")
+    style#css!= css
+  body
+    #app!= body
+    script(src=entry)
+    script.
+      window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
+      ga('create','#{trackingId}','auto');ga('send','pageview')
+    if trackingId
+      script(src="https://www.google-analytics.com/analytics.js", async=true, defer=true)
diff --git a/tools/webpack.config.js b/tools/webpack.config.js
@@ -92,6 +92,9 @@ const config = {
       }, {
         test: /\.(eot|ttf|wav|mp3)$/,
         loader: 'file-loader',
+      }, {
+        test: /\.jade$/,
+        loader: 'jade-loader',
       },
     ],
   },