Function Home

example/web/src/app/page.tsx:60–946

()

}

export default function Home() {
  const [backendUrl, setBackendUrl] = useLocalStorageState(
    'tianji.backendUrl',
    {
      defaultValue: 'http://localhost:12345',
    }
  );
  const [websiteId, setWebsiteId] = useLocalStorageState('tianji.websiteId', {
    defaultValue: '',
  });
  const [injectedEl, setInjectedEl] = useState<HTMLScriptElement | null>(null);
  const [isInjecting, setIsInjecting] = useState(false);
  const [eventCounts, setEventCounts] = useState<Record<string, number>>({});
  const [isBatchSending, setIsBatchSending] = useState(false);
  const [batchProgress, setBatchProgress] = useState(0);

  const injectTracker = async () => {
    if (isInjecting) return;

    setIsInjecting(true);

    if (injectedEl) {
      injectedEl.remove();
      setInjectedEl(null);
      setEventCounts({});
    }

    if (!backendUrl || !websiteId) {
      toast.error(
        'Missing required fields! Please fill in both Backend URL and Website ID.',
        {
          description: 'Both fields are required to initialize the tracker.',
        }
      );
      setIsInjecting(false);
      return;
    }

    try {
      const scriptEl = await initTianjiTracker({
        url: backendUrl,
        websiteId,
      });

      console.log('scriptEl', scriptEl);
      if (scriptEl) {
        setInjectedEl(scriptEl);
      }
      toast.success('Tianji tracker injected successfully!', {
        description:
          'You can now start sending events to your analytics dashboard.',
      });
    } catch (error) {
      toast.error(
        'Failed to inject tracker. Please check your configuration.',
        {
          description: 'Make sure your backend URL is correct and accessible.',
        }