DOCS/troubleshooting/250818_happybell80_무한스크롤및API프록시.md

무한 스크롤 및 Gateway API 프록시 문제 해결

오후 11시 12분

ChromaDB 대화 히스토리 fetch_limit 문제

문제 상황

• 증상: /api/history가 오래된 대화(8/12)만 반환, 오늘(8/18) 대화 누락
• 원인: ChromaDB의 fetch_limit이 limit * 3 (60개)로 작아서 최근 대화를 가져오지 못함
• 영향: 사용자가 최근 대화를 볼 수 없음

문제 분석

• ChromaDB는 벡터 DB로 시간순 정렬을 보장하지 않음
• collection.get()이 무작위 순서로 데이터 반환
• 42개 대화 중 무작위 60개를 요청하면 최근 대화가 누락될 수 있음

해결 방법

# app/core/memory/storage.py 수정
# 기존
fetch_limit = limit * 3 if (before or after) else limit

# 수정
fetch_limit = 1000  # 충분히 큰 값으로 설정

추가 개선 (미래 대비)

# date 필드 추가로 날짜별 필터링 준비
metadata = {
    "timestamp": "2024-08-18T10:13:41.444000",  # 기존
    "date": "2024-08-18",  # 새로 추가 (날짜만)
}

Gateway API 프록시 404 문제

문제 상황

• 증상: 프론트엔드에서 /gateway/api/config, /gateway/api/history 404 에러
• 원인: Gateway가 /api/chat만 프록시하고 나머지 엔드포인트 없음
• 영향: 프론트엔드 설정 로드 실패, 대화 히스토리 조회 불가

해결 방법

# robeing-gateway/app/main.py에 추가
@app.get("/api/{path:path}")
async def proxy_get(path: str, request: Request, x_user_id: str = Depends(get_verified_user)):
    """Proxy GET requests to robeing service"""
    robeing_info = user_cache.get(x_user_id) or get_default_robeing_info()
    base_url = robeing_info['robeing_url'].rstrip('/') if 'robeing_url' in robeing_info else f"http://{robeing_info['host']}:{robeing_info['port']}"
    
    response = await http_client.get(
        f"{base_url}/api/{path}",
        params=request.query_params,
        headers={"X-User-Id": x_user_id}
    )
    return response.json() if response.status_code == 200 else {}

프론트엔드 getUserHistory 중복 API 문제

문제 상황

• 증상: /api/user/{username}/history 엔드포인트 404 에러
• 원인: 불필요한 중복 API (getMessages와 기능 중복)

해결 방법

// src/services/robeing-api.ts 수정
export async function getUserHistory(_userId: string, _token: string = '') {
  // getMessages 재사용하여 중복 제거
  const result = await getMessages(undefined, 1);
  
  return {
    has_history: result.messages.length > 0,
    last_conversation: result.messages[0]?.timestamp || null,
    last_topic: result.messages[0]?.text?.substring(0, 50) || null,
    greeting: '안녕하세요',
    conversation_count: result.messages.length
  };
}

무한 스크롤 작동 불가 문제

문제 상황

• 증상: 스크롤을 올려도 이전 대화가 로드되지 않음
• 원인: oldestMessageTime이 초기화되지 않아 loadMoreMessages 조건 충족 안 됨
• 영향: 과거 대화를 볼 수 없음

문제 분석

// loadMoreMessages 조건
if (!hasMore || isLoadingMore || !oldestMessageTime || !config) return;
// oldestMessageTime이 null이면 항상 return

해결 방법

// 초기 메시지 로드 시 oldestMessageTime 설정
if (initialMessages.length > 0) {
  const oldestMsg = initialMessages[0];
  setOldestMessageTime(oldestMsg.timestamp instanceof Date ? 
    oldestMsg.timestamp.toISOString() : oldestMsg.timestamp);
}

// 히스토리 로드 시에도 설정
if (sortedMessages.length > 0) {
  const oldestTime = sortedMessages[0].timestamp;
  setOldestMessageTime(oldestTime instanceof Date ? oldestTime.toISOString() : oldestTime);
}

디버깅 팁

// 콘솔 로그 추가로 문제 추적
console.log('[무한스크롤] Observer 설정 시도', {
  triggerRef: !!loadMoreTriggerRef.current,
  config: !!config,
  hasMore,
  isLoadingMore
});

TypeScript 빌드 오류 해결

문제 상황

• 증상: 70개 이상의 TypeScript 타입 오류
• 원인: shared/schema.ts 파일 누락, Chart.js 타입 불일치 등

해결 방법

1. schema.ts 생성

// shared/schema.ts
export interface Integration {
  id: string;
  name: string;
  status: 'connected' | 'disconnected';
  // ... 필요한 필드 추가
}

2. Chart.js font weight 수정

// 기존
weight: '500'
// 수정
weight: 'normal' as const

교훈

1. ChromaDB는 벡터 DB의 한계를 인지해야 함

• 시간순 조회에는 부적합
• 대화 히스토리는 PostgreSQL이 더 적합
• 임시방편으로 fetch_limit 증가, 장기적으로 DB 변경 필요

2. Gateway 설계 시 확장성 고려

• 처음부터 범용 프록시 패턴 구현
• 특정 엔드포인트만 하드코딩하지 말 것
• /{path:path} 패턴으로 유연하게 처리

3. 무한 스크롤 구현 시 초기값 설정 필수

• 모든 상태 변수의 초기화 시점 명확히
• 특히 조건문에 사용되는 변수는 반드시 초기화
• 디버그 로그를 미리 추가하여 문제 추적 용이하게

4. TypeScript 오류와 빌드 성공은 별개

• Vite는 타입 오류 무시하고 빌드
• 타입 오류는 개발 경험 저하시키지만 런타임 영향 없음
• 점진적으로 타입 오류 해결 필요

5. API 중복 제거

• 비슷한 기능의 API 여러 개 만들지 말 것
• 기존 API 재사용으로 복잡도 감소
• getUserHistory처럼 wrapper 함수로 해결

6. 로그 기반 디버깅의 중요성

• 51124 서버 로그 분석으로 ChromaDB 문제 파악
• 프론트엔드 콘솔 로그로 무한 스크롤 문제 추적
• 문제 발생 전 로그 추가가 해결 시간 단축

---

작성자: happybell80 & Claude
관련 파일: rb10508_micro/app/core/memory/storage.py, robeing-gateway/app/main.py, frontend-customer/src/components/chat-interface.tsx