RocketChat / RocketChat/EmbeddedChat

Bug: Uncaught TypeError in useRCAuth on Network Error during login

Open
#1,210 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
165
Forks
381
Avg merge
1d 2h
Merged PRs (30d)
1

Description

When a user attempts to log in but encounters a network error (e.g., net::ERR_NETWORK_CHANGED or a DNS failure), the fetch call in EmbeddedChatApi.login throws an error.

The catch block in packages/api/src/EmbeddedChatApi.ts currently logs the error but implicitly returns undefined:

// packages/api/src/EmbeddedChatApi.ts
      if (error instanceof ApiError && error.response?.status === 401) {
        const authErrorRes = await error.response.json();
        return { error: authErrorRes?.error };
      }
      console.error(error); // returns undefined implicitly

Subsequently, the react hook useRCAuth.js attempts to read res.error, leading to an uncaught TypeError, completely crashing the login flow and preventing any toast error message from being displayed to the user:

// packages/react/src/hooks/useRCAuth.js
      const res = await RCInstance.login(userOrEmail, password, code);
      if (res.error === 'Unauthorized' || res.error === 403) { // TypeError: Cannot read properties of undefined (reading 'error')
Steps To Reproduce
  1. Open the EmbeddedChat application
  2. Go to the offline state or throttle your network connection to drop it mid-request.
  3. Attempt to submit the login form.
  4. Observe the unhandled promise rejection and UI crash instead of a graceful toast message.
Expected Behavior

The login flow should robustly handle network errors returned by RCInstance.login(), exiting gracefully and optionally displaying a user-friendly error toast.

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 packages/api/src/EmbeddedChatApi.ts by reading the login catch block, then inspect packages/react/src/hooks/useRCAuth.js where res.error is read. Reproduce the network-failure login flow using the issue's offline or throttled-network steps. Done means the failed login no longer causes an uncaught TypeError and the flow exits gracefully with the expected error handling.

Written by the indexing model from the issue text.

Assessment

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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.