Network failures result in different `err` param passed to `onError`

Open
#271 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
45/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Stale
Tech stack
javascript, react
Domain
frontend

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.

Description

Steps to reproduce

  1. Go to https://react-component.github.io/upload/examples/simple.html
  2. Upload a file
  3. 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.

  1. Now in the Network tab of DevTools right click on the previous upload.do request and Block it from the menu (to simulate a network failure).
  2. Upload a file - will be marked as Blocked in the Network tab.
  3. console.log(err) in onError now outputs a different error object without a message. This is totally different from the previous err parameter 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.

Dominant language
TypeScript
Stars
804
Forks
323
Avg merge
12m
Merged PRs (30d)
1

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from react-component/upload

All issues in react-component/upload

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.