sentry의 홈페이지를 보시면 아시겠지만 에러를 추적해주는 소프트웨어 입니다.
이게 왜 필요한가에 대해서는 애플리케이션을 만들고 출시하고 운영하다보면
애플리케이션을 사용하는 사용자가 에러난다고 피드백을 줄 때가 있다.
이런 피드백을 받을때 난감한 점은 유저가 어느때에 정확히 어떤 에러가 난건지 서술 안해줄 때가 있다는 것이다.
이런 불편함을 sentry로 해결해줄 수 있습니다.
또한 위의 스크린샷을 보시면 아시겠지만 엄청 많은 플랫폼에서 지원을 해주고 있습니다.
먼저 이 모듈은 현재 nuxt 1.0.0, 1.2.1 버전은 지원되지 않습니다.
nuxt에서는 sentry에 대한 모듈을 지원해주고 있습니다.
설치해보도록 하겠습니다.
yarn add @nuxtjs/sentry
또는
npm i --save @nuxtjs/sentry
sentry설정은 nuxt.config.js
에서 하실 수 있습니다.
아래와 같이 먼저 설정해줍니다.
modules: [
'@nuxtjs/sentry',
],
sentry: {
dsn: '',
config: {}
}
먼저 Sentry에 가입해보도록 하겠습니다.
먼저 Sentry 홈페이지에서 Get started를 누르시면 회원가입 화면으로 이동하실 수 있습니다.
다음과 같은 화면을 보실 수 있는데요. 회원가입해주도록 합니다. (가입시 메일로 검증해야하니 가입한 메일을 회원가입하고 확인해주세요.)
회원가입 하시고 로그인하면 다음과 같은 화면을 보실 수 있습니다.
vue를 선택하시고 프로젝트이름을 입력하시고 create project 버튼을 눌러서 프로젝트를 만드시면 dsn 키를 발급해줍니다.
위와 같이 dsn키를 발급되었으면 nuxt.config.js
에서 넣어줍니다.
sentry: {
dsn: 'dsn key', // 여기에 발급된 키를 넣습니다.
config: {}
}
바로 위 화면에서 Got it! Take me to the Issue Stream.버튼을 누르시면 아래와 같은 화면을 보실 수 있습니다.
이제 오류가 나면 위와 같은 화면을 보실 수 있습니다.
sample event를 한번 보도록 하겠습니다. (Create a sample event 버튼을 누르면 됩니다.)
정말 많은 내용을 보여줍니다.
어느 os, 브라우저, 무엇을 클릭했는지, 어느 페이지였는지, 오류 내용 이런 것들을 다 보여줌으로써 디버깅 하기 정말 편하게 해줍니다.
0. cypress란 https://www.cypress.io cypress는 end to end test framework입니다 end to end test란 사용자 입장에서 테스트하는 것을 말합니다. 좀 더 자세한 것은 아래의 글을 읽어보시면 좋을거 같아서 링크 공유드립니다. https://medium.com/hbsmith/e2e-test-알아보...
0. Sentry은 무엇인가? https://sentry.io/welcome/ sentry의 홈페이지를 보시면 아시겠지만 에러를 추적해주는 소프트웨어 입니다. 이게 왜 필요한가에 대해서는 애플리케이션을 만들고 출시하고 운영하다보면 애플리케이션을 사용하는 사용자가 에러난다고 피드백을 줄 때가 있다. 이런 피드백을 받을때 난감한 점은 유저가 어느때에 정확...
0. PWA란? PWA는 구글에서 밀고 있는 웹기술로 progress web app의 역자입니다. 대표적인 기능으로는 푸시 알람, 오프라인 지원, 앱 같이 설치 된다는 점입니다. 일단 저는 푸시 알람과 오프라인 지원은 완벽하게 지원되는 단계가 아닌 어떻게 도입할 수 있는지에 대해서 서술해보려고 합니다. 나중에 둘 다 도입 및 해결하게 되면 추가적으로 ...
이번에는 nuxt를 도커 이미지를 만들어서 다음 프로젝트에서 사용하는 기본 뼈대가 되거나 aws 등의 클라우드에 도커 이미지를 올리는 등에 쓰일 수 있도록 이미지를 만들어 보도록 하겠습니다. 일단은 저는 초기 설치 후 이것을 이미지로 만들어서 다음 프로젝트에도 사용되는 기본 뼈대가 되도록 이미지를 떠보도록 하겠습니다. 0. Docker 설치 h...
해당 예제는 Apex Up을 사용하여서 aws lambda에 배포합니다. 1. Nuxt.js 초기 설치 만약 배포가 문제없이 되었다면 커맨드 라인에 endpoint에 나오는 url로 가시면 배포되어 있는 애플리케이션을 보실 수 있습니다. Screenshot_2019-02-05 nuxtjs-with-lambda.png 이상입니다. git...