fix: error handling on front-end

jamesjieye · jamesjieye · commit db8c06bbeb1a · 2018-08-27T03:45:59.000+08:00
diff --git a/front-end/package-lock.json b/front-end/package-lock.json
diff --git a/front-end/package.json b/front-end/package.json
@@ -15,6 +15,7 @@
     "axios": "^0.18.0",
     "bootstrap": "^4.1.3",
     "jquery": "^3.3.1",
+    "lodash": "^4.17.10",
     "popper.js": "^1.14.4",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
diff --git a/front-end/src/services/authentication/index.js b/front-end/src/services/authentication/index.js
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import errorParser from '@/utils/error-parser'
 
 export default {
   /**
@@ -10,7 +11,7 @@ export default {
       axios.post('/authentications', detail).then(({data}) => {
         resolve(data)
       }).catch((error) => {
-        reject(error)
+        reject(errorParser.parse(error))
       })
     })
   }
diff --git a/front-end/src/services/registration/index.js b/front-end/src/services/registration/index.js
@@ -1,4 +1,5 @@
 import axios from 'axios'
+import errorParser from '@/utils/error-parser'
 
 export default {
   /**
@@ -10,7 +11,7 @@ export default {
       axios.post('/registrations', detail).then(({data}) => {
         resolve(data)
       }).catch((error) => {
-        reject(error)
+        reject(errorParser.parse(error))
       })
     })
   }
diff --git a/front-end/src/utils/error-parser.js b/front-end/src/utils/error-parser.js
@@ -0,0 +1,36 @@
+import _ from 'lodash'
+
+export default {
+  parse (error) {
+    if (error.response) {
+      const status = error.response.status
+      const data = error.response.data
+      if (status === 400) {
+        if (data && data.message) {
+          return new Error(data.message)
+        } else {
+          return new Error('Bad request')
+        }
+      } else if (status === 401) {
+        return new Error('Request not authorized.')
+      } else if (status === 403) {
+        return new Error('Request forbidden.')
+      } else if (status === 404) {
+        return new Error('Request failed. Request endpoint not found on the server.')
+      } else if (status === 500) {
+        if (data && data.message) {
+          return new Error(data.message + ' Please try again later.')
+        } else {
+          return new Error('There is an error on the server side. Please try again later.')
+        }
+      } else {
+        return new Error('Request failed. Please try again later.')
+      }
+    } else if (error.request) {
+      // Request was made and no response
+      return new Error('Request failed. No response from the server.')
+    } else {
+      return _.isError(error) ? error : new Error(error)
+    }
+  }
+}
diff --git a/front-end/tests/e2e/specs/1.login.e2e.js b/front-end/tests/e2e/specs/1.login.e2e.js
@@ -24,7 +24,7 @@ module.exports = {
 
     loginPage
       .assert.visible('@formError')
-      .assert.containsText('@formError', 'Request failed with status code 400')
+      .assert.containsText('@formError', 'Invalid credentials')
 
     browser
       .assert.urlEquals(browser.launchUrl + 'login')
diff --git a/front-end/tests/unit/services.authentication.spec.js b/front-end/tests/unit/services.authentication.spec.js
@@ -44,12 +44,14 @@ describe('services/authentication', () => {
       let request = moxios.requests.mostRecent()
       expect(request).toBeTruthy()
       request.reject({
-        status: 400,
-        response: {message: 'Bad request'}
+        response: {
+          status: 400,
+          data: {message: 'Bad request'}
+        }
       })
     })
     return authenticationService.authenticate().catch(error => {
-      expect(error.response.message).toEqual('Bad request')
+      expect(error.message).toEqual('Bad request')
     })
   })
 })
diff --git a/front-end/tests/unit/services.registration.spec.js b/front-end/tests/unit/services.registration.spec.js
@@ -31,12 +31,14 @@ describe('services/registration', () => {
       let request = moxios.requests.mostRecent()
       expect(request).toBeTruthy()
       request.reject({
-        status: 400,
-        response: {message: 'Bad request'}
+        response: {
+          status: 400,
+          data: {message: 'Bad request'}
+        }
       })
     })
     return registrationService.register().catch(error => {
-      expect(error.response.message).toEqual('Bad request')
+      expect(error.message).toEqual('Bad request')
     })
   })
 
diff --git a/front-end/tests/unit/utils.error-parser.spec.js b/front-end/tests/unit/utils.error-parser.spec.js
@@ -0,0 +1,141 @@
+import errorParser from '@/utils/error-parser'
+
+describe('utils/error-parser', () => {
+
+  it('should parse HTTP 400 error', () => {
+    const error = {
+      response: {
+        status: 400,
+        data: {
+          result: 'failure',
+          message: 'This is an error'
+        }
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('This is an error')
+  })
+
+  it('should parse HTTP 400 unit test error', () => {
+    const error = {
+      response: {
+        status: 400,
+        data: {
+          message: 'This is a bad request'
+        }
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('This is a bad request')
+  })
+
+  it('should parse HTTP 400 no message error', () => {
+    const error = {
+      response: {
+        status: 400
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Bad request')
+  })
+
+  it('should parse HTTP 401 error', () => {
+    const error = {
+      response: {
+        status: 401,
+        statusText: 'Unauthorized'
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Request not authorized.')
+  })
+
+  it('should parse HTTP 403 error', () => {
+    const error = {
+      response: {
+        status: 403,
+        statusText: 'Forbidden'
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Request forbidden.')
+  })
+
+  it('should parse HTTP 404 error', () => {
+    const error = {
+      response: {
+        status: 404,
+        statusText: 'Not Found'
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Request failed. Request endpoint not found on the server.')
+  })
+
+  it('should parse HTTP 500 known error', () => {
+    const error = {
+      response: {
+        status: 500,
+        statusText: 'Internal Server Error',
+        data: {
+          message: 'This is rephrased error message.'
+        }
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('This is rephrased error message. Please try again later.')
+  })
+
+  it('should parse HTTP 500 unknown error', () => {
+    const error = {
+      response: {
+        status: 500,
+        statusText: 'Internal Server Error'
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('There is an error on the server side. Please try again later.')
+  })
+
+  it('should parse HTTP 503 error', () => {
+    const error = {
+      response: {
+        status: 503,
+        statusText: 'Service Unavailable'
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Request failed. Please try again later.')
+  })
+
+  it('should parse HTTP 504 error', () => {
+    const error = {
+      response: {
+        status: 504,
+        statusText: 'Gateway Timeout'
+      }
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Request failed. Please try again later.')
+  })
+
+  it('should parse empty response error', () => {
+    const error = {
+      request: {}
+    }
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Request failed. No response from the server.')
+  })
+
+  it('should parse unknown string error', () => {
+    const error = 'Unknown error'
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Unknown error')
+  })
+
+  it('should parse unknown wrapped error', () => {
+    const error = new Error('Unknown error')
+    const parsed = errorParser.parse(error)
+    expect(parsed.message).toEqual('Unknown error')
+  })
+})
