Merge pull request #29 from TheTorProject/fix/ndt-errors

Improve exception handling in mobile main
OpenObservatory · Feb 15, 2017 · 6c6e1e2 · 6c6e1e2
2 parents dc944a1 + 6035a4b
commit 6c6e1e2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 10 deletions.
diff --git a/src/main.mobile.js b/src/main.mobile.js
@@ -6,6 +6,23 @@ import './styles/core.mobile.scss'
 // ========================================================
 // Mobile specific wrapping
 // ========================================================
+
+const ErrorMessage = ({
+    error
+}) => {
+    return (
+      <div className='container-fluid text-xs-center'>
+        <i className='medium-icon fa fa-exclamation-triangle' aria-hidden="true" />
+        <h2>Error in loading the measurement</h2>
+        <p>{error.toString()}</p>
+      </div>
+    )
+}
+
+ErrorMessage.propTypes = {
+    error: React.PropTypes.object
+}
+
 class MeasurementWrapper extends React.Component {
   constructor (props) {
     super(props)
@@ -26,17 +43,14 @@ class MeasurementWrapper extends React.Component {
   }
 
   render () {
+    if (this.state.error !== null) {
+      return <ErrorMessage error={this.state.error} />
+    }
     if (!this.state.measurement) {
       return <div className='container-fluid text-xs-center'>
         <h2>Loading</h2>
       </div>
     }
-    if (this.state.error !== null) {
-      return <div>
-        <h2>Error in loading measurement</h2>
-        <pre>{this.state.error.toString()}</pre>
-      </div>
-    }
     return <div className='container-fluid'>
       <MeasurementDetails measurement={this.state.measurement} />
     </div>
@@ -49,10 +63,17 @@ class MeasurementWrapper extends React.Component {
 const MOUNT_NODE = document.getElementById('root')
 
 let render = () => {
-  ReactDOM.render(
-    <MeasurementWrapper />,
-    MOUNT_NODE
-  )
+  try {
+    ReactDOM.render(
+      <MeasurementWrapper />,
+      MOUNT_NODE
+    )
+  } catch (error) {
+    ReactDOM.render(
+      <ErrorMessage error={error} />,
+      MOUNT_NODE
+    )
+  }
 }
 
 // ========================================================

diff --git a/src/routes/Measurements/components/nettests/Ndt.js b/src/routes/Measurements/components/nettests/Ndt.js
@@ -117,6 +117,16 @@ export class NdtDetails extends React.Component {
   render () {
     const { measurement } = this.props
 
+    if (measurement.test_keys.failure !== null) {
+      return (
+        <div>
+          <h2 className='result-warning'><i className='fa fa-exclamation-circle' /> Error in measurement</h2>
+          <p>We were not able to properly run the NDT test: <code>{measurement.test_keys.failure}</code></p>
+          <p>This usually happens when the port used by NDT is blocked by your ISP</p>
+        </div>
+      )
+    }
+
     return (
       <div>
         <div className='row'>