try ~ catch 문에서 e.message

다음과 같이 500에러를 (HttpStatus.INTERNAL_SERVER_ERROR) 반환하는 코드가 있다고 가정해보자

@RestController
@RequestMapping("/api")
public class MyController {

    @GetMapping("/example")
    public ResponseEntity<String> exampleEndpoint() {
        // 500 에러를 발생시키기 위한 예시
        throw new RuntimeException("500에러가 발생했습니다.");
    }

    @ExceptionHandler(RuntimeException.class)
    public ResponseEntity<ErrorResponse> handleRuntimeException(RuntimeException ex) {
        ErrorResponse errorResponse = new ErrorResponse(HttpStatus.INTERNAL_SERVER_ERROR.value(), ex.getMessage());
        return new ResponseEntity<>(errorResponse, HttpStatus.INTERNAL_SERVER_ERROR);
    }
}

class ErrorResponse {
    private int status;
    private String message;

    public ErrorResponse(int status, String message) {
        this.status = status;
        this.message = message;
    }

    // getter, setter
}

프론트단에서 fetch 함수에서 에러를 확인할때는 다음과 같이 작성해야 한다.

async function fetchData() {
    try {
        const response = await fetch('/api/example');

        // HTTP 상태 코드가 2xx가 아닐 경우 에러를 던집니다.
        if (!response.ok) {
            const errorData = await response.json();
            throw new Error(errorData.message); // 서버에서 받은 메시지를 에러로 던짐
        }

        const data = await response.json();
        console.log(data);
    } catch (e) {
        console.log(e.message); // "500에러가 발생했습니다." 메시지 출력
    }
}

// fetchData 함수 호출
fetchData();

e.message로 메시지를 바로 확인할 수 있을것 같지만 catch(e)에서 객체 e는 자바스크립트에서 호출 오류에 대한 정보이지, 컨트롤러에서 선언한 ErrorResponse를 e로 받는 것이 아니다.
메시지를 콘솔로 표시하고 싶으면 throw new Error(errorData.message)처럼 던져야 한다.

이미 알고 있었지만, API 연동시 헷갈릴때가 간혹 있어서 정리해 보았다.