debug flag

lib/cookies.ts

@@ -9,6 +9,7 @@ export enum NAMES {
   COLOR_MODE='chakra-ui-color-mode',
   INDEXING_ALERT='indexing_alert',
   ADBLOCK_DETECTED='adblock_detected',
+  MIXPANEL_DEBUG='_mixpanel_debug',
 }
 
 export function get(name?: NAMES | undefined | null, serverCookie?: string) {

lib/mixpanel/useInit.tsx

 import _capitalize from 'lodash/capitalize';
 import type { Config } from 'mixpanel-browser';
 import mixpanel from 'mixpanel-browser';
+import { useRouter } from 'next/router';
 import React from 'react';
 import { deviceType } from 'react-device-detect';
 
 import appConfig from 'configs/app/config';
 import * as cookies from 'lib/cookies';
+import getQueryParamString from 'lib/router/getQueryParamString';
 
 import getGoogleAnalyticsClientId from './getGoogleAnalyticsClientId';
 
 export default function useMixpanelInit() {
   const [ isInited, setIsInited ] = React.useState(false);
+  const router = useRouter();
+  const debugFlagQuery = React.useRef(getQueryParamString(router.query._mixpanel_debug));
 
   React.useEffect(() => {
     if (!appConfig.mixpanel.projectToken) {
       return;
     }
 
+    const debugFlagCookie = cookies.get(cookies.NAMES.MIXPANEL_DEBUG);
+
     const config: Partial<Config> = {
-      debug: appConfig.isDev,
+      debug: Boolean(debugFlagQuery.current || debugFlagCookie),
     };
     const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
     const userId = getGoogleAnalyticsClientId();
@@ -36,6 +42,10 @@ export default function useMixpanelInit() {
     });
 
     setIsInited(true);
+
+    if (debugFlagQuery.current && !debugFlagCookie) {
+      cookies.set(cookies.NAMES.MIXPANEL_DEBUG, 'true');
+    }
   }, []);
 
   return isInited;