react-component / react-component/upload

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.

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

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.

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.

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.