Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
77f9f2c
feat: visibilitychange event로 사용자 이탈 감지
owl1753 Oct 16, 2024
50af6fa
fix: useEffect에 의존성 배열 추가
owl1753 Oct 16, 2024
ad2900e
refactor: async/await 제거
owl1753 Oct 16, 2024
3441ca4
refactor: cleanup 함수 추가
owl1753 Oct 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/logging-system/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"react-router-dom": "^6.21.3"
},
"devDependencies": {
"@types/node": "^22.7.5",
"@types/react-router-dom": "^5.3.3",
"@yourssu/crypto": "workspace:*",
"axios": "^1.6.4",
Expand Down
30 changes: 29 additions & 1 deletion packages/logging-system/src/contexts/YLSProvider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
import { createContext } from 'react';
import { createContext, useEffect } from 'react';

import { createAxiosInstance } from '@/apis/createAxiosInstance';
import { LogRequestList, LogResponse } from '@/types/LogType';
import { LogType } from '@/types/LogType';
import http from 'http';
import https from 'https';
import { SetLocalStorageClear } from '@/SetLocalStorage';

interface YLSProviderProps {
children: React.ReactNode;
Expand Down Expand Up @@ -32,6 +36,30 @@ export const YLSProvider = ({ children, baseURL }: YLSProviderProps) => {
}
};

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 }),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이전에 이야기했듯이 http.Agent의 keepAlive는 TCP keepalive를 위한 프로퍼티네요. fetch 사용해서 재작성이 필요해 보입니다.
다만 Firefox에서는 fetch의 keepalive 옵션이 지원되지 않으므로(131 기준 Experimental) 백엔드와 소통하여 POST 메소드를 하나 만드는 편이 좋아보입니다.

참고 - Node.js http.Agent
참고 - Can I use keepalive?

httpsAgent: new https.Agent({ keepAlive: true }),
});
};

document.addEventListener('visibilitychange', handleVisibilityChange);

return () => {
document.removeEventListener('visibilitychange', handleVisibilityChange);
};
}, []);

Comment on lines +39 to +62
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

return (
<YLSContext.Provider
value={{
Expand Down
Loading