VueJS 프로젝트 에러 트래깅하기

Sentry 란?

Sentry 공식 홈페이지에서 Sentry는 실시간으로 로그를 모니터링 할 수 있도록 도와주는 서비스라고 표현되어있다. 말 그대로 에러를 실시간으로 모니터링 할 수 있고, 그러한 알림을 slack이나 gmail 로 연동해서 실시간으로 받아볼 수 있다. 물론 client side 뿐 만 아니라 서버 사이드의 각 언어들도 지원을 한다. 이 플랫폼은 현재 오픈소스로 개발 되고 있으며 혹시라도 기여를 하고 싶다고 한다면 Github 주소에서 찾아볼 수 있다.

가격은 무료로도 사용할 수 있고, 자체 서버만 구축한다고 하면 설치해서도 무료로 사용할 수 있다. Sentry 는 database 를 필요로 해서, 자체 서버에 구축을 하는 경우 mysql 로 설치 할 것인지, Postgres로 설치할 것인지는 정해서 설치하면 된다. 이 포스팅에서는 VueJS 프로젝트에 sentry 공식홈페이지에서 지원해주는 무료버전을 이용해서 셋팅만 한다.

Sentry 와 VueJS 연동하기

사실 공식홈페이지에서도 굉장히 잘 나오고 있어서, 보고 따라하면 된다. 공식 홈페이지에서는 CDN으로 설치할 것인지, npm으로 설치를 할 것인지에 따라 구분해서 설명을 하고 있지만, 지금 현재 진행 중인 프로젝트를 기준으로 (npm) 설명한다.

설치 환경은 다음과 같다. Vue-cli 를 기준으로 스케폴딩된 앱을 기준으로 설명을 하며, 응용만 한다고 하면 굳이 cli 로 스케폴딩된 환경이 아니더라도 충분히 붙일 수 있을 거라고 생각한다.

일단 먼저 raven 관련 모듈을 먼저 설치해야 한다.

1

$ npm install 'raven-js';

그 후, 앱의 entry 파일 ( vue-cli 기준으로는 main.js ) 에 다음과 같이 해당 모듈을 추가해준다.

1
2
3
4
5

import Raven from 'raven-js';
import RavenVue from 'raven-js/plugins/vue';
Raven.config('# application key')
    .addPlugin(RavenVue, Vue)
    .install();

이렇게만 써주면 끝난다. 여기에서 위의 config 안에 # application key 은 sentry 를 가입하면 고유의 key를 받급 받을 수 있다. 여기까지가 기본적인 sentry 를 연동하는 방법이다.

그럼 실제 raven 에서는 어떻게 에러를 로깅하고 있을까? 실제 어플리케이션과 연동을 하고 나면, 에러가 났을때, sentry 주소로 한번 호출을 날린다. 간단한 syntax error 등은 알아서 잡아준다. 다만 그 외적으로 서버와의 통신이 실패했을 때, 같은 경우 error 뱉으면 된다.

1

throw new Error('error message');