fix(@yourssu/logging-system): unload event 시 서버로 log 전송

[owl1753]

1️⃣ 어떤 작업을 했나요? (Summary)

• resolved bug: 페이지 이탈 시 로그 전송 안되는 현상 #43

기존 코드에 영향을 미치지 않는 변경사항

• 없습니다.

기존 코드에 영향을 미치는 변경사항

• YLSProvider에 visibilitychange 이벤트를 추가하는 코드를 작성했습니다.

버그 픽스

• 서버로 로그가 잘 전송됩니다.

2️⃣ 알아두시면 좋아요!

• unload => visibilitychange로 변경하여 bfcache issue와 신뢰성 문제를 해결합니다. (참고)
• keepalive를 이용하여 브라우저가 종료 되어도 요청을 유지합니다.
• 응답은 고려하지 않습니다.
• 브라우저 생명 주기 상 새로고침 시에도 로그가 전송됩니다.

3️⃣ 추후 작업

• 추후 Pending Beacon API가 정식적으로 지원된다면 이것으로 변경하는 게 좋을 듯 합니다. Pending Beacon API

4️⃣ 체크리스트 (Checklist)

• main 브랜치의 최신 코드를 pull 받았나요?

[minai621]

useEffect 내부에 적용해서 cleanup 있을 때 함께 정리할 수 있도록 하면 더 좋을 것 같아요.

[owl1753]

refactor: cleanup 함수 추가 cleanup 함수를 추가하라는 말씀이신가요?

[Hanna922]

refactor: cleanup 함수 추가
현재 코드에서 이 변경 사항 차이점이 있는 건가요?

[minai621]

@Hanna922

refactor: cleanup 함수 추가 현재 코드에서 이 변경 사항 차이점이 있는 건가요?

YLSProvider보다 상위 Provider나 App 컴포넌트 내에서 리렌더링이 일어나면, 이벤트 리스너가 다시 등록 되면서, 메모리 누수의 가능성이 있을 것 같아요.

[Hanna922]

once: true 속성이 이벤트 리스너를 자동으로 제거하는 것으로 알고 있는데 제거 전에 리렌더링이 발생할 수 있다는 말씀이실까요??
remove 기능만 하는 거라면 변경 전과 동일한 것으로 알고 있어서 여쭤봅니당

[minai621]

Provider 컴포넌트는 여전히 이벤트 리스너 호출 후 once: true로 지워지는 것보다 먼저 리렌더링 될 수 있어서 클린업을 해야 하지 않을까 싶어요

[minai621]

Provider가 최상위에서 정의될텐데, 의존성 배열이 없으면 기대하지 않은 렌더링 상황에서 매번 호출될 것 같아요. (이벤트 리스너가 계속 등록되고 삭제될 듯합니다)

[owl1753]

fix: useEffect에 의존성 배열 추가에서 수정했습니다.

[minai621]

찾아보니까 keep-alive는 tcp 세션을 유지해주는 역할이라고 하는데, 브라우저가 이탈했을 때 전송을 유지하지 않는 것 같아요

[minai621]

@EATSTEAK
요청을 클라이언트에서 처리하면 브라우저 이탈시 동작을 보장하지 못할 것 같은데, 서비스 워커에서 시도해보는게 어떨까요? 최고 기술자 EATSTEAK의 의견이 궁금합니다.

[EATSTEAK]

useEffect를 사용해서 이벤트를 리스닝하게 되면 재랜더링시마다 이벤트를 재등록하게 되는데, useRef를 이용해서 등록하게 되면 그런 문제가 없을 듯 합니다.

Suggested change

	useEffect(() => {
	const handleVisibilityChange = () => {
	if (document.visibilityState === 'visible') return;
	const logList: LogType[] = JSON.parse(localStorage.getItem('yls-web') as string) || [];
	const data: LogRequestList = {
	logRequestList: logList,
	};
	SetLocalStorageClear();
	void axiosInstance.put('/log/list', data, {
	httpAgent: new http.Agent({ keepAlive: true }),
	httpsAgent: new https.Agent({ keepAlive: true }),
	});
	};
	document.addEventListener('visibilitychange', handleVisibilityChange);
	return () => {
	document.removeEventListener('visibilitychange', handleVisibilityChange);
	};
	}, []);
	const documentRef = useRef(document);
	const logRequestListRef = useRef<LogRequestList>({ logRequestList: [] });
	const sendLogsOnDisappear = useCallback(function() {
	if (documentRef.current.visibilityState === 'visible') return;
	const logRequestList: LogType[] = JSON.parse(localStorage.getItem('yls-web') as string) || [];
	logRequestListRef.current = {
	logRequestList,
	};
	}, []);
	document.current.addEventListener('visibilitychange', sendLogsOnDisappear);
	useEffect(() => {
	SetLocalStorageClear();
	void axiosInstance.put('/log/list', logRequestListRef.current, {
	httpAgent: new http.Agent({ keepAlive: true }),
	httpsAgent: new https.Agent({ keepAlive: true }),
	});
	}, []);

[owl1753]

useRef로 document를 참조해도 결국 YLSProvider 컴포넌트가 리렌더링 되면 ref가 참조하는 메서드를 다시 실행하니까 이벤트 리스너가 재등록되지 않나요?

[EATSTEAK]

DOM Standard에 보시면 아래와 같은 내용이 있습니다.

The event listener is appended to target’s event listener list and is not appended if it has the same type, callback, and capture.

말씀하신 대로 매번 addEventListener가 실행되겠지만, useCallback을 empty deps로 사용해서 handleVisibilityChange 함수를 넘겨주면 중복해서 리스너가 bind되지는 않겠네요.

[owl1753]

하나 또 배워갑니다...