Slack 알림 비용을 지불하지 마세요: Sentry 오류를 무료로 Slack에 보내기

Source: Dev.to

Sentry의 Slack 연동에 비용을 지불하는 것이 지겹나요? 좋은 소식입니다: 비용을 낼 필요가 없습니다.
Sentry 웹훅, Vercel Edge Functions, 그리고 Slack의 무료 chat.postMessage API를 사용한 간단한 설정만으로, 프리미엄 플랜 없이도 Slack에서 실시간 오류 알림을 받을 수 있습니다.

직접 만들 수 있는 것을 왜 비용을 내나요?

Sentry의 기본 Slack 연동은 유료 장벽 뒤에 있습니다. 인디 개발자와 소규모 프로젝트에게는 그 비용이 정당화되기 어려운 경우가 많습니다.

대신 다음과 같이 할 수 있습니다:

• Sentry의 webhook 연동 사용
• Vercel Edge Function으로 이벤트 포착
• Slack의 무료 API를 이용해 포맷된 메시지 전송

동일한 결과를 얻을 수 있습니다. 추가 비용이 전혀 없습니다.

Step 1: Set Up the Sentry Webhook

1. Sentry 프로젝트 설정을 엽니다.
2. Legacy Integrations → Webhooks 로 이동합니다.
3. 새 웹훅을 추가합니다 (배포 후 여기서 Vercel 함수 URL을 붙여넣게 됩니다).

Sentry가 이제 오류 이벤트를 사용자 지정 엔드포인트로 전송합니다.

단계 2: Vercel Edge Function 만들기

Vercel이 처음이라면, 이는 관대한 무료 티어를 제공하는 서버리스 플랫폼으로, 코드를 엣지에서 실행합니다.

우리는 다음을 수행하는 Edge Function을 만들 것입니다:

• Sentry 이벤트 수신
• Slack Block Kit을 사용해 포맷팅
• API를 통해 Slack에 전송

export const config = {
  runtime: 'edge',
};

const sendMessage = async (
  channel,
  { level, formatted, environment, email, title, culprit, project }
) => {
  const isError = level === "error";

  const blocks = [
    {
      type: "section",
      text: {
        type: "mrkdwn",
        text: `${isError ? ":red_circle:" : ""} *${title}*`,
      },
    },
    {
      type: "section",
      fields: [
        { type: "mrkdwn", text: `*Environment:*\n${environment}` },
        { type: "mrkdwn", text: `*Level:*\n${level}` },
        { type: "mrkdwn", text: `*Project:*\n${project}` },
      ],
    },
    {
      type: "section",
      fields: [{ type: "mrkdwn", text: `*User:*\n${email}` }],
    },
    { type: "divider" },
    {
      type: "section",
      text: { type: "mrkdwn", text: `*Message:*\n${formatted}` },
    },
    {
      type: "section",
      text: { type: "mrkdwn", text: `*Culprit:*\n${culprit}` },
    },
    { type: "divider" },
  ];

  await fetch("https://slack.com/api/chat.postMessage", {
    method: "POST",
    headers: {
      "Content-Type": "application/json; charset=utf-8",
      Authorization: `Bearer ${process.env.SLACK_ACCESS_TOKEN}`,
    },
    body: JSON.stringify({ channel, blocks }),
  });
};

export default async (req) => {
  const body = await req.json();

  const {
    project,
    culprit,
    event: {
      level,
      logentry: { formatted },
      user: { email },
      environment,
      metadata: { title },
    },
  } = body;

  await sendMessage(process.env.CHANNEL_ID, {
    level,
    formatted,
    environment,
    email,
    title,
    culprit,
    project,
  });

  return new Response("Event received");
};

이것이 하는 일

• Sentry에서 오류 이벤트를 수신합니다.
• Block Kit을 사용해 구조화된 Slack 메시지를 포맷합니다.
• OAuth 토큰을 사용해 직접 Slack에 게시합니다.

3단계: Slack 앱 만들기 및 구성

1. 로 이동합니다.
2. 작업 공간에서 새 앱을 만듭니다.
3. OAuth & Permissions 아래에 chat:write 범위를 추가합니다.
4. 앱을 작업 공간에 설치하고 OAuth Bot Token을 복사합니다.

Vercel에 다음 환경 변수를 추가합니다:

• SLACK_ACCESS_TOKEN – 방금 복사한 봇 토큰입니다.
• CHANNEL_ID – 알림을 받을 Slack 채널의 ID입니다.

Step 4: Vercel에 배포

1. 코드를 GitHub에 푸시합니다.
2. 리포지토리를 Vercel에 가져옵니다.
3. 환경 변수(SLACK_ACCESS_TOKEN, CHANNEL_ID)를 추가합니다.
4. 배포합니다.

배포가 완료되면 Edge Function URL을 복사하여 Sentry 웹훅 설정에 붙여넣습니다.

5단계: 테스트하기

Sentry에서 테스트 오류를 발생시킵니다. 모든 설정이 올바르게 구성되어 있으면, 깔끔하고 구조화된 오류 알림이 몇 초 안에 Slack에 표시됩니다.

왜 이 설정이 승리하는가

• 완전 무료.
• 실시간 알림.
• 완전히 사용자 정의 가능한 Slack 포맷.
• 서버리스 및 저 유지보수.
• Sentry의 무료 플랜에서도 작동합니다.

코드를 가져가 커스터마이징하기

이 설정을 여러분의 워크플로에 맞게 자유롭게 적용해 보세요:

• 심각도 필터링 추가하기.
• 서로 다른 프로젝트를 서로 다른 채널로 라우팅하기.
• 스테이징과 프로덕션에 따라 포맷 변경하기.

이 설정이 비용 절감이나 모니터링 개선에 도움이 되었다면, 저장소에 ⭐를 달고 다른 개발자와 공유해 주세요.

GitHub 리포지토리

즐거운 개발 되세요 🚀