# Routing Troubleshooting Guide

## Issue: Blank Page on Browser Refresh

### Problem Description
When users refresh the browser (F5 or Ctrl+R), the page goes blank instead of showing the expected content. This is a common issue with Single Page Applications (SPAs) using client-side routing.

### Root Causes
1. **Server-side routing not configured properly**
2. **Authentication check causing redirect loops**
3. **Missing error boundaries**
4. **Nginx configuration issues**
5. **React Router configuration problems**

## Solutions Implemented

### 1. Enhanced Nginx Configuration
Updated `nginx.conf` with:
- Proper `try_files` directive for SPA routing
- Error page handling
- Security headers
- Gzip compression
- Better static asset serving

### 2. Improved ProtectedRoute Component
- Added loading states to prevent flash of blank content
- Proper authentication checking with useEffect
- Timeout to ensure localStorage is available

### 3. Error Boundaries
- Added RouterErrorBoundary in main.jsx
- Added RouteErrorBoundary in App.jsx
- Graceful error handling with user-friendly messages

### 4. Suspense and Loading States
- Added Suspense wrapper for better loading experience
- Loading fallback components
- Proper error recovery mechanisms

## Debugging Steps

### 1. Check Browser Console
Open Developer Tools (F12) and check for:
- JavaScript errors
- Network request failures
- Authentication issues

### 2. Check Network Tab
Look for:
- Failed requests to static assets
- API calls returning errors
- Missing resources

### 3. Check Application Tab
Verify:
- localStorage has `accessToken`
- No redirect loops
- Proper route matching

### 4. Test Different Routes
Try refreshing on:
- `/dashboard`
- `/violation/123`
- `/constables`
- `/login`

## Environment-Specific Issues

### Development Environment
If blank page occurs in development:
1. Check if Vite dev server is running
2. Verify `npm run dev` is working
3. Check for port conflicts
4. Clear browser cache

### Production Environment
If blank page occurs in production:
1. Verify nginx configuration
2. Check server logs
3. Ensure all files are properly deployed
4. Test with different browsers

## Alternative Solutions

### Option 1: Use HashRouter
If BrowserRouter continues to cause issues, you can switch to HashRouter:

```javascript
// In main.jsx, change:
const Router = HashRouter; // Instead of BrowserRouter
```

### Option 2: Environment Variable
Set environment variable to force HashRouter:
```bash
VITE_USE_HASH_ROUTER=true
```

### Option 3: Manual Route Handling
Add manual route handling in nginx:
```nginx
location /dashboard {
    try_files $uri $uri/ /index.html;
}

location /violation {
    try_files $uri $uri/ /index.html;
}
```

## Testing Checklist

### Before Deployment
- [ ] Test all routes in development
- [ ] Verify authentication flow
- [ ] Check error boundaries work
- [ ] Test with different browsers
- [ ] Verify static assets load

### After Deployment
- [ ] Test refresh on all routes
- [ ] Check nginx logs for errors
- [ ] Verify authentication persists
- [ ] Test error recovery
- [ ] Check performance

## Common Error Messages

### "Cannot read property 'accessToken' of null"
- localStorage not available during SSR
- Solution: Added timeout in ProtectedRoute

### "404 Not Found"
- Server not serving index.html for routes
- Solution: Updated nginx try_files directive

### "Redirect loop detected"
- Authentication check causing infinite redirects
- Solution: Added loading states and proper checks

## Performance Considerations

### Caching
- HTML files: No cache (always fresh)
- Static assets: 1-year cache with immutable flag
- API responses: Configure as needed

### Compression
- Enabled gzip compression for better performance
- Configured for common file types

### Security
- Added security headers
- Proper CORS configuration
- XSS protection

## Monitoring and Logging

### Nginx Logs
```bash
# Check error logs
sudo tail -f /var/log/nginx/error.log

# Check access logs
sudo tail -f /var/log/nginx/access.log
```

### Application Logs
- Check browser console for JavaScript errors
- Monitor network requests
- Verify authentication flow

## Emergency Fixes

### Quick Fix 1: Force HashRouter
```javascript
// Temporarily change in main.jsx
const Router = HashRouter;
```

### Quick Fix 2: Disable Authentication Check
```javascript
// Temporarily bypass ProtectedRoute
<Route path="/dashboard" element={<DashboardPage />} />
```

### Quick Fix 3: Manual Redirect
```javascript
// Add to App.jsx
useEffect(() => {
    if (window.location.pathname !== '/login' && !localStorage.getItem('accessToken')) {
        window.location.href = '/login';
    }
}, []);
```

## Prevention

### Best Practices
1. Always test refresh functionality
2. Use error boundaries
3. Implement proper loading states
4. Configure server correctly
5. Monitor for issues

### Code Quality
1. Add proper error handling
2. Use TypeScript for better type safety
3. Implement comprehensive testing
4. Use linting and formatting tools

## Support

If issues persist:
1. Check this troubleshooting guide
2. Review nginx configuration
3. Test in different environments
4. Check browser compatibility
5. Verify deployment process
