Sentry에서 에러는 보이는데 수정하기가 어렵다면?

export enum ErrorCode {
  AUTH_EXPIRED = 'AUTH_EXPIRED',
  BUSINESS_RULE = 'BUSINESS_RULE',
  NETWORK = 'NETWORK',
  TIMEOUT = 'TIMEOUT',
  SERVER = 'SERVER',
  UNKNOWN = 'UNKNOWN',
}

export class AppError extends Error {
  constructor(
    public readonly code: ErrorCode,
    message: string,
    public readonly options: {
      status?: number
      userMessage?: string // 유저에게 안전하게 보여줄 메시지
      level?: 'fatal' | 'error' | 'warning' | 'info'
      recoveryAction?: 'reload' | 'goHome' | 'retry' | 'goLogin'
      context?: Record<string, unknown>
      cause?: unknown
    }
  ) {
    super(message)
    this.name = 'AppError'
  }
}

// Axios Interceptor 예시
import axios, { AxiosError } from 'axios'

function toAppError(error: unknown): AppError {
  if (error instanceof AppError) return error

  if (axios.isAxiosError(error)) {
    const e = error as AxiosError<any>
    const status = e.response?.status
    const serverMessage = e.response?.data?.message

    // 인증 만료: Warning 레벨로 갱신 유도
    if (status === 401) {
      return new AppError(ErrorCode.AUTH_EXPIRED, 'Auth expired', {
        status,
        userMessage: '세션이 만료되었습니다. 다시 로그인해 주세요.',
        recoveryAction: 'goLogin',
        level: 'warning',
        cause: error,
      })
    }

    // 비즈니스 에러: Info 레벨 (Sentry 알림 불필요)
    if (status && status >= 400 && status < 500) {
      return new AppError(ErrorCode.BUSINESS_RULE, serverMessage ?? 'Bad request', {
        status,
        level: 'info',
        userMessage: serverMessage,
        cause: error,
      })
    }

    // 서버 장애: Error 레벨
    return new AppError(ErrorCode.SERVER, 'Server error', {
      status: status ?? 500,
      userMessage: '일시적인 오류가 발생했습니다. 잠시 후 다시 시도해 주세요.',
      level: 'error',
      cause: error,
    })
  }

  return new AppError(ErrorCode.UNKNOWN, 'Unknown error', { cause: error })
}

api.interceptors.response.use(
  (res) => res,
  async (error) => throw toAppError(error)
)

const REQUEST_TIMEOUT_MS = 10_000

export async function fetchWithTimeout(input: RequestInfo, init?: RequestInit) {
  const controller = new AbortController()
  const timeoutId = window.setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS)

  try {
    return await fetch(input, { ...init, signal: controller.signal })
  } catch (e) {
    if (e instanceof DOMException && e.name === 'AbortError') {
      throw new AppError(ErrorCode.TIMEOUT, 'Request timeout', {
        userMessage: '요청이 지연되고 있습니다. 네트워크를 확인해 주세요.',
        level: 'warning',
        cause: e,
      })
    }
    throw e
  } finally {
    window.clearTimeout(timeoutId)
  }
}

// 특정 영역만 Fallback으로 대체하는 경계 컴포넌트
export class WidgetErrorBoundary extends React.Component<
  { fallback: React.ReactNode; onError?: (error: unknown) => void },
  { hasError: boolean }
> {
  state = { hasError: false }

  static getDerivedStateFromError() {
    return { hasError: true }
  }

  componentDidCatch(error: unknown) {
    this.props.onError?.(error)
  }

  render() {
    if (this.state.hasError) return this.props.fallback
    return this.props.children
  }
}

'use client';
import * as Sentry from '@sentry/nextjs';
import { useEffect } from 'react';

export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  useEffect(() => {
    Sentry.captureException(error, {
      tags: { section: 'global-error-boundary' }
    });
  }, [error]);

  return (
    <div>
      <h2>문제가 발생했습니다.</h2>
      <button onClick={() => reset()}>다시 시도</button>
    </div>
  );
}

// 상세 페이지 진입 실패 시 Context 예시
Sentry.withScope((scope) => {
  scope.setTag('page_type', 'product_detail')
  scope.setContext('product_info', {
    productId: id,
    category: categoryName,
  })
  Sentry.captureException(error)
})

try {
  await processPayment(paymentData)
} catch (error) {
  Sentry.captureException(error, {
    tags: {
      payment_method: 'kakaopay',
      pg_provider: 'tosspayments',
    },
    extra: {
      // extra는 context로 대체 가능
      orderId: 'ORD-12345',
      errorCode: error.response?.code, // PG사 전용 에러 코드
    },
  })
}

const CHUNK_RELOAD_GUARD_KEY = 'chunk_reload_guard_v1'

function isChunkLoadLikeError(reason: unknown) {
  const message =
    reason instanceof Error ? reason.message : typeof reason === 'string' ? reason : ''

  return (
    message.includes('ChunkLoadError') ||
    message.includes('Loading chunk') ||
    message.includes('Failed to fetch dynamically imported module')
  )
}

export function setupChunkLoadErrorHandler() {
  const tryReloadOnce = () => {
    const alreadyReloaded = sessionStorage.getItem(CHUNK_RELOAD_GUARD_KEY) === '1'
    if (alreadyReloaded) return

    sessionStorage.setItem(CHUNK_RELOAD_GUARD_KEY, '1')
    window.location.reload()
  }

  window.addEventListener('error', (event) => {
    if (isChunkLoadLikeError(event.error)) tryReloadOnce()
  })

  window.addEventListener('unhandledrejection', (event) => {
    if (isChunkLoadLikeError(event.reason)) tryReloadOnce()
  })
}

import { useEffect, useState } from 'react'

export function useIsOnline() {
  const [isOnline, setIsOnline] = useState(() => navigator.onLine)

  useEffect(() => {
    const onOnline = () => setIsOnline(true)
    const onOffline = () => setIsOnline(false)

    window.addEventListener('online', onOnline)
    window.addEventListener('offline', onOffline)
    return () => {
      window.removeEventListener('online', onOnline)
      window.removeEventListener('offline', onOffline)
    }
  }, [])

  return isOnline
}