Fix frontend build dependencies, API error handling, and Nginx logging

[kargig]

Summary

This pull request addresses critical frontend build issues, API error handling bugs, and validation improvements. It fixes a logic bug in the API retry mechanism that prevented exponential backoff, resolves Temporal Dead Zone issues in API helpers, optimizes the frontend build process by consolidating vendor chunks, and implements lazy loading for improved initial load times. Additionally, it fixes Nginx logging configuration and adds proper prop validation to the BackgroundLogo component.

Changes Made

Frontend Architecture & Build

• Updated Vite Configuration:
  • Consolidated all node_modules into a single vendor chunk to prevent circular dependencies and initialization order issues (e.g., "Cannot read properties of undefined (reading 'forwardRef')").
  • Added dedupe: ['react', 'react-dom'] to ensure a single instance of React is used, resolving potential useId hook errors.
• Lazy Loading: Implemented lazy loading for routes in App.js using React.lazy and Suspense, significantly reducing the initial bundle size and improving load performance.
• Dependencies:
  • Moved playwright to devDependencies.
  • Added prop-types dependency.

API & Error Handling

• Fixed Retry Logic: Corrected a logic bug in frontend/src/api.js where the _gatewayRetry flag was prematurely preventing subsequent retries. This restores the intended exponential backoff behavior (1s, 2s, 4s) for 504 Gateway Timeouts and 5xx Server Errors, crucial for handling Fly.io cold starts.
• Fixed Hoisting/TDZ Issues: Hoisted getFieldNameFromLoc and extractFieldErrors helper functions in api.js to the top of the module to prevent potential ReferenceError (Temporal Dead Zone) during module initialization.
• Refactoring: Refactored the API interceptor error handler into cleaner helper functions (handle401Error, handleRetryableError) to reduce complexity and improve maintainability.

Components & Validation

• BackgroundLogo: Removed unused React import and added missing PropTypes validation for opacity, size, and className.
• Turnstile Config: Renamed siteKey variable in turnstileConfig.js to avoid potential variable name collisions during minification.

Infrastructure (Nginx)

• Logging Fix: Commented out access_log off and log_not_found off directives in nginx/prod.conf to fix logging configuration issues in the production environment.

Testing

• Manual Verification:
  • Verified that the application loads successfully without "ReferenceError" or initialization crashes.
  • Simulated 401 login failures to confirm extractErrorMessage correctly parses and displays error messages (e.g., "Incorrect username/email or password").
  • Confirmed that the API retry mechanism correctly attempts multiple retries on gateway errors.
• Linting: Ran npm run lint within the divemap_frontend container to ensure all code quality issues in modified files were resolved.

Related Issues

• Resolves build errors related to circular dependencies and React hooks (useId).
• Fixes transient authentication failures during backend cold starts due to insufficient retry attempts.

Additional Notes

• The lazy loading implementation requires a <Suspense> boundary, which has been added with a simple LoadingFallback component.
• The vendor chunk strategy in Vite is a safe default for this project structure to ensure stability over granular code splitting.