Как я могу показать сообщение об ошибке от API конечному пользователю?

Question

Я пытаюсь показать сообщение об ошибке из REST API, когда пользователь пытается загрузить файл, который не является изображением.

JSON, возвращенный из API, похож на это:

{
    "publicError": "Could not be uploaded, it is not an image!",
    "innerError": "WrongImageTypeException()"
}

Но я не знаю, как он отображается для пользователя.

Я пытался

this.setState({ errorMesage: { ...err } }) 

И журнал консоли выглядит следующим образом https://cdn1.imggmi.com/uploads/2019/4/4/f642ed4326147b3f2c6899e78d415771-full.png.

Как отобразить это сообщение об ошибке ответа?

Код сервера

public ResponseEntity<?> uploadFile(
    @RequestHeader(value = "Authorization") String authorizationHeader,
    @RequestParam("file") MultipartFile file) throws UserNotFoundException {

        try {
            if(!(fileStorageService.checkFileType(file))){
                throw new WrongImageTypeException();

            }
        }catch (WrongImageTypeException error){
            return ResponseEntity.status(403).body(new ErrorMessageManager(
                "Could not be uploaded, it is not an image!",error.toString()));
        }

Код интерфейса

this.state : {
      errorMesage: {
        publicError: "",
      }, } 

public uploadHandler() {
    const formdata: FormData = new FormData();
    formdata.set('file', this.state.avatar);
    const config = {
      headers: {
        'Content-Type': 'multipart/form-data',
        'Authorization': `Bearer ${cookies.get('tk879n')}`
      }
    };
    axios.post(
      `${serverUrl}/uploadFile`,
      formdata,
      config
    ).then(response => {
      this.setState({
        userProfile: {
          ...this.state.userProfile,
          avatarUrl: response.data,
        }
      });
    }
    ).catch((err) => {

      // i want to set error message state and display in render function
      this.setState({ errorMesage: { ...err } }); 

      console.debug(this.state.errorMesage);

    });
  }

Answer 1

Ваш console.debug(this.state.errorMesage); показывает структуру объекта:

Из структуры вы можете видеть, что this.state.errorMesage.response.data содержит структуру, которую выищите:

"publicError": "Could not be uploaded, it is not an image!",
"innerError": "WrongImageTypeException()"

Fix

Так что вместо ...err вы должны использовать ...err.response.data ??