Generator-jhipster: Common errors not correctly translated

[RenaudDemarneffe]

Overview of the issue

Some common HTTP errors (404, 500, ...) are not translated into the UI while the error translations are in the i18n/error.json file.

Motivation for or Use Case

When an error occurs into the code, the correct HTTP code is returned by the REST API but the UI (Angular in my case) does not show an human interpretable message.
By error, I mean an unhandled error that generate a 500 return code or an AccessDeniedException that generate a 403 return code.

Reproduce the error

Generate a simple entity and add the following decorator to the "findAll" method :
@PreAuthorize("hasRole('ADMIN')")

Related issues

Suggest a Fix

JHipster Version(s)

I tested with the 6.1.2 version.

JHipster configuration

INFO! Using JHipster version installed locally in current project's node_modules
INFO! Executing jhipster:info
INFO! Options: from-cli: true
Welcome to the JHipster Information Sub-Generator

JHipster Version(s)

[email protected] /home/vmuser/jhipster/test403
└── [email protected] 

##### **JHipster configuration, a `.yo-rc.json` file generated in the root folder**

.yo-rc.json file

{
  "generator-jhipster": {
    "promptValues": {
      "packageName": "com.mycompany.myapp",
      "nativeLanguage": "en"
    },
    "jhipsterVersion": "6.1.2",
    "applicationType": "monolith",
    "baseName": "test403",
    "packageName": "com.mycompany.myapp",
    "packageFolder": "com/mycompany/myapp",
    "serverPort": "8080",
    "authenticationType": "jwt",
    "cacheProvider": "hazelcast",
    "enableHibernateCache": true,
    "websocket": false,
    "databaseType": "sql",
    "devDatabaseType": "mysql",
    "prodDatabaseType": "mysql",
    "searchEngine": false,
    "messageBroker": false,
    "serviceDiscoveryType": false,
    "buildTool": "maven",
    "enableSwaggerCodegen": false,
    "jwtSecretKey": "bXktc2VjcmV0LXRva2VuLXRvLWNoYW5nZS1pbi1wcm9kdWN0aW9uLWFuZC10by1rZWVwLWluLWEtc2VjdXJlLXBsYWNl",
    "useSass": true,
    "clientPackageManager": "npm",
    "clientFramework": "angularX",
    "clientTheme": "none",
    "clientThemeVariant": "",
    "testFrameworks": [],
    "jhiPrefix": "jhi",
    "entitySuffix": "",
    "dtoSuffix": "DTO",
    "otherModules": [],
    "enableTranslation": true,
    "nativeLanguage": "en",
    "languages": ["en"]
  }
}

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

JDL entity definitions

entity Blog {
  name String required minlength(3),
  handle String required minlength(2)
}
entity BlogEntry {
  title String required,
  content TextBlob required,
  date Instant required
}
entity Tag {
  name String required minlength(2)
}
relationship ManyToOne {
  Blog{user(login)} to User,
  BlogEntry{blog(name)} to Blog
}
relationship ManyToMany {
  BlogEntry{tag(name)} to Tag{entry}
}

dto Blog, BlogEntry, Tag with mapstruct
service Blog, BlogEntry, Tag with serviceImpl
paginate BlogEntry, Tag with infinite-scroll

Environment and Tools

openjdk version "1.8.0_212"
OpenJDK Runtime Environment (build 1.8.0_212-b04)
OpenJDK 64-Bit Server VM (build 25.212-b04, mixed mode)

git version 2.16.5

node: v11.15.0

npm: 6.9.0

yeoman: 2.0.6

yarn: 1.13.0

Docker version 18.09.6, build 481bc77156

docker-compose version 1.23.2, build 1110ad01

INFO! Congratulations, JHipster execution is complete!

.yo-rc.json file :
yo-rc.json.txt

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

JDL for entities :
blog-dto.jdl.txt

Browsers and Operating System

My OS is Linux Centos.I-Pulses 3.10.0-957.21.2.el7.x86_64 #1 SMP Wed Jun 5 14:26:44 UTC 2019 x86_64 x86_64 x86_64 GNU/Linux
Browser : Chrome (last version)

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

[SoniaLahi]

Hi, I am interested by this issue. I can check it and open a PR for Angular, React and Vue as well if needed.

[SoniaLahi]

Hi,

In an Angular application, to get a proper message from a json file, the key should be passed as a parameter of the JhiAlertService.addAlert function. This key is located in response.error.message and is correctly passed in the ErrorHandlerInterceptor.

However, what is actually displayed is the key response.message (which is the error message) and resulting in a translation-not-found.

Solutions :

1/ We can use the JhiAlertErrorComponent to display the errors, because it gets the event sent by the ErrorHandlerInterceptor. Therefore, we will have to remove the error handler in the component to avoid redundancy.

Meaning, for example, in blog.component.html adding
html <jhi-alert-error></jhi-alert-error> <jhi-alert></jhi-alert>
and in the loadAll function, removing the error handler part, because the error processing is already centralized in the interceptor.

2/ We duplicate the extraction of the key from the response in the error handling function and we don't need to use the component JhiAlertErrorComponent. We also don't add the jhi-alert-error to avoid duplicate.

let message = res.error && res.error.message ? res.error.message: res.message;

I prefer the first solution because it takes advantage of the application error management system. What do you think @wmarques, @PierreBesson ?

Sonia

[wmarques]

@SoniaLahi The first solution looks fine to me

[atomfrede]

@SoniaLahi I have created a PR if you like we can split the bounty.

[SoniaLahi]

Hi @atomfrede ok for me !

[DanielFran]

@atomfrede DO not forget to claim the bug bounty