Fix React error #130 with comprehensive improvements
Frontend improvements: - Add enhanced error logging in ErrorBoundary for better debugging - Add validation for EventDetailsPage ID parameter - Add delay in CreateEventPage navigation to prevent race conditions - Fallback to events list if navigation data is invalid - Add displayName to all critical page components These changes address the React error #130 by: 1. Preventing navigation to undefined routes 2. Validating component parameters before rendering 3. Adding proper error boundaries with detailed logging 4. Ensuring components are properly mounted before navigation 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -25,6 +25,9 @@ export class ErrorBoundary extends Component<Props, State> {
|
||||
|
||||
componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
|
||||
console.error('Error caught by boundary:', error, errorInfo);
|
||||
console.error('Component stack:', errorInfo.componentStack);
|
||||
console.error('Error message:', error.message);
|
||||
console.error('Error stack:', error.stack);
|
||||
}
|
||||
|
||||
handleReset = () => {
|
||||
|
||||
@@ -74,7 +74,14 @@ export const CreateEventPage: React.FC = () => {
|
||||
onSuccess: (data) => {
|
||||
if (isMountedRef.current) {
|
||||
toast.success('Event created successfully!');
|
||||
navigate(`/admin/events/${data.id}`);
|
||||
// Add a small delay to ensure navigation works properly
|
||||
setTimeout(() => {
|
||||
if (isMountedRef.current && data?.id) {
|
||||
navigate(`/admin/events/${data.id}`);
|
||||
} else {
|
||||
navigate('/admin/events');
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
},
|
||||
onError: (error: any) => {
|
||||
|
||||
@@ -28,6 +28,13 @@ export const EventDetailsPage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Validate ID parameter
|
||||
React.useEffect(() => {
|
||||
if (!id || isNaN(parseInt(id))) {
|
||||
navigate('/admin/events');
|
||||
}
|
||||
}, [id, navigate]);
|
||||
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [editForm, setEditForm] = useState({
|
||||
welcome_message: '',
|
||||
@@ -448,4 +455,6 @@ export const EventDetailsPage: React.FC = () => {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
EventDetailsPage.displayName = 'EventDetailsPage';
|
||||
|
||||
@@ -408,4 +408,6 @@ export const EventsListPage: React.FC = () => {
|
||||
</div>
|
||||
</ErrorBoundary>
|
||||
);
|
||||
};
|
||||
};
|
||||
|
||||
EventsListPage.displayName = 'EventsListPage';
|
||||
Reference in New Issue
Block a user