How to show server (Java) Exception message in React.js

Question

I am not able to see the message (in React.js catch block) set while throwing Exception (by server in Java).

Situation: User wants to perform some action (via myService), some verification w.r.t action can be done only on back-end, if that fails how to show the user what was the reason of failure?

Service (Java):

@GetMapping(path = {/*Servive_path*/}, produces = APPLICATION_JSON_VALUE)
public MyClass myService(@RequestParam String param) {
    throw new RuntimeException("This is error message");
}

Action (React.js):

const myServive = (param) => {
  return async (dispatch, getState) => {
    return request({
      url: ENDPOINTS.MY_SERVICE,
      method: methods.GET,
      params: { param }
    })
      .then(res => {
        dispatch(saveResult(res));
        dispatch(
          notify({
            title: "Successful",
            message: "It was successfully.",
            status: 200,
            dismissAfter: CONFIG.NOTIFICATION_TIMEOUT
          })
        );
      })
      .catch(err => {
        console.log("err.data: ", err.data); //Output-> err.data: 
        console.log("err.message: ", err.message); //Output-> err.message: undefined
        dispatch(
          notify({
            title: "Some error occured",
            message: **//Want to set the error message**,
            status: "error",
            dismissAfter: CONFIG.NOTIFICATION_TIMEOUT
          })
        );
      });
  };
};

Want to show the exception message by setting value in massage in catch block of action.

Output

err.data: ""
err.message: undefined

Also,

err.status: 500
err.request.response: ""
err.request.responseText: ""
err.request.responseType: ""
err.request.status: 500
err.request.statusText: ""

Please help.

Is this maybe the same problem? stackoverflow.com/questions/43800998/… — Janos Vinceller
– Janos Vinceller, Commented May 10, 2020 at 22:44

Bohdan Petrenko · Accepted Answer · 2020-05-04 14:27:42Z

3

+25

By default in case of exception Spring return http status 500 with Content-Type: text/html;charset=UTF-8 and generates html page with error description. Your error description will be in the last line of this page after

<div>There was an unexpected error (type=Internal Server Error, status=500).</div>

and will look like

<div>This is error message</div>

Of course you can write crutch in your code and parse this page using React, but I wouldn't recommend so. It's much better to add Controller advice and write custom exception handling. In your case something like this

import lombok.Value;
import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseStatus;
import org.springframework.web.bind.annotation.RestControllerAdvice;

@RestControllerAdvice
public class ErrorHandler {

    @ExceptionHandler(Exception.class)
    @ResponseStatus(HttpStatus.INTERNAL_SERVER_ERROR)
    public ExceptionRestResponse handleCustomException(Exception exception) {
        return new ExceptionRestResponse(500, exception.getMessage());
    }

    @Value
    public static class ExceptionRestResponse {
        int code;
        String message;
    }
}

Then you will get response with Content-Type: application/json which will look like

{
    "code": 500,
    "message": "This is error message"
}

edited May 4, 2020 at 14:27

answered May 4, 2020 at 8:57

Bohdan Petrenko

1,1833 gold badges18 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Prem Over a year ago

Hi, Thanks for the response. Added constructor in ExceptionRestResponse as required. CE at @Value, 'The annotation @Value is disallowed for this location'.

Bohdan Petrenko Over a year ago

I used @Value for conciseness. You can replace it with constructor and getters. Or you have to install lombok plugin to your IDE. I tested code sample which I posted on my machine, so all should work.

Prem Over a year ago

Removed the @Value. Debugged the code and I can see method handleCustomException is being executed but can't see message in UI. Can you please tell me what would be the complete path of property message in object err?

Prem Over a year ago

getter/setter for code,message required in order to resolve above problem.

indranil32 Over a year ago

Make sure the @Value annotation is from lombok and not Spring. You can also take a look at - mkyong.com/spring-boot/spring-rest-error-handling-example or baeldung.com/spring-mvc-controller-custom-http-status-code with working examples

|

jfk · Accepted Answer · 2022-10-21 04:57:18Z

1

Step 1 : Define your exception with the right status code

Example

ResponseStatus(code = HttpStatus.NOT_FOUND)
public class UserNotFoundException extends RuntimeException {
    public UserNotFoundException(String id) {
        super(String.format("User with id %s does not exist.", id));
    }
}

Enable the details in the application.properties

server.error.include-message=always

Sample result

{
    "timestamp": "2022-10-21T04:54:43.916+00:00",
    "status": 404,
    "error": "Not Found",
    "message": "User with id [email protected] does not exist.",
    "path": "/api/authentication/password-recovery"
}

answered Oct 21, 2022 at 4:57

jfk

5,50741 silver badges37 bronze badges

Comments

Nikhil · Accepted Answer · 2020-05-08 03:52:32Z

0

You can use the ResponseStatusException to send error message to reactjs.

@RequestMapping(method = RequestMethod.GET, value = "/get")
public List<MyInfo> getInfo(){
   try {
          // code to return
       } catch (InvalidObjectException | InvalidOperationException | OperationNotPermittedException | UserPermissionNotAvailableException e) {
    // throwing custom exceptions
    throw new ResponseStatusException(HttpStatus.FORBIDDEN, e.getMessage(), e);
        } 
   catch (Exception e) {
        throw new ResponseStatusException(HttpStatus.INTERNAL_SERVER_ERROR, e.getMessage(), e);
       }
   }

Instead of e.getMessage(), you may use a specific error message.

Run console.error(error) to see the structure of the error response and display it accordingly. The error response may look like this:

"error" : {
     "status": 403,
     "statusText": "FORBIDDEN",
     "message": "User does not have permission to perform this operation",
     "timestamp": "2020-05-08T04:28:32.917+0000"
     ....
}

More here: https://docs.spring.io/spring-framework/docs/current/javadoc-api/org/springframework/web/server/ResponseStatusException.html

answered May 8, 2020 at 3:52

Nikhil

1,25615 silver badges28 bronze badges

4 Comments

Prem Over a year ago

Thanks for reply. Could not find any type with name ResponseStatusException. Can you please specify the package?

Nikhil Over a year ago

Please see the link at the bottom that I've included in the answer. It's part of the Spring Framework since 5.0.

Prem Over a year ago

ResponseStatusException is since 5.0 but we are using 4.3.x. Otherwise would have been a good choice.

Nikhil Over a year ago

You can look through other solutions here including older Spring versions: baeldung.com/exception-handling-for-rest-with-spring

Collectives™ on Stack Overflow

How to show server (Java) Exception message in React.js

3 Answers 3

6 Comments

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related