Webserver/components/Analytics.tsx

'use client';

import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';

export function Analytics() {
    const pathname = usePathname();
    const searchParams = useSearchParams();
    const queryString = searchParams.toString();
    const visitPath = queryString ? `${pathname}?${queryString}` : pathname;

    useEffect(() => {
        // Send beacon on mount and path change
        const sendBeacon = async () => {
            try {
                // Send beacon to THIS website's API, which will relay it to the admin dash
                await fetch('/api/analytics', {
                    method: 'POST',
                    body: JSON.stringify({ path: visitPath }),
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    keepalive: true,
                });
            } catch (e) {
                if (process.env.NODE_ENV !== 'production') {
                    console.error('Analytics fail', e);
                }
            }
        };

        sendBeacon();
    }, [visitPath]);

    return null;
}