[Open WebUI] Artifacts 컴포넌트 메모리 누수 수정

PR 링크: open-webui/open-webui#22303 상태: Merged | 변경: +7 / -2

들어가며

Open WebUI의 Artifacts 컴포넌트에서 Svelte writable store의 subscribe()를 호출하면서 반환된 unsubscribe 함수를 저장하지 않아, 컴포넌트가 파괴된 후에도 구독이 남아있는 메모리 누수가 발생하고 있었다. 구독이 해제되지 않으면 전체 컴포넌트의 DOM 트리가 가비지 컬렉션 되지 않아 페이지 크래시까지 이어질 수 있다.

핵심 코드 분석

Before: 구독 반환값을 무시

onMount(() => {
    artifactCode.subscribe((value) => {
        // ...
    });

    artifactContents.subscribe((value) => {
        // ...
    });
});

After: 구독 해제 함수를 저장하고 cleanup에서 호출

onMount(() => {
    const unsubscribeArtifactCode = artifactCode.subscribe((value) => {
        if (contents) {
            const codeIdx = contents.findIndex((content) => content.content.includes(value));
            selectedContentIdx = codeIdx !== -1 ? codeIdx : 0;
        }
    });

    const unsubscribeArtifactContents = artifactContents.subscribe((value) => {
        contents = value;
        selectedContentIdx = contents ? contents.length - 1 : 0;
    });

    return () => {
        unsubscribeArtifactCode();
        unsubscribeArtifactContents();
    };
});

왜 이게 좋은가

1. 메모리 누수 해결: onMount의 반환 함수는 Svelte에서 컴포넌트 파괴 시 자동으로 호출되므로, 구독이 확실히 해제된다.
2. DOM 트리 해제: 구독이 해제되면 store에서 컴포넌트 콜백으로의 참조가 끊어져, 전체 DOM 트리가 GC 대상이 된다.
3. Svelte 모범 사례: onMount 반환 함수를 cleanup으로 사용하는 것은 Svelte의 권장 패턴이다.
4. 반복 사용 시 누적 효과: Artifacts 컴포넌트가 채팅 중 반복적으로 생성/파괴되므로, 이 수정 없이는 메모리가 지속적으로 증가한다.

참고 자료

• Svelte onMount Lifecycle
• Svelte Store Subscriptions