Improvement: Improved 404 page error for /browse

[imsarang]

The below ss is the updated screen for 404 not found when trying to browse for file that doesnot exist.

inspiration: Github
issue link: #827

Summary by CodeRabbit

• New Features
  • Added a 404 error page for missing files in the repository browse view
  • Displays contextual information including repository name and branch
  • Provides a convenient button to navigate back to the repository overview

[coderabbitai]

Walkthrough

Adds a new FileNotFound component that renders a 404 UI for missing files in the browse flow and updates codePreviewPanel to render this component when the file-source response returns NOT_FOUND instead of a generic error.

Changes

Cohort / File(s)	Summary
New 404 Component packages/web/src/app/[domain]/browse/[...path]/components/404NotFound.tsx	Adds FileNotFound React component that accepts repo and file-source responses, derives display names/branch, conditionally renders PathHeader, shows a 404 message with repo/branch/path details, and a button linking back to the repository overview via getBrowsePath.
Error Handling Integration packages/web/src/app/[domain]/browse/[...path]/components/codePreviewPanel.tsx	Adds handling for StatusCodes.NOT_FOUND from file source responses to render the new FileNotFound component; retains existing repo-info error handling for other error cases.

Sequence Diagram(s)

sequenceDiagram
    participant Browser
    participant CodePreviewPanel
    participant FileSourceAPI
    participant RepoInfoAPI
    participant FileNotFoundComponent
    Browser->>CodePreviewPanel: Request file preview (repo, path, revision)
    CodePreviewPanel->>RepoInfoAPI: fetch repoInfo
    CodePreviewPanel->>FileSourceAPI: fetch fileSource
    FileSourceAPI-->>CodePreviewPanel: NOT_FOUND
    RepoInfoAPI-->>CodePreviewPanel: repoInfo (or error)
    CodePreviewPanel->>FileNotFoundComponent: render(repoInfoResponse, fileSourceResponse, revision, path, repoName)
    FileNotFoundComponent-->>Browser: display 404 UI with repo/branch/path and "Return to repository overview" link
    Browser->>CodePreviewPanel: click "Return to repository overview"
    CodePreviewPanel->>Browser: navigate to getBrowsePath(repoName, '/', pathType='tree', revision)

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• chore(web): Improve error messages for file loading errors #665: Modifies error handling in codePreviewPanel.tsx related to file-source vs repo-info error messages — closely related to the new NOT_FOUND branch.
• fix(web): Fix error when clicking on file with more than 1 branch match #797: Adjusts PathHeader prop usage and revision handling in the same browse components, affecting how revision info is passed to components.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Improved 404 page error for /browse' clearly and specifically describes the main change—enhancing the 404 error page in the browse section.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🤖 Fix all issues with AI agents

In `@packages/web/src/app/`[domain]/browse/[...path]/components/404NotFound.tsx:
- Around line 101-107: The "Return to the repository overview" Link in
404NotFound builds its href via getBrowsePath but omits the optional
revisionName, causing the link to drop branch context; update the Link's
getBrowsePath call to pass the component's revisionName value (alongside
repoName/repoInfoResponse.name, path '/', pathType 'tree' and
SINGLE_TENANT_ORG_DOMAIN) so the generated URL preserves the current branch;
modify the Link invocation where getBrowsePath is called (inside the 404NotFound
component) to include revisionName as the appropriate argument.
- Around line 1-22: Remove the client-side rendering directive and the unused
hook: delete the "'use client';" line at the top of 404NotFound.tsx and remove
the unused import "useEffect" so the component becomes a server component; keep
the RepoInfoResponse type (with indexedAt: Date | undefined) as-is since it will
now stay on the server, and ensure no client-only hooks or "use client"
directives are reintroduced in this file or in any components that receive
repoInfoResponse (refer to RepoInfoResponse and PathHeader to locate usages).