YLS is a logging system used by the Yourssu club at Soongsil University.
User logs are stored in localStorage, and when 10 logs accumulate or when the user exits, the logs are sent to the backend via an API call.
The user's userId is handled as an unidentifiable value within YLS.
- Install YLS.
npm install @yourssu/logging-system-react
yarn add @yourssu/logging-system-react
pnpm install @yourssu/logging-system-react- Wrap the Root Component with YLSWrapper and set the baseURL.
// When using vite
const baseURL = import.meta.env.VITE_API_YLS_URL;
ReactDOM.createRoot(document.getElementById('root')!).render(
<YLSWrapper baseURL={baseURL}>
<App />
</YLSWrapper>
);YLS handles the timestamp and platform internally.
The userId must be provided from the usage site, and the fields inside version and event must be filled with values provided by the PM.
Tracks the screen that users enter.
Tracks the user's clicks (events).
export const Home = () => {
const [count, setCount] = useState(0);
const router = useLocation();
return (
<>
<LogScreen
params={{
userId: 'test',
version: 1,
event: {
name: 'view',
path: router.pathname,
},
}}
>
<LogClick
params={{
userId: 'test',
version: 1,
event: {
name: 'click',
screen: 'home',
},
}}
>
<button onClick={() => setCount((count) => count + 1)}>count is {count}</button>
</LogClick>
</LogScreen>
</>
);
};