같은 실수를 반복하지 않기 위해
먹기록 프로젝트를 운영하면서 사이트 접속 장애를 겪은 적이 있다. 당시 에러 로그를 남기지 않아서 문제를 추적하는 데 큰 어려움을 겪고 그 경험을 바탕으로 에러 로깅의 중요성에 대해 회고글을 작성한 적도 있다.
서비스가 배포된 이후에는 사용자의 환경에서 발생하는 다양한 문제를 실시간으로 파악하기가 어렵다. 이럴 때 에러 로깅 시스템이 잘 구축되어 있다면, 사용자가 어떤 환경에서 접속했는지, 그리고 어떤 에러가 발생했는지 즉시 확인하고 신속히 대응할 수 있다. 이를 교훈 삼아, 잇핏 프로젝트에서는 에러 로깅 시스템을 도입했는데 이번 글에서는 구현 과정에 대해 기록해보려고 한다.
에러 로깅 시스템 : Nodemailer 도입기
📝왜 Nodemailer를 선택했을까?
에러 로깅 도구로 여러 옵션을 고민한 끝에 Nodemailer 를 이용하기로 했는데, 그 이유로는 다음과 같다.
- 비용 효율성 : Nodemailer 는 무료로 이메일 전송 API를 제공하여 부담 없이 시작할 수 있다.
- 간단한 커스터마이징 : 에러 메시지를 HTML 형식으로 작성해, 사용자 환경, 기기 정보, 발생 위치 등 내가 보내고 싶은 핵심 정보를 구조적으로 담아 전송할 수 있다.
- 프로젝트 규모 적합성 : 초기 단계의 소규모 프로젝트에 적합하며, 추후 프로젝트가 성장하면 Sentry와 같은 고급 모니터링 도구로 확장이 가능하다.
물론 Sentry 는 JavaScript 런타임 에러, 네트워크 에러 등 다양한 문제를 더 정밀하게 추적하고 성능 모니터링도 가능하지만, 현재 프로젝트에서는 Nodemailer 가 간단하고 빠르게 설정할 수 있다는 점에서 더 적합하다고 판단했다.
에러 로깅 시스템 구현 과정
nodemailer 를 먼저 설치해준다.
npm install nodemailer
Nodemailer는 기본적으로 SMTP 프로토콜을 사용하여 이메일을 전송하는데 Gmail, AWS SES 등 다양한 서비스를 지원하고 있다. 나는 지메일을 사용하기 위해 구글 계정에 들어가 앱 비밀번호를 먼저 생성해줬다.
구글 > 계정 > 보안 > 2단계 인증 > 앱 비밀번호를 생성한다. 여기서 생성한 비밀번호를 복사해서 .env 에 넣어준다.
NEXT_PUBLIC_EMAIL=메일 받을 이메일 주소 넣기
NEXT_PUBLIC_EMAIL_PWD=발급받은 비밀번호 넣기 noodemailer 설정
이제 이메일을 전송하는데 필요한 설정을 한다.
- host : SMTP 서버 주소
- port : SMTP 통신에 사용할 포트 (465는 SSL 암호화, 587은 STARTTLS 암호화)
- secure : port 를 465로 할경우 true 로 주어야 한다, 587 은 false 로 준다.
const transporter = nodemailer.createTransport({
host: 'smtp.gmail.com',
port: 465,
secure: true,
auth: {
user: process.env.NEXT_PUBLIC_EMAIL,
pass: process.env.NEXT_PUBLIC_EMAIL_PWD,
},
});이메일 전송 로직 작성
nodemailer의 sendMail 메서드를 사용하여 이메일 전송 로직을 작성한다. from,to,subject 을 설정해주고 html 문법을 이용해 보내고 싶은 형식을 구성할 수 있다.
try {
await transporter.sendMail({
from: process.env.NEXT_PUBLIC_EMAIL,
to: process.env.NEXT_PUBLIC_EMAIL,
subject: 'Application Error Notification',
html: `
<h2>Error Notification</h2>
<p><strong>Error Location:</strong> ${errorLocation || 'Unknown'}</p>
<p><strong>Error Message:</strong> ${errorMessage || 'No message provided'}</p>
<p><strong>User Agent:</strong> ${userAgent}</p>
<p><strong>Device Type:</strong> ${deviceType}</p>
<p><strong>Is Mobile:</strong> ${isMobile ? 'Yes' : 'No'}</p>
`,
});
return NextResponse.json({ success: 'Error details emailed successfully' }, { status: 200 });
} catch (error) {
console.error('Error sending email:', error);
return NextResponse.json({ error: 'Failed to send error details' }, { status: 500 });
}실제로 받은 에러 로그
아래는 개발하는 과정에서 받았던 에러 로그이다. 로그에는 요청 URL, 에러 메시지, 사용자 환경 정보 등이 잘 담아서 오고있다.
실제로 서비스 운영 중 에러 로그를 메일로 받은 적이 있는데, 바로 메일로 상황을 확인하고 문제를 파악할 수 있었다.
마무리하며..
잇핏 프로젝트를 배포하며, 이번에는 에러 로그 시스템 덕분에 예상치 못한 오류에도 빠르게 대응할 준비가 되어 있기 때문에 단순히 안정적인 서비스를 제공하는 것을 넘어 문제를 예측하고 대비할 수 있다는 든든함을 느낄 수 있었다.
또한 에러 로깅 처리를 이렇게 빠르고 간단하게 가능하다는 점에 정말 만족했다. 특히, 무료로 제공되다 보니 사용할때도 부담이 적다는 부분도 너무 만족스러운 부분이다. 다만, 에러 로그가 이메일로만 전달되다 보니 분석하고 패턴을 파악하는 데는 조금 불편할 수 있겠다는 생각이 들었다. 서비스 규모가 커지면 확실히 더 체계적인 도구가 필요할 것 같고, 이런면에서 유저가 많아지면 Sentry 툴을 도입해 볼 생각이다.
