[WEB-4858]chore: updated content for error page

[vamsikrishnamathala]

Description

This PR updated the content for error page in the web application.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Feature (non-breaking change which adds functionality)
• Improvement (change that would cause existing functionality to not work as expected)
• Code refactoring
• Performance improvements
• Documentation update

Screenshots and Media (if applicable)

Test Scenarios

References

Summary by CodeRabbit

• New Features

  • Error page now includes quick links to Contact Support, Status Page, and social.
  • Updated header and clearer messaging indicating automatic error tracking and refresh guidance.

• Refactor

  • Simplified actions: removed Sign out and replaced action group with external link row plus a single Go to home button.
  • Streamlined UI to use standard button components.

[makeplane]

Pull Request Linked with Plane Work Items

• [WEB-4858] Implement new UX copy for app crash empty staate

Comment Automatically Generated by Plane

[coderabbitai]

Walkthrough

The error page component was simplified: auth-related imports and the sign-out flow were removed, external support links were added and rendered from a linkMap, header and description text were updated, and the “Go to home” button now navigates home via router.push("/") using useAppRouter().

Changes

Cohort / File(s)	Summary
Error page update apps/web/app/error.tsx	Removed auth-related imports and sign-out handler; added a linkMap with three external links and mapped them to anchor tags; updated header and description copy; replaced sign-out action with external links and retained a single "Go to home" button that calls router.push("/"); cleaned up unused imports.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant E as ErrorPage
    participant R as Router
    participant B as Browser

    U->>E: View error page
    Note over E: Renders mapped external anchors and "Go to home" button

    U->>E: Click external link
    E-->>B: Anchor navigates to external URL
    B-->>U: External page opens

    U->>E: Click "Go to home"
    E->>R: router.push("/")
    R-->>B: Navigate to home route
    B-->>U: Home page loads

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested labels

🌐frontend, 🌟improvement

Suggested reviewers

• aaryan610

Pre-merge checks (1 passed, 1 warning, 1 inconclusive)

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description Check	❓ Inconclusive	The PR description follows the template structure and includes a brief summary, the Type of Change selection, and a screenshot, but it is too short and omits concrete change details and Test Scenarios; it does not document code-level changes visible in the diff such as removal of the sign-out/auth flow, addition of linkMap and external anchors, and header/text updates.	Please expand the Description to list the concrete code changes (what was removed/added and which files were affected), add Test Scenarios describing how you validated the change (manual steps and any tests run), and include References linking the PR to WEB-4858 or related design/docs so reviewers can verify intent and impact; once added the description will meet the template requirements.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title "[WEB-4858]chore: updated content for error page" concisely and accurately reflects the primary change (updating the error page content), includes the issue reference and commit type, and contains no irrelevant noise.

Poem

I nibble bytes and tidy code,
Removed the sign-out from the road.
Three shiny links for those in need,
One hop home — router does the deed.
A cheerful thump — errors slowed. 🐇✨

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch chore-error_page_content

---

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

🧹 Nitpick comments (3)

apps/web/app/error.tsx (3)

12-28: Prefer href over value and freeze the map.

Clearer naming and tighter types help avoid misuse.

-const linkMap = [
+const linkMap = [
   {
     key: "mail_to",
     label: "Contact Support",
-    value: "mailto:support@plane.so",
+    href: "mailto:support@plane.so",
   },
   {
     key: "status",
     label: "Status Page",
-    value: "https://status.plane.so/",
+    href: "https://status.plane.so/",
   },
   {
     key: "twitter_handle",
     label: "@planepowers",
-    value: "https://x.com/planepowers",
+    href: "https://x.com/planepowers",
   },
-];
+] as const;

---

52-52: A11y: hide emoji from screen readers.

Screen readers can read the emoji literally; hide or label it.

-              🚧 Looks like something went wrong!
+              <span aria-hidden="true">🚧</span> Looks like something went wrong!

---

60-73: Minor a11y + align with href rename.

Add a descriptive title and switch to href.

-                  href={link.value}
+                  href={link.href}
+                  title={`${link.label} (opens in a new tab)`}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0f7bfdd and 01dbab8.

📒 Files selected for processing (1)

• apps/web/app/error.tsx (2 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (1)

apps/web/app/error.tsx (1)

10-10: LGTM on UI import.

Nothing to flag here.

[coderabbitai]

Actionable comments posted: 0

♻️ Duplicate comments (1)

apps/web/app/error.tsx (1)

57-58: Fix grammar and punctuation in user-facing copy.
Small but visible UX issue; same as previously noted.

-              We track these errors automatically and working on getting things back up and running. If the problem
-              persists feel free to contact us. In the meantime, try refreshing.
+              We track errors automatically and are working to get things back up and running. If the problem
+              persists, please contact us. In the meantime, try refreshing.

🧹 Nitpick comments (4)

apps/web/app/error.tsx (4)

54-54: Nit: make the emoji decorative for screen readers.
Wrap the emoji so it’s ignored by AT.

-              🚧 Looks like something went wrong!
+              <span aria-hidden="true" className="mr-1">🚧</span> Looks like something went wrong!

---

62-75: Make link list semantic and improve a11y; remove extra wrapper.

• Use a list (ul/li) for a set of links.
• Add nofollow for external targets; add an aria-label to announce “opens in a new tab”.
• Drop the extra div per item.

-          <div className="flex items-center justify-start gap-6 mt-1">
-            {linkMap.map((link) => (
-              <div key={link.key}>
-                <a
-                  href={link.value}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-custom-primary-100 hover:underline text-sm"
-                >
-                  {link.label}
-                </a>
-              </div>
-            ))}
-          </div>
+          <ul className="flex items-center justify-start gap-6 mt-1" role="list">
+            {linkMap.map((link) => (
+              <li key={link.key}>
+                <a
+                  href={link.value}
+                  target="_blank"
+                  rel="noopener noreferrer nofollow"
+                  className="text-custom-primary-100 hover:underline text-sm"
+                  aria-label={`${link.label} (opens in a new tab)`}
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))}
+          </ul>

---

77-81: Optional: expose Next’s reset() and add a “Try again” action.
Helps recover without navigation.

           <div className="flex items-center justify-start gap-6">
+            <Button variant="neutral" size="md" onClick={reset}>
+              Try again
+            </Button>
             <Button variant="primary" size="md" onClick={() => router.push("/")}>
               Go to home
             </Button>
           </div>

And update the component signature (outside the changed lines):

export default function CustomErrorComponent({ reset }: { reset: () => void }) {

---

13-29: Freeze linkMap and confirm external endpoints.

Verified support@plane.so, https://status.plane.so/, and https://x.com/planepowers are official. Apply this minimal change in apps/web/app/error.tsx (lines 13–29) to narrow types and prevent mutation:

-];
+] as const;

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 01dbab8 and 8416bca.

📒 Files selected for processing (1)

• apps/web/app/error.tsx (2 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

apps/web/app/error.tsx (1)

apps/web/core/hooks/use-app-router.tsx (1)

• useAppRouter (4-4)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: Build and lint web apps
• GitHub Check: Analyze (javascript)

🔇 Additional comments (3)

apps/web/app/error.tsx (3)

6-7: LGTM: imports are lean and appropriate for a client component.

---

34-34: LGTM: using the app router for navigation is correct here.

---

78-80: LGTM: “Go to home” now navigates to “/” instead of reloading.