feat: add broken link reporting workflow to 404 page

[ananyaa0518]

Description

This PR fixes #7832 by adding a "Report Broken Link" action to the 404 page.

Changes introduced

• Added a Report Broken Link button to the 404 page.
• Implemented client-side generation of a pre-filled GitHub bug report URL using:
  • window.location.href (broken URL)
  • document.referrer (referrer information)
  • navigator.userAgent (browser information)
• Integrated the existing Layer5 bug_report.md issue template to keep reporting consistent with the repository's workflow.
• Updated the 404 page button layout to support the additional action while maintaining responsiveness.

This enhancement enables visitors to report unknown 404s originating from stale external links, cached search results, and legacy campaigns without requiring additional backend infrastructure.

Notes for Reviewers

Verification

• Verified the 404 page locally using invalid routes.
• Confirmed that the "Report Broken Link" button opens the Layer5 bug report template.
• Verified that the issue title and body are pre-populated with:
  • Broken URL
  • Referrer
  • Browser/User-Agent information
• Tested responsiveness of the updated button layout.

before

after

Demo

demo.mov

Signed commits

• Yes, I signed my commits.

[github-actions]

🚀 Preview deployment: https://layer5.io/pr-preview/pr-7843/

Note: Preview may take a moment (GitHub Pages deployment in progress). Please wait and refresh. Track deployment here

[Oluwatunmise-olat]

Great work on the implementation, the broken link reporting flow works really well! One small thing. The three buttons on the 404 page look a bit uneven in sizing. Could we make sure they're all consistently sized so the layout feels balanced or make it better?

[ananyaa0518]

@Oluwatunmise-olat Thanks for the feedback! I've updated the button styling to ensure all three actions have consistent sizing while preserving the existing column layout. The latest changes have been pushed and the updated preview/screenshots are available for review.

[Bhumikagarggg]

@ananyaa0518 Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[Oluwatunmise-olat]

@Oluwatunmise-olat Thanks for the feedback! I've updated the button styling to ensure all three actions have consistent sizing while preserving the existing column layout. The latest changes have been pushed and the updated preview/screenshots are available for review.

Is there any reason why the nav bar is duplicated?

[ananyaa0518]

Thanks for catching that! The duplicated navbar is only appearing in my local environment and doesn't show up in the deployed preview.

[KhushamBansal]

One potential concern: if a user lands on the 404 page because they manually entered a URL with a typo, the Report Broken Link option would still be available.

[ananyaa0518]

@KhushamBansal Thanks for bringing that up! I can think of two possible approaches here:

• Only render the "Report Broken Link" action when document.referrer is present, which would avoid reports from manually entered URLs while still capturing broken links from search engines, external sites, and internal navigation.

• Keep the reporting action available, but if document.referrer is empty, show a confirmation dialog reminding users to verify that they didn't manually enter the URL before submitting a report.

Which approach would you prefer, or do you have another approach in mind?