Fix React rendering errors to show 404 page instead of Hey Fernie page #4140
Conversation
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=80&v=4){kind=small}
- Add error boundary at [host]/[domain] level to catch React rendering errors - Display proper 404 page with GradientExclamation icon instead of root fallback - Prevents customer docs errors from showing generic Fernie page - Fixes issue where 'Objects are not valid as a React child' errors showed Hey Fernie page Co-Authored-By: Deep Singhvi <[email protected]>
🤖 Devin AI EngineerI'll be helping with this pull request! Here's what you should know: ✅ I will automatically:
Note: I can only respond to comments from users who have write access to this repository. ⚙️ Control Options:
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
Co-Authored-By: Deep Singhvi <[email protected]>
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
…home button Co-Authored-By: Deep Singhvi <[email protected]>
- Change message from 'Page not found!' to 'We've encountered an error!' - Add reset parameter and 'Try again' button for error recovery - Add HiddenSidebar component to hide navigation elements on error pages Co-Authored-By: Deep Singhvi <[email protected]>
|
|
||
| return ( | ||
| <> | ||
| <NotFound404Tracker /> |
There was a problem hiding this comment.
The error boundary incorrectly uses NotFound404Tracker, which will track all rendering errors as "not_found" events in analytics instead of just actual 404 errors.
View Details
📝 Patch Details
diff --git a/packages/fern-docs/bundle/src/app/[host]/[domain]/error.tsx b/packages/fern-docs/bundle/src/app/[host]/[domain]/error.tsx
index 996a4b0f3..707d9a88a 100644
--- a/packages/fern-docs/bundle/src/app/[host]/[domain]/error.tsx
+++ b/packages/fern-docs/bundle/src/app/[host]/[domain]/error.tsx
@@ -5,7 +5,7 @@ import GradientExclamation from "@fern-docs/components/GradientExclamation";
import { HiddenSidebar } from "@fern-docs/components/theming/HiddenSidebar";
import { useEffect } from "react";
-import { NotFound404Tracker } from "@/components/analytics/NotFound404Tracker";
+
import ReturnHomeButton from "@/components/ReturnHomeButton";
export default function ErrorBoundary({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
@@ -15,7 +15,6 @@ export default function ErrorBoundary({ error, reset }: { error: Error & { diges
return (
<>
- <NotFound404Tracker />
<HiddenSidebar />
<div className="flex h-[calc(100svh-var(--header-height)-6rem)] w-screen flex-col items-center justify-center gap-6">
<GradientExclamation />
Analysis
Error boundary incorrectly tracks rendering errors as 404 events in analytics
What fails: ErrorBoundary in packages/fern-docs/bundle/src/app/[host]/[domain]/error.tsx uses NotFound404Tracker component, which sends "not_found" events to PostHog for all rendering errors instead of actual 404 scenarios
How to reproduce:
- Trigger any rendering error in a
[host]/[domain]route (e.g., component crash, JavaScript error) - Check PostHog analytics - error will be logged as "not_found" event instead of error event
Result: All rendering errors tracked as 404 events, polluting 404 analytics and making it impossible to distinguish actual missing pages from component failures
Expected: Error boundaries should not track analytics events, consistent with other error boundaries in the codebase (see packages/fern-docs/bundle/src/app/error.tsx which has no analytics tracking). NotFound404Tracker should only be used in actual not-found.tsx files per its JSDoc documentation: "Should be added to not-found pages to capture analytics when users hit a 404"
Fix React rendering errors to show error page instead of "Hey Fernie" page
Added an error boundary at the
[host]/[domain]route level to catch React rendering errors and display a user-friendly error page instead of the root-level "Hey Fernie!" fallback.What was the motivation & context behind this PR?
Customer documentation page (fyno.io) encountered a React rendering error:
Objects are not valid as a React child (digest: 2412129393). This error bubbled up to the root error handler, which displayed the generic "Hey Fernie!" page - a fallback meant only for unmatched domains, not for errors within customer docs.Implementation
Created
packages/fern-docs/bundle/src/app/[host]/[domain]/error.tsxwith:This PR has NOT been tested against the actual error scenario. Several concerns need human review:
Analytics tracking concern - Using
NotFound404Trackerfor rendering errors will conflate error events with actual 404s in analytics. Should we use a different tracker or rename this one?Reset button effectiveness - If the original error is persistent (malformed data object), the "Try again" button will just re-trigger the same error. Should we show different UI or disable the button after failed retry?
Error boundary placement - Placed at
[host]/[domain]level catches all errors for both static and dynamic routes. Is this too broad? Should it be at static/dynamic level separately?All errors same treatment - Every React rendering error shows the same page. Some errors might warrant different handling (data errors vs render errors vs hydration errors).
No error monitoring - Only console logging. Should we integrate Sentry or similar for production error tracking?
How has this PR been tested?
Human review checklist
Link to Devin run: https://app.devin.ai/sessions/a748753a2c364f4a9ce18ec74fd8b919
Requested by: Deep Singhvi ([email protected]) / @dsinghvi