Nuxt.js 기반의 프로젝트에서 Sentry 이슈를 디버깅하는 방법입니다.
Sentry 이슈를 쉽게 디버깅하기 위해서는 소스맵을 사용해야 합니다.
소스맵에 대한 설명은 subicura님의 크롬 개발자 도구를 이용한 자바스크립트 디버깅 글에 자세하게 설명되어 있습니다.
프로젝트 빌드시 소스맵 생성환경을 구성하면, 산출된 .js파일에 소스맵 파일과 맵핑되는 주석 구문이 파일 끝부분에 추가됩니다.
//# sourceMappingURL=125.273001d.js.map
Sentry 적용하기
Sentry에는 Release 개념이 있으며, release시 소스맵을 추가로 첨부할 수 있습니다.
Nuxt 커뮤니티에는 @nuxtjs/sentry 모듈이 있으며, 이를 활용하여 sentry에 release 방식으로 소스맵을 첨부할 수 있습니다.
이 작업을 수행하기 위해서는 몇가지 단계가 필요합니다.
1. sentryclirc 설정 파일 만들기
Sentry 엑세스에 필요한 환경 변수를 추가하고, 인증을 위한 token을 생성하고 추가합니다.
인증 token은 계정 설정의 auth-tokens 메뉴에서 생성할 수 있습니다.
[defaults]
url = https://sentry.io/
org = organization-name
project = project-name
[auth]
token = token 2. nuxt.config sentry 설정 추가하기
nuxt.config.js에 sentry 설정 정보를 추가합니다. publishRelease를 ture로 설정하면 빌드 후, 설정된 내용으로 sentry에 release 되고, sentry.io의 release 메뉴에서 확인할 수 있습니다. sourceMapStyle은 webpack devtool의 설정과 동일합니다.
각 옵션은 @nuxt/sentry에 자세하게 설명되어 있습니다.
⚠️ @nuxtjs/sentry는 3.3.0 이상 버전에서 sourceMapStyle이 적용됩니다.
sentry: {
publishRelease: true
sourceMapStyle: 'source-map',
config: {
environment: process.env.NODE_ENV,
release: 1.0.0
}
}3. map 파일 삭제하기
.map.js 파일이 배포되면 사용자가 개발자도구등을 사용하여 코드를 볼 수 있기 때문에, 사용자에게 노출되어서는 안됩니다. 따라서 Sentry에만 업로드하고 서버에 업로드 되기전에 .map.js 파일은 삭제되어야 합니다.
파일 삭제는 rimraf을 사용하여 package.json에 스크립트를 추가하여 삭제할 수 있습니다.
"scripts": {
...
"generate": "nuxt generate",
"dist": "npm run generate && rimraf dist/**/*.js.map"
}npm install --only=dev rimraf
또 다른 방법으로 별도의 스크립트를 사용하여 스크립트를 구성할 수 있습니다.
이 부분은 OS에 따라 동작하지 않을 수도 있습니다. (참고: recursively-delete-all-files-with-a-given-extension)
"scripts": {
...
"generate": "nuxt generate && npm run clean"
"clean": `find . -type f -name '*.map' -delete```
}