Handling custom exception message with react-query

Question

Here is my global exception handler written in Spring Boot

data class ErrorResponse(
    val status: Int? = null,
    val message: String? = null
)

@ControllerAdvice
class GlobalExceptionHandler {

    @ExceptionHandler(ItemAlreadyExistsException::class)
    fun handleItemAlreadyExistsException(e: ItemAlreadyExistsException?): ResponseEntity<ErrorResponse> =
        ResponseEntity(ErrorResponse(HttpStatus.CONFLICT.value(), e?.message.toString()), HttpStatus.CONFLICT)

}

And here is my useMutation function

    const useSignUp = useMutation<Employer, Error, Employer>(
        (employer) => signUpAsEmployer(employer),
        {
            onError: (error) => {
                console.log(error.message)
            }
        }
    );

How can I console log the custom message from thrown Exception?

console.log(error.message) gives me: "Request failed with status code 409" while I want the message I marked by arrow on the image

Chad S. · Accepted Answer · 2023-01-18 22:58:56Z

2

    onError: (error as AxiosError) => {
        const response = JSON.parse(error.request.response);
        console.log(response.message);
    }

edited Jan 18, 2023 at 22:58

answered Jan 18, 2023 at 21:56

Chad S.

6,66918 silver badges26 bronze badges

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

2 Comments

asfarasiknow Over a year ago

I get this error: TS2339: Property 'request' does not exist on type 'Error'

Chad S. Over a year ago

Inform typescript that it's an AxiosError not any ol run of the mill Error. I have edited my answer to add the cast.

asfarasiknow · Accepted Answer · 2023-01-19 16:17:34Z

0

The @Chad S. answer works but do not cast the error inside the parenthises like this: error as AxiosError but change the method returned error type from this:

 const useSignUp = useMutation<Employer, Error, Employer>(
        (employer) => signUpAsEmployer(employer),
        {
            onError: (error) => {
                console.log(error.message)
            }
        }
    );

to this:

 const useSignUp = useMutation<Employer, AxiosError, Employer>(
        (employer) => signUpAsEmployer(employer),
        {
            onError: (error) => {
                console.log(error.message)
            }
        }
    );

answered Jan 19, 2023 at 16:17

asfarasiknow

3254 silver badges14 bronze badges

Collectives™ on Stack Overflow

Handling custom exception message with react-query

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related