본문 바로가기

🤔Troubleshooting

백엔드에서 발생한 에러메세지, fetch API 로 받기

스프링을 공부하다가 백엔드에서 Exception이 발생할 때 에러 메시지를 프론트에서 받아오는 방법을 찾아보았다.

 

환경

@RestController
public class LineController {
	...

    @PostMapping("/lines")
    public ResponseEntity<Line> createLine(@RequestBody LineRequest lineRequest) {
        Line line = LineRequest.toLine(lineRequest);
        Line savedLine = lineService.save(line);
        return ResponseEntity.created(URI.create("/lines/" + savedLine.getId()))
        	.body(savedLine);
    }

	...

    @ExceptionHandler(value = {NotFoundLineException.class, DuplicationNameException.class})
    public ResponseEntity<String> exceptionHandler(IllegalArgumentException e) {
        return ResponseEntity.badRequest().body(e.getMessage());
    }
}

프로젝트 코드 중 지하철 노선(line)을 저장하는 메서드이다.

아래의 코드는 LineService의 save 메서드와 validateTitle 그리고 커스텀 익셉션이다.

public Line save(Line line) {
        validateTitle(line);
        return lineRepository.save(line);
    }

 

public void validateTitle(Line line) {
        lineRepository.findByTitle(line.getTitle())
                .ifPresent(x -> {
                    throw new DuplicationNameException();
                });
    }

 

public class DuplicationNameException extends IllegalArgumentException {
    public DuplicationNameException() {
        super("중복된 이름입니다");
    }
}

 

중복된 이름으로 저장을 하려고 할때 예외가 발생되면서 "중복된 이름입니다" 라는 문구를 출력한다.

그러면 exeptionHandler가 호출되면서 body에 이러 메시지를 담아 보내준다.

 

방법

다음 fetch API 를 이용하려 메시지를 받을 수 있다.

fetch("/lines", {
            headers: {
                'Content-Type': 'application/json'
            },
            method: 'POST',
            body: JSON.stringify({
                ...
            })
        }).then(res => {
                if (!res.ok) {
                    throw res
                }
                ...
            }
        ).catch(error => {
            error.text().then(msg => alert(msg))
        });

 

 

반응형