veza/apps/web/src/main.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'react-hot-toast';
import { App } from './app/App';
import './index.css';
import './styles/design-system.css';
import './styles/global-effects.css';
import './styles/header.css';
// Initialize i18next before React renders
import './lib/i18n';
// FIX #20: Initialize Sentry for error tracking
import { initSentry } from './lib/sentry';
// FE-API-019: Initialize MSW for development if enabled
import { env } from './config/env';

// HMR Force Update: 1765126900

// FIX #20: Initialize Sentry before React renders
initSentry();

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
      refetchOnWindowFocus: false,
    },
  },
});

// FE-API-019: Initialize MSW worker for development
async function enableMocking() {
  if (!env.USE_MSW) {
    return;
  }

  if (import.meta.env.DEV) {
    const { worker } = await import('./mocks/browser');

    // Start the worker
    await worker.start({
      onUnhandledRequest: 'bypass', // Don't warn about unhandled requests
      serviceWorker: {
        url: '/mockServiceWorker.js',
      },
    });

    // FIX #18: Utiliser logger structuré
    const { logger } = await import('./utils/logger');
    logger.info('[MSW] Mock Service Worker started', { component: 'MSW' });
  }
}

// Start MSW before rendering the app
enableMocking().then(() => {
  ReactDOM.createRoot(document.getElementById('root')!).render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient}>
        <BrowserRouter
          future={{
            v7_startTransition: true,
            v7_relativeSplatPath: true,
          }}
        >
          <App />
          <Toaster position="top-right" />
        </BrowserRouter>
      </QueryClientProvider>
    </React.StrictMode>,
  );
});