센트리에 서버에러 제외하고 클라이언트 에러만 로그 보내는 법

 

어떤 컴포넌트 내에서 서버에 데이터를 요청해서 응답을 받아오는 경우가 있다고 가정하자. 그리고 이 컴포넌트에서 에러가 발생하면 센트리에 에러로그를 보내는 상황이다. 여기에서 센트리에 api 에러인 것과 클라이언트 에러인 것을 구분해서 클라이언트 에러인 것만 로깅하기 위해서는 api 요청 함수 내에 ServerException을 하나 정의해서 에러를 throw 해주면 된다.

 

// exception.ts

export class ServerException extends Error {
    constructor(msg: string) {
        super(msg);
        Object.setPrototypeOf(this, ServerException.prototype);
    }
}

먼저 이렇게 에러를 extend하는 ServerException 클래스를 하나 만들어서 export 하고,

 

// api.ts

export async function getData(id: string): Promise<ResponseI> {
    const path = `/sample/api/path/${id}`;
    const response = await httpRequest.get(path);

    if (response.data.code === 'FAIL') {
        const msg = response.data.message || SERVICE_UNAVAILABLE_MESSAGE;
        throw new ServerException(msg);
    }
    return response.data;
}

이렇게 서버에러가 났을 때 ServerException을 throw해주면 이 getData 함수를 쓰는 곳에서 에러를 ServerException인지 아닌지 판단할 수 있다.

 

// SamplePage.vue

async getReservationData() {
    try {
        const response = await getData(this.orderNumber);
        // ...
    } catch (e) {
        console.error(e);
        if (!(e instanceof ServerException)) {
            Sentry.captureException(e);
        }
    }
},

서버 응답을 받는 데 실패하는 경우 instanceof으로 ServerException인지 판단한 후, 위와 같이 서버 응답이 아닌 경우에만 센트리에 로그를 찍으면 된다.