Observability

// src/hooks/use-error-handler.ts
import {extractUnifiedError} from '@/lib/error-utils';

const handleError = (error: unknown, options?: {title?: string}) => {
  const unified = extractUnifiedError(error, t);

  console.error('[Error Handler]', {
    type: unified.type,        // 'server' | 'network' | 'validation' | 'frontend'
    message: unified.message,
    description: unified.description,
    code: unified.code,
    timestamp: new Date().toISOString(),
    url: window.location.href,
    userAgent: navigator.userAgent,
  });

  toast({
    title: options?.title || t('common.error'),
    description: unified.message,
    variant: 'destructive',
  });
};

// src/main.tsx
import * as Sentry from '@sentry/react';

if (import.meta.env.VITE_SENTRY_DSN) {
  Sentry.init({
    dsn: import.meta.env.VITE_SENTRY_DSN,
    environment: import.meta.env.MODE,
    tracesSampleRate: 0.1,
    beforeSend(event) {
      if (event.request?.headers) {
        delete event.request.headers['authorization'];
        delete event.request.headers['cookie'];
      }
      return event;
    },
  });
}

npm install web-vitals

// src/lib/observability/web-vitals.ts
import {getCLS, getFID, getFCP, getLCP, getTTFB} from 'web-vitals';

export const reportWebVitals = () => {
  getCLS(console.log);
  getFID(console.log);
  getFCP(console.log);
  getLCP(console.log);
  getTTFB(console.log);
};

// src/main.tsx — call once, before render
import {reportWebVitals} from '@/lib/observability/web-vitals';

if (import.meta.env.MODE === 'production') {
  reportWebVitals();
}

import {lazy, Suspense} from 'react';
import {Skeleton} from '@/components/ui/skeleton';

const HeavyEditor = lazy(() => import('@/components/acs/heavy-editor'));

export function View() {
  return (
    <Suspense fallback={<Skeleton className="h-64 w-full" />}>
      <HeavyEditor />
    </Suspense>
  );
}

<img src="/logo.png" alt="Logo" width={200} height={50} loading="lazy" decoding="async" />

import {useDebounce} from '@/hooks/use-debounce';

const [search, setSearch] = useState('');
const debouncedSearch = useDebounce(search, 250);

useEffect(() => {
  if (debouncedSearch) {
    fetchResults(debouncedSearch);
  }
}, [debouncedSearch]);

if (import.meta.env.MODE === 'development') {
  console.debug('[Debug]', data);
}

// Enable via query param: ?debug=true
const isDebugMode = () => {
  if (typeof window === 'undefined') return false;

  const params = new URLSearchParams(window.location.search);
  return params.get('debug') === 'true';
};

// Enable via localStorage: localStorage.setItem('debug', 'true')
const isDebugModeLocalStorage = () => {
  if (typeof window === 'undefined') return false;

  return localStorage.getItem('debug') === 'true';
};

export const debug = (...args: unknown[]) => {
  if (isDebugMode() || isDebugModeLocalStorage() || import.meta.env.MODE === 'development') {
    console.debug('[Debug]', ...args);
  }
};

import {debug} from '@/lib/observability/debug';

debug('API response:', response);
debug('User state:', user);
debug('Form values:', formValues);

// src/components/debug-panel.tsx
import {useState} from 'react';
import {useAuth} from '@/hooks/use-auth';

export function DebugPanel() {
  const [open, setOpen] = useState(false);
  const {user} = useAuth();

  if (import.meta.env.MODE !== 'development') {
    return null;
  }

  return (
    <div className="fixed bottom-4 right-4 z-50">
      <Button onClick={() => setOpen(!open)} size="sm">
        🐛 Debug
      </Button>

      {open && (
        <Card className="mt-2 p-4 max-w-md max-h-96 overflow-auto">
          <h3 className="font-bold mb-2">Debug Info</h3>
          <pre className="text-xs">
            {JSON.stringify(
              {
                user,
                apiUrl: window.__RUNTIME_CONFIG__?.API_URL,
                mode: import.meta.env.MODE,
                locale: document.cookie.match(/locale=([^;]+)/)?.[1],
              },
              null,
              2
            )}
          </pre>
        </Card>
      )}
    </div>
  );
}

// Good: Structured with context
console.log('[Auth]', 'Login success', {username, role});

// Bad: Unstructured string
console.log('User admin logged in as ADMIN');

console.error('[Error]', error);     // Errors (red)
console.warn('[Warning]', warning);  // Warnings (yellow)
console.info('[Info]', info);        // Info (blue)
console.debug('[Debug]', debug);     // Debug (gray, hidden by default)

console.group('[Import] Dry-run started');
console.log('File:', file.name);
console.log('Size:', file.size);
console.log('Type:', file.type);
console.groupEnd();