Unauthorized error handling failure in React app leading to 'Unknown error!' toast

[hide212131]

Overview of the issue

In starting the React app, an 'Unknown error!' toast appears.

Motivation for or Use Case

Upon investigating, it seems that in the React app, when the /api/account and /api/authenticate APIs encounter an Unauthorized error (401), the application doesn't notify the user. The application makes this decision based on both the 401 status and the presence of an API name in the 'response body'.

https://github.com/jhipster/generator-jhipster/blob/c7dc6e4c64c016bc921912b3ec900c7d8a91b4c6/generators/react/templates/src/main/webapp/app/config/notification-middleware.ts.ejs#L73

However, in the current main branch, the server does not provide a 'response body' when returning a 401 error. Consequently, this leads to a failure in error handling, resulting in the appearance of an 'Unknown error!' toast.

Reproduce the error

Start React app.

Related issues

14738

Suggest a Fix

I suggest removing the decision made based on the API name in the 'response body' See here. Adding a 'response body' on the server-side just to handle this issue does not seem appropriate.

JHipster Version(s)

• The issue is present in the React app generated by the main branch (7.10.0), for both 'authenticationType' 'jwt' and 'session'.
• This issue does not appear in version 7.9.3.
• The issue does not appear in Angular or Vue.

JHipster configuration

.yo-rc.json file

{
  "applicationType": "monolith",
  "authenticationType": "jwt",
  "baseName": "myApp",
  "buildTool": "maven",
  "cacheProvider": "ehcache",
  "clientFramework": "react",
  "clientTheme": "none",
  "creationTimestamp": 1686372694068,
  "databaseType": "sql",
  "devDatabaseType": "h2Disk",
  "devServerPort": 9060,
  "dtoSuffix": "DTO",
  "enableGradleEnterprise": null,
  "enableHibernateCache": true,
  "enableSwaggerCodegen": false,
  "enableTranslation": true,
  "entities": [],
  "entitySuffix": "",
  "gradleEnterpriseHost": null,
  "jhiPrefix": "jhi",
  "jhipsterVersion": "7.10.0",
  "languages": [
    "ja",
    "en",
    "fr"
  ],
  "messageBroker": false,
  "microfrontend": false,
  "microfrontends": [],
  "nativeLanguage": "ja",
  "packageFolder": "com/mycompany/myapp",
  "packageName": "com.mycompany.myapp",
  "pages": [],
  "prodDatabaseType": "postgresql",
  "reactive": false,
  "searchEngine": false,
  "serverPort": null,
  "serverSideOptions": [],
  "serviceDiscoveryType": false,
  "skipCheckLengthOfIdentifier": false,
  "skipClient": false,
  "skipFakeData": false,
  "skipUserManagement": false,
  "testFrameworks": [],
  "websocket": false,
  "withAdminUi": true
}

Environment and Tools

openjdk version "17.0.7" 2023-04-18 OpenJDK Runtime Environment Temurin-17.0.7+7 (build 17.0.7+7) OpenJDK 64-Bit Server VM Temurin-17.0.7+7 (build 17.0.7+7, mixed mode, sharing)

git version 2.39.2 (Apple Git-143)

node: v18.14.2 npm: 9.5.0

Docker version 23.0.5, build bc4487a

JDL for the Entity configuration(s) entityName.json files generated in the .jhipster directory

JDL entity definitions

Entity configuration(s) entityName.json files generated in the .jhipster directory

Browsers and Operating System

• [X] Checking this box is mandatory (this is just to show you read everything)

[hide212131]

I am planning to submit a PR. In addition to fixing the error, I intend to use the AxiosError type definition as much as possible for future improvements. However, due to the extensive time required for a comprehensive fix, the initial changes will be more localized. Generated code sample is here.

Due to the Axios version upgrade, it appears that there are minor issues elsewhere. (For example, we need to adjust how we're using Redux due to the upgraded version of Axios. I'll create a separate issue for this later.)

Moving forward, I hope we can collaborate to reduce the use of any as much as possible.