| State Type | Solution | Example | |------------|----------|---------| | | TanStack Query (React Query) + fetch | List of users, product details | | URL state | React Router | Query params, route params | | Client global state | Zustand / Redux Toolkit | User session, theme preference | | Local UI state | useState / useReducer | Form input, modal open/close |
path: '*', element: <NotFoundPage />, , ]); react application architecture for production pdf
// app/router/index.tsx import createBrowserRouter from 'react-router-dom'; import lazy, Suspense from 'react'; const DashboardPage = lazy(() => import('@/features/dashboard/pages/DashboardPage')); const ProductsPage = lazy(() => import('@/features/products/pages/ProductsPage')); const NotFoundPage = lazy(() => import('@/shared/ui/NotFoundPage')); | State Type | Solution | Example |
apiClient.interceptors.response.use( (res) => res, async (error) => if (error.response?.status === 401) // redirect to login modal open/close | path: '*'
| Tool | Purpose | |------|---------| | | Error tracking and stack traces | | LogRocket | Session replay (see what user did before error) | | DataDog / New Relic | Performance monitoring, API latency | | Axiom / Grafana | Centralized logging | Example: Error logging with Sentry import * as Sentry from '@sentry/react'; Sentry.init( dsn: import.meta.env.VITE_SENTRY_DSN, environment: import.meta.env.MODE, tracesSampleRate: 0.1, // 10% of transactions );
shared/api/ ├── client.ts # axios instance with baseURL, interceptors ├── endpoints/ │ ├── users.ts │ └── products.ts └── types.ts # Generic API response types // shared/api/client.ts import axios from 'axios'; export const apiClient = axios.create( baseURL: import.meta.env.VITE_API_URL, timeout: 10000, );