Create error report

[Castro19]

📌 Summary

This PR implements a new error reporting system that allows users to submit detailed error reports when they encounter issues. The system includes a form component with validation, Redux state management, and backend integration.

🔍 Related Issues

Closes # (Please add the relevant issue number)

🛠 Changes Made

Frontend Changes

1. Created new ReportError component with:

   • Form validation using Zod schema
   • Comprehensive error reporting fields (title, description, type, severity, etc.)
   • Environment details collection
   • Integration with ShadCN/UI components
   • Toast notifications for success/error feedback

2. Enhanced ErrorPage component:

   • Added error reporting form integration
   • Improved UI with modern design
   • Added bug icon and better visual hierarchy
   • Responsive layout improvements

3. Added Redux integration:

   • New error slice with async thunk for error submission
   • CRUD operations for error reporting
   • Type-safe state management
   • Integration with existing store

Backend Changes

1. Added error collection handling:
   • MongoDB collection setup for error reports
   • Create operation for new error reports
   • Automatic timestamp and status management

Documentation

1. Updated full-stack tutorial with:
   • New section on error handling implementation
   • Store and reducer integration guidelines
   • Component development best practices

✅ Checklist

• My code follows the PolyLink Contribution Guidelines
• I have tested my changes to ensure they work as expected
• I have documented my changes in the full-stack tutorial
• My PR has a clear title and description

📸 Screenshots (if applicable)

The error reporting form is now integrated into the error page with a modern, user-friendly interface. The form includes:

• Title and description fields
• Type and severity selectors
• Steps to reproduce section
• Expected vs actual behavior fields
• Environment details collection
• Submit button with feedback

❓ Additional Notes

• The error reporting system is designed to be extensible for future enhancements
• Form validation ensures data quality before submission
• Error handling is implemented at both frontend and backend levels
• The UI is responsive and follows the existing design system
• Toast notifications provide immediate feedback to users

[Copilot]

Pull Request Overview

This PR introduces a full-stack error reporting system with frontend form, Redux state management, backend persistence in MongoDB, and tutorial documentation updates.

• Adds shared ErrorDocument type and exports it
• Implements backend route/service/collection for creating error reports
• Integrates frontend Redux slice, async thunk, and ReportError form component

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
shared/src/types/index.ts	Export new error types
shared/src/types/error/index.ts	Define ErrorDocument schema
server/src/routes/error.ts	New Express route for posting error reports
server/src/index.ts	Mount /errors router
server/src/db/models/error/errorServices.ts	Service logic for creating error reports
server/src/db/models/error/errorCollection.ts	MongoDB collection insert for error reports
Client/src/redux/error/errorSlice.ts	Redux slice and async thunk for submitting error reports
Client/src/redux/error/crudError.ts	HTTP client to POST error reports
Client/src/pages/ErrorPage/ErrorPage.tsx	Integrate ReportError form into error page UI
Client/src/components/errorPage/ReportError.tsx	Full UI form component with Zod validation
documentation/full-stack-tutorial.md	Tutorial updates for store, reducers, and component

Comments suppressed due to low confidence (3)

documentation/full-stack-tutorial.md:88

• [nitpick] The section numbering jumps from 9 to 11. Renumber this header to ### 10. Improve the Component Design to keep the steps sequential.

### 11. Improve the Component Design

Client/src/redux/error/errorSlice.ts:1

• There are no unit tests covering the submitErrorReport thunk or reducers. Consider adding tests for pending, fulfilled, and rejected states to ensure the slice behaves as expected.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

server/src/db/models/error/errorServices.ts:7

• The service signature still requires userId but the frontend does not supply it. Either omit userId from the input type and inject it server-side, or ensure the authenticated user ID is added before calling this function.

errorData: Omit<ErrorDocument, "_id" | "createdAt" | "updatedAt" | "status">

[Copilot]

Avoid returning internal error messages to clients in production, as this can leak implementation details. Consider logging error.message internally and returning a generic error response instead.

Suggested change

	res.status(500).json({
	message: "Error creating error report",
	error: (error as Error).message,
	console.error("Error creating error report:", (error as Error).message);
	res.status(500).json({
	message: "Error creating error report",

[Copilot]

[nitpick] The CreateErrorReportData type is duplicated between crudError.ts and the Redux slice. Consider centralizing this type in the shared types to prevent drift and ensure consistency.

Suggested change

	type CreateErrorReportData = Omit<
	ErrorDocument,
	"_id" | "createdAt" | "updatedAt" | "status"
	>;
	import { CreateErrorReportData } from "@polylink/shared/types";