Creating message and error page to improve error handling

2018-02-02 09:22:48 -02:00
1 parent 0a082e21c8
commit fb9d583074
@@ -6,9 +6,13 @@
      {{#each message in this.messages}}
        <div class="message">{{{message}}}</div>
      {{else}}
-        {{#let message=(choose this.reason this.message 'An error has ocurred.')}}
+        {{#if eq this.errorType 'Meteor.Error'}}
+            {{>pageError (extend this error=this.details)}}
+        {{else}}
+          {{#let message=(choose this.reason this.message 'An error has ocurred.')}}
            <div class="message">{{message}}</div>
-        {{/let}}
+          {{/let}}
+        {{/if}}
      {{/each}}
    </div>
  {{/dialogSimple}}
@@ -1,5 +1,6 @@
 import './base';
 import './bootstrap';
+import './pages';
 import './paginationArea';
 import './playground/playground.html';
 import './playground/playground.styl';
@@ -0,0 +1,16 @@
+<template name="pageError">
+    {{#section 'pageMessageAfterContent'}}
+        {{#let stack=(choose this.stack this.error.stack)}}
+            {{#if (and shallDisplayErrorStack stack)}}
+                <div class="error-stack">
+                    <p>{{stack}}</p>
+                </div>
+            {{/if}}
+        {{/let}}
+    {{/section}}
+    {{#pageMessage
+        class='page-error'
+        title=(choose this.title this.error.message 'Error')
+        message=(choose this.message this.error.reason getDefaultErrorMessage)
+    }}{{>UI.contentBlock}}{{/pageMessage}}
+</template>
@@ -0,0 +1,13 @@
+import { Meteor } from 'meteor/meteor';
+import { Template } from 'meteor/templating';
+
+Template.pageError.helpers({
+    shallDisplayErrorStack() {
+        return Meteor.isDevelopment;
+    },
+
+    getDefaultErrorMessage() {
+        const instance = Template.instance();
+        return instance.view.templateContentBlock ? '' : 'An error has ocurred.';
+    }
+});
@@ -0,0 +1,19 @@
+@require '{ohif:design}/app'
+
+.page-error .error-stack
+  display: table
+  margin-top: 10px
+  table-layout: fixed
+  width: 100%
+
+  p
+    theme('background-color', '$uiGrayDarkest')
+    theme('border', '1px solid $uiGray')
+    border-radius(4px)
+    display: inline-block
+    font-family: monospace
+    margin: 0
+    padding: 10px 20px
+    overflow-x: auto
+    white-space: pre
+    width: 100%
@@ -0,0 +1,3 @@
+import './error.html';
+import './error.js';
+import './error.styl';
@@ -0,0 +1,2 @@
+import './error';
+import './message';
@@ -0,0 +1,2 @@
+import './message.html';
+import './message.styl';
@@ -0,0 +1,9 @@
+<template name="pageMessage">
+    <div class="page-message {{this.class}}">
+        <div class="message-container">
+            <h1 class="message-title">{{choose this.title}}</h1>
+            <p class="message-content">{{choose this.message}}{{>UI.contentBlock}}</p>
+            {{>section 'pageMessageAfterContent'}}
+        </div>
+    </div>
+</template>
@@ -0,0 +1,31 @@
+@require '{ohif:design}/app'
+
+.page-message
+  theme('color', '$textPrimaryColor')
+  font-weight: 300
+  padding: 10px 0 20px
+
+  .message-container
+    display: table
+    margin: 0 auto
+    padding: 0 32px
+
+  .message-title
+    theme('color', '$textSecondaryColor')
+    font-size: 30px
+    font-weight: 300
+
+  .message-content
+    font-size: 18px
+
+  a
+    &, &:hover, &:active, &:focus
+      theme('color', '$activeColor')
+
+.modal .page-message
+
+  .page-message, .message-container
+    padding: 0
+
+  .message-title
+    display: none