Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 69dd79dfad | |||
| a6c4cc53f9 | |||
| 29f83f8151 | |||
| cec08e3ab3 | |||
| 837567c1f4 | |||
| 4dcc0061fc |
@@ -2,7 +2,6 @@
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { getAppServices } from '@/lib/services/create-services';
|
||||
import { Button, Heading } from '@/components/ui';
|
||||
import { Terminal, Activity, AlertTriangle, RefreshCw, Home, ShieldAlert } from 'lucide-react';
|
||||
import { m } from 'framer-motion';
|
||||
@@ -26,9 +25,7 @@ export default function Error({
|
||||
return;
|
||||
}
|
||||
|
||||
const services = getAppServices();
|
||||
services.errors.captureException(error);
|
||||
services.logger.error('Application error caught by boundary', {
|
||||
console.error('Application error caught by boundary', {
|
||||
message: error?.message || 'Unknown error',
|
||||
stack: error?.stack,
|
||||
digest: error?.digest,
|
||||
|
||||
@@ -2,34 +2,28 @@
|
||||
|
||||
import { useEffect } from 'react';
|
||||
import { usePathname, useSearchParams } from 'next/navigation';
|
||||
import { getAppServices } from '@/lib/services/create-services';
|
||||
import { useAnalytics } from './useAnalytics';
|
||||
|
||||
/**
|
||||
* AnalyticsProvider Component
|
||||
*
|
||||
* Automatically tracks pageviews on client-side route changes.
|
||||
* This component handles navigation events for the Umami analytics service.
|
||||
*
|
||||
* Note: Website ID is now centrally managed on the server side via a proxy,
|
||||
* so it's no longer needed as a prop here.
|
||||
*/
|
||||
export default function AnalyticsProvider() {
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
const { trackPageview } = useAnalytics();
|
||||
|
||||
useEffect(() => {
|
||||
if (!pathname) return;
|
||||
|
||||
const services = getAppServices();
|
||||
const url = `${pathname}${searchParams?.size ? `?${searchParams.toString()}` : ''}`;
|
||||
|
||||
// Track pageview with the full URL
|
||||
// The service will relay this to our internal proxy which injects the Website ID
|
||||
services.analytics.trackPageview(url);
|
||||
|
||||
// Services like logger are already sub-initialized in getAppServices()
|
||||
// so we don't need to log here manually.
|
||||
}, [pathname, searchParams]);
|
||||
trackPageview(url);
|
||||
}, [pathname, searchParams, trackPageview]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
@@ -1,73 +1,69 @@
|
||||
'use client';
|
||||
|
||||
import { useCallback } from 'react';
|
||||
import { getAppServices } from '@/lib/services/create-services';
|
||||
import type { AnalyticsEventProperties } from '@/lib/services/analytics/analytics-service';
|
||||
|
||||
export type AnalyticsEventProperties = Record<string, any>;
|
||||
|
||||
/**
|
||||
* Sends a payload to the proxy API without loading backend config/logger dependencies.
|
||||
*/
|
||||
function sendAnalyticsPayload(type: 'event', data: Record<string, any>) {
|
||||
if (typeof window === 'undefined') return;
|
||||
if (process.env.NEXT_PUBLIC_CI === 'true') return;
|
||||
|
||||
const payload = {
|
||||
hostname: window.location.hostname,
|
||||
screen: `${window.screen.width}x${window.screen.height}`,
|
||||
language: navigator.language,
|
||||
referrer: document.referrer,
|
||||
title: document.title,
|
||||
...data,
|
||||
};
|
||||
|
||||
try {
|
||||
fetch('/stats/api/send', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ type, payload }),
|
||||
keepalive: true,
|
||||
}).catch(e => console.error('[Umami] Failed to send payload', e));
|
||||
} catch (error) {
|
||||
console.error('[Umami] Error sending analytics', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom hook for tracking analytics events with Umami.
|
||||
*
|
||||
* Provides a convenient way to track custom events throughout your application.
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* import { useAnalytics } from '@/components/analytics/useAnalytics';
|
||||
*
|
||||
* function MyComponent() {
|
||||
* const { trackEvent, trackPageview } = useAnalytics();
|
||||
*
|
||||
* const handleButtonClick = () => {
|
||||
* trackEvent('button_click', {
|
||||
* button_id: 'cta-primary',
|
||||
* page: 'homepage'
|
||||
* });
|
||||
* };
|
||||
*
|
||||
* return <button onClick={handleButtonClick}>Click me</button>;
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @example
|
||||
* ```tsx
|
||||
* // Track a custom pageview
|
||||
* const { trackPageview } = useAnalytics();
|
||||
* trackPageview('/custom-path?param=value');
|
||||
* ```
|
||||
*/
|
||||
export function useAnalytics() {
|
||||
const services = getAppServices();
|
||||
|
||||
/**
|
||||
* Track a custom event with optional properties.
|
||||
*
|
||||
* @param eventName - The name of the event to track
|
||||
* @param properties - Optional event properties (metadata)
|
||||
*/
|
||||
const trackEvent = useCallback(
|
||||
(eventName: string, properties?: AnalyticsEventProperties) => {
|
||||
services.analytics.track(eventName, properties);
|
||||
sendAnalyticsPayload('event', {
|
||||
name: eventName,
|
||||
data: properties,
|
||||
url: window.location.pathname + window.location.search,
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[Umami] Tracked event:', eventName, properties);
|
||||
}
|
||||
},
|
||||
[services]
|
||||
[]
|
||||
);
|
||||
|
||||
/**
|
||||
* Track a pageview (useful for custom navigation or SPA routing).
|
||||
*
|
||||
* @param url - The URL to track (defaults to current location)
|
||||
*/
|
||||
const trackPageview = useCallback(
|
||||
(url?: string) => {
|
||||
services.analytics.trackPageview(url);
|
||||
sendAnalyticsPayload('event', {
|
||||
url: url || window.location.pathname + window.location.search,
|
||||
});
|
||||
|
||||
if (process.env.NODE_ENV === 'development') {
|
||||
console.log('[Umami] Tracked pageview:', url ?? 'current location');
|
||||
}
|
||||
},
|
||||
[services]
|
||||
[]
|
||||
);
|
||||
|
||||
return {
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { m, AnimatePresence, LazyMotion, domAnimation } from 'framer-motion';
|
||||
import { m, AnimatePresence, LazyMotion } from 'framer-motion';
|
||||
import { MapPin, CheckCircle2, ArrowUpRight } from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import { Location } from '@/lib/map-data';
|
||||
|
||||
const loadFeatures = () => import('@/lib/framer-features').then(res => res.default);
|
||||
|
||||
const MinorNode = React.memo(({ loc, isActive, onEnter, onLeave }: { loc: Location, isActive: boolean, onEnter: (loc: Location) => void, onLeave: () => void }) => (
|
||||
<div
|
||||
className={`absolute group/minor cursor-pointer w-8 h-8 md:w-5 md:h-5 flex items-center justify-center ${isActive ? 'z-[60]' : 'z-10 hover:z-30'}`}
|
||||
@@ -76,7 +78,7 @@ export default function InteractiveMapPins({
|
||||
handleMouseLeave: () => void
|
||||
}) {
|
||||
return (
|
||||
<LazyMotion features={domAnimation}>
|
||||
<LazyMotion features={loadFeatures}>
|
||||
{locations.filter(l => l.type === 'minor_node').map((loc, idx) => (
|
||||
<MinorNode
|
||||
key={`minor-${loc.id || idx}`}
|
||||
|
||||
@@ -25,34 +25,45 @@ function MagneticRing({
|
||||
// Only run on client with mouse
|
||||
if (window.matchMedia("(pointer: coarse)").matches) return;
|
||||
|
||||
let ticking = false;
|
||||
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!ref.current) return;
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
|
||||
if (!ticking) {
|
||||
window.requestAnimationFrame(() => {
|
||||
if (!ref.current) {
|
||||
ticking = false;
|
||||
return;
|
||||
}
|
||||
|
||||
const rect = ref.current.getBoundingClientRect();
|
||||
const centerX = rect.left + rect.width / 2;
|
||||
const centerY = rect.top + rect.height / 2;
|
||||
|
||||
const distX = e.clientX - centerX;
|
||||
const distY = e.clientY - centerY;
|
||||
const distance = Math.sqrt(distX * Math.pow(distX, 2) + Math.pow(distY, 2)); // Fix: correct pythagoras
|
||||
const distX = e.clientX - centerX;
|
||||
const distY = e.clientY - centerY;
|
||||
const actualDistance = Math.sqrt(distX * distX + distY * distY);
|
||||
|
||||
// Calculate actual distance correctly
|
||||
const actualDistance = Math.sqrt(distX * distX + distY * distY);
|
||||
|
||||
if (actualDistance < pullRadius) {
|
||||
// Exponential falloff for natural magnetic feel
|
||||
const pullFactor = Math.pow(1 - (actualDistance / pullRadius), 2);
|
||||
|
||||
// Target offset (fraction of the distance based on strength)
|
||||
x.set(distX * pullFactor * (pullStrength / 100));
|
||||
y.set(distY * pullFactor * (pullStrength / 100));
|
||||
} else {
|
||||
// Return to origin smoothly
|
||||
x.set(0);
|
||||
y.set(0);
|
||||
if (actualDistance < pullRadius) {
|
||||
// Exponential falloff for natural magnetic feel
|
||||
const pullFactor = Math.pow(1 - (actualDistance / pullRadius), 2);
|
||||
|
||||
// Target offset (fraction of the distance based on strength)
|
||||
x.set(distX * pullFactor * (pullStrength / 100));
|
||||
y.set(distY * pullFactor * (pullStrength / 100));
|
||||
} else {
|
||||
// Return to origin smoothly
|
||||
x.set(0);
|
||||
y.set(0);
|
||||
}
|
||||
ticking = false;
|
||||
});
|
||||
ticking = true;
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', handleMouseMove);
|
||||
window.addEventListener('mousemove', handleMouseMove, { passive: true });
|
||||
return () => window.removeEventListener('mousemove', handleMouseMove);
|
||||
}, [x, y, pullRadius, pullStrength]);
|
||||
|
||||
|
||||
@@ -139,7 +139,7 @@
|
||||
"prepare": "husky",
|
||||
"preinstall": "npx only-allow pnpm"
|
||||
},
|
||||
"version": "2.2.87",
|
||||
"version": "2.2.91",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"@parcel/watcher",
|
||||
|
||||
Reference in New Issue
Block a user