Adding error handling 500 page

NickHeiner · Aug 13, 2016 · 53c9a33 · 53c9a33
1 parent a704004
commit 53c9a33
Show file tree

Hide file tree

Showing 8 changed files with 211 additions and 177 deletions.
diff --git a/app/fitbit-export.js b/app/fitbit-export.js
@@ -23,7 +23,7 @@ app.use(connect.session({secret: getConfig(app).sessionSecret}));
 app.use(passport.initialize());
 app.use(passport.session());
 
-app.get('/', function(req, res){
+app.get('/', function(req, res, next) {
     var userPath = ['session', 'passport', 'user'],
         traverseReq = traverse(req),
         userExists = traverseReq.has(userPath),
@@ -58,6 +58,13 @@ app.use('/static', express.static(path.join(__dirname, '..', 'static')));
 
 app.get('/export.csv', exportCsv);
 
+app.use((err, req, res, next) => {
+    if (err) {
+        res.status(500);
+        res.render('error.ejs', {err});
+    }
+});
+
 // https://github.com/visionmedia/express/pull/2165
 app.set('views', path.join(__dirname, '..', 'views'));
 app.set('view engine', require('ejs'));

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "fitbit-export",
-  "version": "1.2.8",
+  "version": "1.2.9",
   "description": "A webapp to make exporting fitbit data easier",
   "main": "app/fitbit-export",
   "scripts": {
@@ -38,7 +38,7 @@
   "dependencies": {
     "autotrack": "^0.6.4",
     "connect": "^2.30.2",
-    "ejs": "^1.0.0",
+    "ejs": "^2.5.1",
     "express": "^4.13.4",
     "i": "^0.3.5",
     "json2csv": "^2.12.0",

diff --git a/static/index.css b/static/index.css
@@ -5497,6 +5497,9 @@ body {
     body h2 {
       font-size: 2.3125rem; } }
 
+.error-stack {
+  margin-bottom: 1.25rem; }
+
 .hero-image {
   margin-top: -1px;
   background: transparent url("/static/images/marrowstone.jpg") no-repeat;

diff --git a/styles/index.scss b/styles/index.scss
@@ -67,6 +67,10 @@ body {
     // }
 }
 
+.error-stack {
+    margin-bottom: 1.25rem;
+}
+
 .hero-image {
     // I have no idea why this is necessary,
     // but otherwise there's a 1px split between

diff --git a/views/error.ejs b/views/error.ejs
@@ -0,0 +1,15 @@
+<%- include('./header', {showUser: false}) %>
+<div class="grid-block">
+    <div class="grid-container">
+        <h1>Oops! Something broke.</h1>
+        <p>Here's the error:</p>
+        <pre class="error-stack"><%= err.stack %></pre>
+        <p>To report this, <a href="https://github.com/NickHeiner/fitbit-export/issues">file an issue on GitHub.</a> Please paste this full error, and provide a detailed description of what you were doing. Thanks!</p>
+    </div>
+</div>
+
+<script>
+    ga('send', 'event', 'error', <%- JSON.stringify(err.stack) %>);
+</script>
+<%- include('./footer') %>
+
diff --git a/views/footer.ejs b/views/footer.ejs
@@ -0,0 +1,4 @@
+        </div>
+    </div>
+</body>
+</html>
diff --git a/views/header.ejs b/views/header.ejs
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <meta name="description" content="Free, open source app to export your Fitbit data to a csv file.">
+    <title>Fitbit Data Export</title>
+    <link rel="stylesheet" href="/static/index.css" />
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-55391906-1', 'auto');
+      ga('require', 'autotrack');
+      ga('send', 'pageview');
+
+    </script>
+</head>
+<script type="text/javascript">
+    var appInsights=window.appInsights||function(config){
+        function s(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},r=document,f=window,e="script",o=r.createElement(e),i,u;for(o.src=config.url||"//az416426.vo.msecnd.net/scripts/a/ai.0.js",r.getElementsByTagName(e)[0].parentNode.appendChild(o),t.cookie=r.cookie,t.queue=[],i=["Event","Exception","Metric","PageView","Trace"];i.length;)s("track"+i.pop());return config.disableExceptionTracking||(i="onerror",s("_"+i),u=f[i],f[i]=function(config,r,f,e,o){var s=u&&u(config,r,f,e,o);return s!==!0&&t["_"+i](config,r,f,e,o),s}),t
+    }({
+        instrumentationKey:"cac42e7f-723f-42e3-8b8b-34997c8f7c09"
+    });
+
+    window.appInsights=appInsights;
+    appInsights.trackPageView();
+</script>
+<script type="text/javascript" src="/static/autotrack.js"></script>
+<body>
+    <div class="grid-block vertical">
+        <div class="full-width-grid-content">
+            <div class="primary title-bar">
+                <span class="title left">Fitbit Data Export</span>
+                <span class="right">
+                    <% if (showUser) { %>
+                        <% if (!user) { %>
+                            <a href="/auth/fitbit"
+                                data-event-category="auth"
+                                data-event-action="log-in"
+                                data-event-label="method"
+                                data-event-value="title-bar">
+                                Log in with Fitbit
+                            </a>
+                        <% } else { %>
+                            Logged in as <%= user.displayName %>
+                            <img class="user-avatar" src="<%= user._json.user.avatar150 %>"/>
+                        <% } %>
+                    <% } %>
+                </span>
+            </div>
+        </div>
+
+        <div class="main">