react-component / react-component/upload
Network failures result in different `err` param passed to `onError`
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 804
- Forks
- 323
- Avg merge
- 12m
- Merged PRs (30d)
- 1
Description
Steps to reproduce
- Go to https://react-component.github.io/upload/examples/simple.html
- Upload a file
- Notice that as outlined in the example code
onError(err) {
console.log('onError', err);
},
a error message is printed. This error message could be used to show some diagnostics to the user. The error message is assembled via this function in request.js
xhr.onload = function onload() {
// allow success when 2xx status
// see https://github.com/react-component/upload/issues/34
if (xhr.status < 200 || xhr.status >= 300) {
return option.onError(getError(option, xhr), getBody(xhr));
}
return option.onSuccess(getBody(xhr), xhr);
};
This is all well and correct.
- Now in the Network tab of DevTools right click on the previous
upload.dorequest andBlockit from the menu (to simulate a network failure). - Upload a file - will be marked as
Blockedin the Network tab. - console.log(err) in onError now outputs a different error object without a message. This is totally different from the previous
errparameter and not usable for printing to the user anymore
Looking at the stacktrace this code now comes from
xhr.onerror = function error(e) {
option.onError(e);
};
also in request.js just above xhr.onload
Expected results
Network failures should also pass the same err object to the onError prop as there would be a server message failure, so that it is easier to show such errors to the user.
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in request.js, comparing the xhr.onerror handler with the xhr.onload failure path and the getError call shown in the issue. Reproduce the blocked upload in the simple example, then verify that network failures pass an onError error with a user-visible message consistent with server failures.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100