문제

서버 측에서 발생하는 예외 메시지를 프런트 측에서 전달하여 출력되게 하고 싶었다.

UserManagementService.java

        // 회원 중복 확인
        Optional<User> checkUsername = userRepository.findByLoginId(loginId);
        if (checkUsername.isPresent()) {
            throw new IllegalArgumentException("중복된 사용자가 존재합니다.");
        }

        // email 중복확인
        String email = param.getEmail();
        Optional<User> checkEmail = userRepository.findByEmail(email);
        if (checkEmail.isPresent()) {
            throw new IllegalArgumentException("중복된 Email 입니다.");
        }

서버측에는 위 코드와 같이 예외처리를 구현했다.

    fetch('/user/signup', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(signupData)
    })
        .then(response => response.json())
        .then(data => {
            if (data.status === 400) {
                alert(data.message); 
            } else {
                // 회원가입 성공 시
                document.querySelector('#mainSection').style.display = 'block';
                document.querySelector('.registration-container').style.display = 'none';
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('회원가입 처리 중 문제가 발생했습니다.');
        });

이에 자바스크립트로 응답코드가 400일 때 해당 메시지를 출력하고자 시도했다.

그러나 예상과는 다르게 서버 측에 설정한 메시지는 출력되지 않고 catch 블럭에서 예외가 처리되었고,

 alert('회원가입 처리 중 문제가 발생했습니다.');

해당 메시지만이 출력되는 문제가 발생했다.

시도

fetch('/user/signup', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(signupData)
})
.then(response => {
    if (!response.ok) {
        throw response;  // 에러 응답을 catch 블록으로 넘김
    }
    return response.json();  // 정상 응답 처리
})
.then(data => {
    // 회원가입 성공 시
    document.querySelector('#mainSection').style.display = 'block';
    document.querySelector('.registration-container').style.display = 'none';
})
.catch(error => {
    error.json().then(errData => {
        console.error('Error:', errData);
        alert(errData.errorMessage);  // 수정된 부분: errorMessage로 접근
    });
});

수정 된 코드에서는 response.ok를 검사하여 응답이 정상적인지를 판별하고, 만약에 정상적이지 않다면, 이를 catch 블록에 전달한다.

이후 cathc 블럭에서 에러 데이터를 전달 받고, .json() 메서드를 호출하여 JSON 데이터를 추출한다.

이렇게 해서 얻은 errData에서 .errorMessage 를 통해 에러 메시지를 추출하고 이를 사용자가 확인할 수 있도록 출력한다.

이때 .errorMessage 를 통해 접근한 이유는

GlobalExceptionHandler.java

    @ExceptionHandler({IllegalArgumentException.class})
    public ResponseEntity<RestApiException> illegalArgumentExceptionHandler(IllegalArgumentException ex) {
        RestApiException restApiException = new RestApiException(ex.getMessage(), HttpStatus.BAD_REQUEST.value());
        return new ResponseEntity<>(
                restApiException,
                HttpStatus.BAD_REQUEST
        );
    }

RestApiException.java

@Getter
@AllArgsConstructor
public class RestApiException {
    private String errorMessage;
    private int statusCode;
}

GlobalExceptionHandler 에서 예외를 처리하고 있는데, 반환되는 예외 데이터 중에 errorMessage 가 예외 메시지 처리를 담당하고 있기 때문이다.

해결

이렇게 수정한 결과 예외 처리에 대한 메시지가 정상적으로 출력되는 것으로 확인할 수 있었다.

알게된 점

원래의 코드에서는 모든 응답을 성공적으로 JSON으로 변환하려고 시도했으나, 에러 응답이 존재하는 경우 이를 적절히 처리하지 못했다.

수정된 코드에서는 response.ok를 사용하여 HTTP 응답 상태 코드가 성공 범위(200-299)에 포함되는지 먼저 확인하고, 그렇지 않은 경우 에러를 catch 블록으로 넘김으로써, 에러 응답을 효과적으로 처리할 수 있게 되었다.

이번 수정을 통해, 서버에서 발생하는 예외 상황을 프론트엔드에서 정확하게 처리하고, 사용자에게 해당 에러 정보를 효과적으로 전달할 수 있게 되었다.