signup form gets stuck when signup request fails due to network error

Open Beginner friendly
#4,285 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Active
Tech stack
javascript
Domain
authentication, frontend

Research direction

Start by locating validateAndSignUpUser() and inspect the signup form's error and submitting-state handling around the shown catch block. Reproduce a failed POST /signup request by blocking the network, then verify that failures without an Axios response are handled gracefully, the form leaves the submitting state, and an appropriate error is shown.

Written by the indexing model from the issue text.

Description

Awaiting Maintainer Approval Bug
p5.js version

2.3.2

What is your operating system?

Linux

Web browser and version

firefox 153.0.1

Actual Behavior

If the signup request fails because of a network error, the signup form gets stuck in the submitting state indefinitely.
the error handler in validateAndSignUpUser() assumes that error.response always exists and tries to access response.data.error. for network errors, axios doesn't provide a response object, so this throws a TypeError before the promise can resolve.
i get:
TypeError: Cannot read properties of undefined (reading 'data')
the form stays stuck in the submitting state instead of showing an error or finishing the submission.

Expected Behavior

If the signup request fails because of a network error, the error should be handled gracefully and the signup form should stop submitting and show an appropriate error message.

Steps to reproduce
  1. open the p5.js web editor and go to the signup page
  2. enter valid signup details
  3. make the POST /signup request fail with a network error, for example by disconnecting the network or blocking the request
  4. submit the form
  5. notice that the form stays in the submitting state and no useful error is shown
Snippet:
.catch((error) => {
  const { response } = error;
  dispatch(authError(response.data.error));
  resolve({ error });
});
Dominant language
JavaScript
Stars
1.7k
Forks
1.7k
Avg merge
3d 4h
Merged PRs (30d)
8

Contributor guide

Open the contributing guide

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 processing/p5.js-web-editor

All issues in processing/p5.js-web-editor

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.