Frontend Event Logging 의존성 분리하기 (click, view)

프론트엔드 개발을 하다보면 이벤트로깅이 필요한 경우가 종종 있다. 현재 개발하고있는 프로젝트에선 mixpanel 을 사용하여 이벤트로깅을 하고있고, 이전 회사에서는 GA, 서드파티 CRM 을 사용해 이벤트로깅을 했었다.

가장 대표적인 click, view event logging에 대해서 정리해보려한다.

Click Event

보편적으로 클릭 이벤트로깅의 형태는 아래와 같을 것이다.

function App () {
    const event = useEvent(); // 대충 이벤트로깅 주체
  
  	const handleClick = () => {
  		// ...비지니스 로직
        
        event.click('click_button');
    };
  
	return <Button onClick={handleClick}>button</Button/>;
}

이렇게 보면 간단해보이지만 만약 비지니스 로직도 길어지고, 이벤트 전달 parameter도 여러개 추가된다면 어떨까?

function App () {
    const event = useEvent(); // 대충 이벤트로깅 주체
  
  	const handleClick = () => {
  		// ...비지니스 로직
  		// ...비지니스 로직
  		// ...비지니스 로직
  		// ...비지니스 로직      
  		// ...비지니스 로직
  		// ...비지니스 로직
  		// ...비지니스 로직
  		// ...비지니스 로직
   		// ...비지니스 로직
  		// ...비지니스 로직
      
        event.click('click_user_info_button')
        	id: 1,
          	name: 'hoon',
           	age: 30,
          	address: 'suwon',
          	// ...param
        });
    };
  
	return <Button onClick={handleClick}>button</Button/>;
}

이전 코드에 비해 상당히 복잡해진것을 볼 수 있다. 이렇게되면 비지니스 로직과 이벤트로깅 부분이 의존성이 생기게 되고, 한눈에 파악하기 어려워졌다.!


이에 대한 의존성을 제거하기 위해, 클릭 이벤트로깅 만을 담당하는 부분만 ClickLogger라는 컴포넌트로 아래와같이 분리하였다.

interface ClickLoggerProps extends PropsWithChildren {
  eventName: string;
  property?: Record<string, string>;
}

export function ClickLogger({ eventName, property, children }: ClickLoggerProps) {
  const event = useEvent();

  const child = Children.only(children) as ReactElement;

  return cloneElement(child, {
    onClick: () => {
      event.click(eventName, { ...property });

      if (child.props.onClick) {
        child.props.onClick();
      }
    },
  });
}

위의 컴포넌트를 활용하여 아래와 같이 작성하였고, 이를통해 비지니스 로직과 이벤트로깅의 의존성을 분리할 수 있다.

function App() {
  const handleClick = () => {
    // ...비지니스 로직
  };
  
  return (
    <ClickLogger eventName={EVENT.EXAMPLE_CLICK} property={{ id: 1 }}>
      <Button onClick={handleClick}>button</Button>
    </ClickLogger>
  );
}

View Event

page view event logging은 그냥 hook만들어서 페이지 단위에서 쓰면 굿~ useViewLogging