Skip to content

Commit db8c06b

Browse files
jamesjieyejamesjieye
committed
fix: error handling on front-end
1 parent 5fc352d commit db8c06b

File tree

9 files changed

+194
-11
lines changed

9 files changed

+194
-11
lines changed

‎front-end/package-lock.json

+1-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎front-end/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
"axios": "^0.18.0",
1616
"bootstrap": "^4.1.3",
1717
"jquery": "^3.3.1",
18+
"lodash": "^4.17.10",
1819
"popper.js": "^1.14.4",
1920
"vue": "^2.5.17",
2021
"vue-router": "^3.0.1",

‎front-end/src/services/authentication/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import axios from 'axios'
2+
import errorParser from '@/utils/error-parser'
23

34
export default {
45
/**
@@ -10,7 +11,7 @@ export default {
1011
axios.post('/authentications', detail).then(({data}) => {
1112
resolve(data)
1213
}).catch((error) => {
13-
reject(error)
14+
reject(errorParser.parse(error))
1415
})
1516
})
1617
}

‎front-end/src/services/registration/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import axios from 'axios'
2+
import errorParser from '@/utils/error-parser'
23

34
export default {
45
/**
@@ -10,7 +11,7 @@ export default {
1011
axios.post('/registrations', detail).then(({data}) => {
1112
resolve(data)
1213
}).catch((error) => {
13-
reject(error)
14+
reject(errorParser.parse(error))
1415
})
1516
})
1617
}

‎front-end/src/utils/error-parser.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import _ from 'lodash'
2+
3+
export default {
4+
parse (error) {
5+
if (error.response) {
6+
const status = error.response.status
7+
const data = error.response.data
8+
if (status === 400) {
9+
if (data && data.message) {
10+
return new Error(data.message)
11+
} else {
12+
return new Error('Bad request')
13+
}
14+
} else if (status === 401) {
15+
return new Error('Request not authorized.')
16+
} else if (status === 403) {
17+
return new Error('Request forbidden.')
18+
} else if (status === 404) {
19+
return new Error('Request failed. Request endpoint not found on the server.')
20+
} else if (status === 500) {
21+
if (data && data.message) {
22+
return new Error(data.message + ' Please try again later.')
23+
} else {
24+
return new Error('There is an error on the server side. Please try again later.')
25+
}
26+
} else {
27+
return new Error('Request failed. Please try again later.')
28+
}
29+
} else if (error.request) {
30+
// Request was made and no response
31+
return new Error('Request failed. No response from the server.')
32+
} else {
33+
return _.isError(error) ? error : new Error(error)
34+
}
35+
}
36+
}

‎front-end/tests/e2e/specs/1.login.e2e.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ module.exports = {
2424

2525
loginPage
2626
.assert.visible('@formError')
27-
.assert.containsText('@formError', 'Request failed with status code 400')
27+
.assert.containsText('@formError', 'Invalid credentials')
2828

2929
browser
3030
.assert.urlEquals(browser.launchUrl + 'login')

‎front-end/tests/unit/services.authentication.spec.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,14 @@ describe('services/authentication', () => {
4444
let request = moxios.requests.mostRecent()
4545
expect(request).toBeTruthy()
4646
request.reject({
47-
status: 400,
48-
response: {message: 'Bad request'}
47+
response: {
48+
status: 400,
49+
data: {message: 'Bad request'}
50+
}
4951
})
5052
})
5153
return authenticationService.authenticate().catch(error => {
52-
expect(error.response.message).toEqual('Bad request')
54+
expect(error.message).toEqual('Bad request')
5355
})
5456
})
5557
})

‎front-end/tests/unit/services.registration.spec.js

+5-3
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,14 @@ describe('services/registration', () => {
3131
let request = moxios.requests.mostRecent()
3232
expect(request).toBeTruthy()
3333
request.reject({
34-
status: 400,
35-
response: {message: 'Bad request'}
34+
response: {
35+
status: 400,
36+
data: {message: 'Bad request'}
37+
}
3638
})
3739
})
3840
return registrationService.register().catch(error => {
39-
expect(error.response.message).toEqual('Bad request')
41+
expect(error.message).toEqual('Bad request')
4042
})
4143
})
4244

‎front-end/tests/unit/utils.error-parser.spec.js

+141
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
import errorParser from '@/utils/error-parser'
2+
3+
describe('utils/error-parser', () => {
4+
5+
it('should parse HTTP 400 error', () => {
6+
const error = {
7+
response: {
8+
status: 400,
9+
data: {
10+
result: 'failure',
11+
message: 'This is an error'
12+
}
13+
}
14+
}
15+
const parsed = errorParser.parse(error)
16+
expect(parsed.message).toEqual('This is an error')
17+
})
18+
19+
it('should parse HTTP 400 unit test error', () => {
20+
const error = {
21+
response: {
22+
status: 400,
23+
data: {
24+
message: 'This is a bad request'
25+
}
26+
}
27+
}
28+
const parsed = errorParser.parse(error)
29+
expect(parsed.message).toEqual('This is a bad request')
30+
})
31+
32+
it('should parse HTTP 400 no message error', () => {
33+
const error = {
34+
response: {
35+
status: 400
36+
}
37+
}
38+
const parsed = errorParser.parse(error)
39+
expect(parsed.message).toEqual('Bad request')
40+
})
41+
42+
it('should parse HTTP 401 error', () => {
43+
const error = {
44+
response: {
45+
status: 401,
46+
statusText: 'Unauthorized'
47+
}
48+
}
49+
const parsed = errorParser.parse(error)
50+
expect(parsed.message).toEqual('Request not authorized.')
51+
})
52+
53+
it('should parse HTTP 403 error', () => {
54+
const error = {
55+
response: {
56+
status: 403,
57+
statusText: 'Forbidden'
58+
}
59+
}
60+
const parsed = errorParser.parse(error)
61+
expect(parsed.message).toEqual('Request forbidden.')
62+
})
63+
64+
it('should parse HTTP 404 error', () => {
65+
const error = {
66+
response: {
67+
status: 404,
68+
statusText: 'Not Found'
69+
}
70+
}
71+
const parsed = errorParser.parse(error)
72+
expect(parsed.message).toEqual('Request failed. Request endpoint not found on the server.')
73+
})
74+
75+
it('should parse HTTP 500 known error', () => {
76+
const error = {
77+
response: {
78+
status: 500,
79+
statusText: 'Internal Server Error',
80+
data: {
81+
message: 'This is rephrased error message.'
82+
}
83+
}
84+
}
85+
const parsed = errorParser.parse(error)
86+
expect(parsed.message).toEqual('This is rephrased error message. Please try again later.')
87+
})
88+
89+
it('should parse HTTP 500 unknown error', () => {
90+
const error = {
91+
response: {
92+
status: 500,
93+
statusText: 'Internal Server Error'
94+
}
95+
}
96+
const parsed = errorParser.parse(error)
97+
expect(parsed.message).toEqual('There is an error on the server side. Please try again later.')
98+
})
99+
100+
it('should parse HTTP 503 error', () => {
101+
const error = {
102+
response: {
103+
status: 503,
104+
statusText: 'Service Unavailable'
105+
}
106+
}
107+
const parsed = errorParser.parse(error)
108+
expect(parsed.message).toEqual('Request failed. Please try again later.')
109+
})
110+
111+
it('should parse HTTP 504 error', () => {
112+
const error = {
113+
response: {
114+
status: 504,
115+
statusText: 'Gateway Timeout'
116+
}
117+
}
118+
const parsed = errorParser.parse(error)
119+
expect(parsed.message).toEqual('Request failed. Please try again later.')
120+
})
121+
122+
it('should parse empty response error', () => {
123+
const error = {
124+
request: {}
125+
}
126+
const parsed = errorParser.parse(error)
127+
expect(parsed.message).toEqual('Request failed. No response from the server.')
128+
})
129+
130+
it('should parse unknown string error', () => {
131+
const error = 'Unknown error'
132+
const parsed = errorParser.parse(error)
133+
expect(parsed.message).toEqual('Unknown error')
134+
})
135+
136+
it('should parse unknown wrapped error', () => {
137+
const error = new Error('Unknown error')
138+
const parsed = errorParser.parse(error)
139+
expect(parsed.message).toEqual('Unknown error')
140+
})
141+
})

0 commit comments

Comments
 (0)