feat: enhance 404 page with search, go back, and bug reporting#4335
feat: enhance 404 page with search, go back, and bug reporting#4335anushkaa2704 wants to merge 7 commits into
Conversation
|
Skipping CodeAnt AI review — this PR changes more than 100 files, which usually means a migration, codemod, or vendored drop. Line-level review on diffs this large produces duplicate findings on the same rewrite pattern and drowns out anything that actually matters. If you still want a review, comment |
|
@anushkaa2704 is attempting to deploy a commit to the Anurag Mishra's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThis PR adds the ChangesCeramic Minimal template
404 search and reporting
Estimated code review effort: 4 (Complex) | ~45 minutes Possibly related PRs
Suggested labels: Sequence Diagram(s)sequenceDiagram
participant Visitor
participant NotFound
participant SearchInput
participant ReportBugModal
participant bugsApi
Visitor->>NotFound: visit missing route
NotFound->>NotFound: derive attemptedPath and search
Visitor->>SearchInput: edit query
SearchInput->>NotFound: update search
NotFound->>NotFound: sync query parameter
Visitor->>NotFound: open broken-link report
NotFound->>ReportBugModal: open with brokenUrl
Visitor->>ReportBugModal: submit report
ReportBugModal->>bugsApi: submitBug(title, description)
bugsApi-->>ReportBugModal: return success or error
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
frontend/src/pages/NotFound.jsx (1)
111-115: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueSearch input updates the URL but never executes a search.
onChange={setSearch}only writes the value into?query=; there's no submit handler or navigation to a search/results destination. Combined with the default value beingattemptedPath(Line 24), the box is pre-filled with the broken path rather than a query and pressing Enter does nothing actionable. Confirm whether wiring the query to an actual search route (or removing the box) is intended before merge.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@frontend/src/pages/NotFound.jsx` around lines 111 - 115, The SearchInput in NotFound is only updating the query state via setSearch, so it writes to ?query= without ever triggering a search or navigation. Update the NotFound flow to either wire the input to a real search/results destination from SearchInput or remove the control if it is not intended, and also avoid seeding the field with attemptedPath so it does not prefill a broken path; use the NotFound and SearchInput behavior as the main places to adjust.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/src/components/portfolio/templates/Ceramic_Minimal/index.jsx`:
- Around line 139-156: The CTA links in Ceramic_Minimal currently render
unconditionally even when project.liveUrl or project.githubUrl is missing, so
update the project action section to guard those anchors or render them only
when the corresponding URL exists. Use the Ceramic_Minimal component’s project
CTA block and the liveUrl/githubUrl fields to conditionally show “Live” and
“Code” so empty destinations are never emitted.
- Around line 1-7: The CeramicMinimal component is calling usePortfolio()
without importing the hook, and it also shadows the dummy_data.json import with
a local data binding. Update CeramicMinimal to use one data source consistently:
either import usePortfolio and remove the JSON import, or keep the JSON data and
remove the hook usage, ensuring the component references a single unambiguous
data variable.
In `@frontend/src/pages/NotFound.jsx`:
- Around line 29-33: The NotFound page effect is updating the URL search params
with the default history push behavior, which creates a new browser history
entry on every search change. Update the setSearchParams call inside the
useEffect in NotFound.jsx to use replace semantics so it updates the current
entry instead of pushing, keeping back-navigation clean and preventing history
bloat.
---
Nitpick comments:
In `@frontend/src/pages/NotFound.jsx`:
- Around line 111-115: The SearchInput in NotFound is only updating the query
state via setSearch, so it writes to ?query= without ever triggering a search or
navigation. Update the NotFound flow to either wire the input to a real
search/results destination from SearchInput or remove the control if it is not
intended, and also avoid seeding the field with attemptedPath so it does not
prefill a broken path; use the NotFound and SearchInput behavior as the main
places to adjust.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 2b6c3785-67f5-4ad4-bca4-bdfd07dc2d5c
📒 Files selected for processing (4)
frontend/src/App.jsxfrontend/src/components/ReportBugModal.jsxfrontend/src/components/portfolio/templates/Ceramic_Minimal/index.jsxfrontend/src/pages/NotFound.jsx
|
add screenshots |
|
@anurag3407 I've added screenshots for the enhanced 404 page and the Report Broken Link modal, kindly check.
|
|
CodeAnt AI is running Incremental review |
Thanks for using CodeAnt! 🎉We're free for open-source projects. if you're enjoying it, help us grow by sharing. Share on X · |
|
CodeAnt AI Incremental review completed. |
|
@anurag3407 please check the pr and let me know if any issue exists |


User description
Summary
This PR enhances the 404 page by:
Acceptance Criteria
Summary by CodeRabbit
CodeAnt-AI Description
Improve the 404 page and add a new portfolio template
What Changed
Impact
✅ Easier recovery from broken links✅ Faster bug reports from missing pages✅ More portfolio template options💡 Usage Guide
Checking Your Pull Request
Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.
Talking to CodeAnt AI
Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:
This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.
Example
Preserve Org Learnings with CodeAnt
You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:
This helps CodeAnt AI learn and adapt to your team's coding style and standards.
Example
Retrigger review
Ask CodeAnt AI to review the PR again, by typing:
Check Your Repository Health
To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.