Files
maternal-app/maternal-web/lib/api/client.ts
Andrei c22fa82521
Some checks failed
ParentFlow CI/CD Pipeline / Backend Tests (push) Has been cancelled
ParentFlow CI/CD Pipeline / Frontend Tests (push) Has been cancelled
ParentFlow CI/CD Pipeline / Security Scanning (push) Has been cancelled
ParentFlow CI/CD Pipeline / Build Docker Images (map[context:maternal-app/maternal-app-backend dockerfile:Dockerfile.production name:backend]) (push) Has been cancelled
ParentFlow CI/CD Pipeline / Build Docker Images (map[context:maternal-web dockerfile:Dockerfile.production name:frontend]) (push) Has been cancelled
ParentFlow CI/CD Pipeline / Deploy to Development (push) Has been cancelled
ParentFlow CI/CD Pipeline / Deploy to Production (push) Has been cancelled
CI/CD Pipeline / Lint and Test (push) Has been cancelled
CI/CD Pipeline / E2E Tests (push) Has been cancelled
CI/CD Pipeline / Build Application (push) Has been cancelled
feat: Implement comprehensive error handling and production deployment pipeline
## Error Handling System
- Add centralized error handling utilities (errorHandler.ts)
- Create reusable error components (ErrorMessage, ErrorToast)
- Implement multilingual error support (preserves backend error messages in 5 languages)
- Update 15+ forms and components with consistent error handling
  - Auth forms: login, register, forgot-password
  - Family management: family page, join family dialog
  - Child management: child dialog
  - All tracking forms: feeding, sleep, diaper, medicine, growth, activity

## Production Build Fixes
- Fix backend TypeScript errors: InviteCode.uses → InviteCode.useCount (5 instances)
- Remove non-existent savedFamily variable from registration response
- Fix admin panel TypeScript errors: SimpleMDE toolbar type, PieChart label type

## User Experience Improvements
- Auto-uppercase invite code and share code inputs
- Visual feedback for case conversion with helper text
- Improved form validation with error codes

## CI/CD Pipeline
- Create comprehensive production deployment checklist (PRODUCTION_DEPLOYMENT_CHECKLIST.md)
- Add automated pre-deployment check script (pre-deploy-check.sh)
  - Validates frontend, backend, and admin panel builds
  - Checks git status, branch, and sync state
  - Verifies environment files and migrations
- Add quick start deployment guide (DEPLOYMENT_QUICK_START.md)
- Add production deployment automation template (deploy-production.sh)

## Cleanup
- Remove outdated push notifications documentation files
- Remove outdated PWA implementation plan

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-09 21:27:39 +00:00

137 lines
4.7 KiB
TypeScript

import axios from 'axios';
import { tokenStorage } from '@/lib/utils/tokenStorage';
import { logError } from '@/lib/utils/errorHandler';
const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3020';
export const apiClient = axios.create({
baseURL: API_BASE_URL,
headers: {
'Content-Type': 'application/json',
},
withCredentials: true,
});
// Request interceptor to add auth token
apiClient.interceptors.request.use(
(config) => {
const token = tokenStorage.getAccessToken();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
// Response interceptor to handle token refresh and error logging
apiClient.interceptors.response.use(
(response) => response,
async (error) => {
const originalRequest = error.config;
// Log all API errors for debugging and error tracking
logError(error, `API ${originalRequest?.method?.toUpperCase()} ${originalRequest?.url}`);
// Only handle token refresh on client side
if (typeof window === 'undefined') {
return Promise.reject(error);
}
// If error is 401 and we haven't tried to refresh yet
if (error.response?.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
try {
const refreshToken = tokenStorage.getRefreshToken();
const deviceId = tokenStorage.getDeviceId();
console.log('[API Client] Attempting token refresh, refreshToken exists:', !!refreshToken, 'deviceId exists:', !!deviceId);
if (!refreshToken) {
console.error('[API Client] No refresh token found in storage');
throw new Error('No refresh token');
}
// Use a plain axios instance without interceptors to avoid loops
const refreshPayload: { refreshToken: string; deviceId?: string } = {
refreshToken,
};
if (deviceId) {
refreshPayload.deviceId = deviceId;
}
const refreshResponse = await axios.create().post(
`${API_BASE_URL}/api/v1/auth/refresh`,
refreshPayload,
{
headers: { 'Content-Type': 'application/json' },
withCredentials: true
}
);
const response = refreshResponse;
// Handle different response structures
let newAccessToken;
let newRefreshToken;
if (response.data?.data?.tokens?.accessToken) {
newAccessToken = response.data.data.tokens.accessToken;
newRefreshToken = response.data.data.tokens.refreshToken;
} else if (response.data?.tokens?.accessToken) {
newAccessToken = response.data.tokens.accessToken;
newRefreshToken = response.data.tokens.refreshToken;
} else if (response.data?.accessToken) {
newAccessToken = response.data.accessToken;
newRefreshToken = response.data.refreshToken;
} else {
throw new Error('Invalid token refresh response');
}
// Update tokens in storage
tokenStorage.setAccessToken(newAccessToken);
if (newRefreshToken) {
tokenStorage.setRefreshToken(newRefreshToken);
}
// Retry original request with new token
originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
return apiClient(originalRequest);
} catch (refreshError: any) {
console.error('[API Client] Token refresh failed:', refreshError);
// Only clear tokens if this is a real auth failure (not a network error)
// and not during the initial page load where React Strict Mode might cause issues
const isAuthFailure = refreshError?.response?.status === 401 ||
refreshError?.response?.status === 403;
// Check if this is likely a React Strict Mode double-invocation
// by seeing if we're in development mode and the error happened very quickly
const isDevelopment = process.env.NODE_ENV === 'development';
if (isAuthFailure && !isDevelopment) {
console.log('[API Client] Auth failure in production, clearing tokens');
tokenStorage.clearTokens();
} else if (isDevelopment) {
console.log('[API Client] Development mode - not clearing tokens to avoid React Strict Mode issues');
}
// Avoid redirect loop - only redirect if not already on login page
// and only in production or after a real auth failure
if (!window.location.pathname.includes('/login') && isAuthFailure && !isDevelopment) {
window.location.href = '/login';
}
return Promise.reject(refreshError);
}
}
return Promise.reject(error);
}
);
export default apiClient;