Add RSCRoute + ErrorBoundary demo to RSC page

Demonstrates two RSC capabilities the demo previously didn't cover:

1. Client-fetched server components via `RSCRoute` — a new section
   "Live Server Activity" shows server-side data (timestamp, free RAM,
   uptime). A Refresh button bumps the props' refreshKey, causing
   `RSCRoute` to fetch a fresh RSC payload over HTTP. No client-side
   fetcher code, no JSON parsing, no loading-state plumbing — the
   server re-renders, streams the result back, and React reconciles.

2. Error handling per the docs' canonical pattern (`rsc-troubleshooting.md`
   "Error Boundary Limitations"): a Simulate Error button forces the
   server component to throw. The error surfaces on the client as
   `ServerComponentFetchError`, is caught by `<ErrorBoundary>` from
   `react-error-boundary`, and the fallback UI exposes a Retry button
   that re-fetches with corrected props.

`LiveActivity.jsx` lives in `ror_components/` so auto_load_bundle
registers it as a Server Component reachable by `RSCRoute` via name.
`LiveActivityRefresher.jsx` is a single-file Client Component (no
`.client/.server` wrapper pair needed) — registerServerComponent on
the outer `ServerComponentsPage` provides the RSC context for
`RSCRoute` calls anywhere in its subtree.

Also restores `updated_at` to the comments prop set so the controller
matches the canonical `_comment.json.jbuilder` partial's field shape
(reverting a UI-driven minimization that coupled the resource
representation to today's component code).

Adds: `react-error-boundary@^4.1.2`.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: ihabadham

app/controllers/pages_controller.rb

@@ -41,7 +41,7 @@ def rescript; end
 
   def server_components
     @server_components_comments = Comment.order(id: :desc).limit(10)
-                                         .as_json(only: %i[id author text created_at])
+                                         .as_json(only: %i[id author text created_at updated_at])
     stream_view_containing_react_components(template: "/pages/server_components")
   end
 

client/app/bundles/server-components/components/LiveActivityRefresher.jsx

@@ -0,0 +1,72 @@
+'use client';
+
+import React, { useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import RSCRoute from 'react-on-rails-pro/RSCRoute';
+
+function ErrorFallback({ error, resetErrorBoundary }) {
+  return (
+    <div className="bg-rose-50 border border-rose-200 rounded-lg p-4">
+      <p className="text-rose-700 font-semibold mb-1">Server component fetch failed</p>
+      <p className="text-rose-600 text-sm font-mono mb-3">{error.message}</p>
+      <button
+        type="button"
+        onClick={resetErrorBoundary}
+        className="px-3 py-1.5 text-sm bg-rose-600 text-white rounded hover:bg-rose-700"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}
+
+const LiveActivityRefresher = () => {
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [simulateError, setSimulateError] = useState(false);
+
+  const handleRefresh = () => {
+    setSimulateError(false);
+    setRefreshKey((k) => k + 1);
+  };
+
+  const handleSimulateError = () => {
+    setSimulateError(true);
+    setRefreshKey((k) => k + 1);
+  };
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2">
+        <button
+          type="button"
+          onClick={handleRefresh}
+          className="px-3 py-1.5 text-sm bg-indigo-600 text-white rounded hover:bg-indigo-700"
+        >
+          Refresh
+        </button>
+        <button
+          type="button"
+          onClick={handleSimulateError}
+          className="px-3 py-1.5 text-sm bg-amber-100 text-amber-800 border border-amber-300 rounded hover:bg-amber-200"
+        >
+          Simulate Error
+        </button>
+        <span className="text-xs text-slate-500 ml-2">
+          Refresh count: {refreshKey}
+        </span>
+      </div>
+      <ErrorBoundary
+        FallbackComponent={ErrorFallback}
+        onReset={() => {
+          setSimulateError(false);
+          setRefreshKey((k) => k + 1);
+        }}
+        resetKeys={[refreshKey]}
+      >
+        <RSCRoute componentName="LiveActivity" componentProps={{ simulateError, refreshKey }} />
+      </ErrorBoundary>
+    </div>
+  );
+};
+
+export default LiveActivityRefresher;

client/app/bundles/server-components/ror_components/LiveActivity.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import os from 'os';
+
+async function LiveActivity({ simulateError = false }) {
+  if (simulateError) {
+    throw new Error('Simulated server-side render failure (demo)');
+  }
+
+  // Small delay so the refresh-in-flight state is visible.
+  await new Promise((resolve) => {
+    setTimeout(resolve, 300);
+  });
+
+  const stats = {
+    serverTime: new Date().toISOString(),
+    freeMemoryMB: Math.round(os.freemem() / (1024 * 1024)),
+    uptimeHours: Math.floor(os.uptime() / 3600),
+  };
+
+  return (
+    <div className="bg-gradient-to-br from-indigo-50 to-purple-50 border border-indigo-200 rounded-xl p-5">
+      <div className="grid grid-cols-3 gap-4 text-sm">
+        <div>
+          <div className="text-xs text-indigo-600 font-medium uppercase tracking-wide mb-1">
+            Server Time
+          </div>
+          <div className="font-mono text-indigo-900">{stats.serverTime}</div>
+        </div>
+        <div>
+          <div className="text-xs text-indigo-600 font-medium uppercase tracking-wide mb-1">
+            Free RAM
+          </div>
+          <div className="font-mono text-indigo-900">{stats.freeMemoryMB} MB</div>
+        </div>
+        <div>
+          <div className="text-xs text-indigo-600 font-medium uppercase tracking-wide mb-1">
+            Uptime (hrs)
+          </div>
+          <div className="font-mono text-indigo-900">{stats.uptimeHours}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LiveActivity;

client/app/bundles/server-components/ror_components/ServerComponentsPage.jsx

@@ -6,6 +6,7 @@ import React, { Suspense } from 'react';
 import ServerInfo from '../components/ServerInfo';
 import CommentsFeed from '../components/CommentsFeed';
 import TogglePanel from '../components/TogglePanel';
+import LiveActivityRefresher from '../components/LiveActivityRefresher';
 
 const ServerComponentsPage = ({ comments = [] }) => {
   return (
@@ -57,6 +58,25 @@ const ServerComponentsPage = ({ comments = [] }) => {
           </TogglePanel>
         </section>
 
+        {/* Client-fetched server component via RSCRoute + ErrorBoundary */}
+        <section>
+          <h2 className="text-xl font-semibold text-slate-700 mb-4 flex items-center gap-2">
+            Live Server Activity
+            <span className="text-xs font-normal bg-indigo-100 text-indigo-700 px-2 py-0.5 rounded-full">
+              RSCRoute + ErrorBoundary
+            </span>
+          </h2>
+          <p className="text-slate-500 text-sm mb-4">
+            Click <strong>Refresh</strong> to fetch a new RSC payload — the server re-renders
+            this section and streams the result back, no client-side JSON parsing or loading
+            state plumbing. Click <strong>Simulate Error</strong> to make the server component
+            throw; the failure surfaces as <code>ServerComponentFetchError</code> and is
+            caught by <code>&lt;ErrorBoundary&gt;</code>, which renders a Retry button that
+            re-fetches with corrected props.
+          </p>
+          <LiveActivityRefresher />
+        </section>
+
         {/* Async data fetching with Suspense streaming */}
         <section>
           <h2 className="text-xl font-semibold text-slate-700 mb-4 flex items-center gap-2">
@@ -66,8 +86,9 @@ const ServerComponentsPage = ({ comments = [] }) => {
             </span>
           </h2>
           <p className="text-slate-500 text-sm mb-4">
-            Comments are fetched directly on the server using the Rails API.
-            The page shell renders immediately while this section streams in progressively.
+            Comments come from the Rails controller as props — the canonical React on Rails Pro
+            pattern. The page shell renders immediately while this section streams in
+            progressively as Suspense boundaries resolve.
           </p>
           <Suspense
             fallback={

package.json

@@ -80,6 +80,7 @@
     "prop-types": "^15.8.1",
     "react": "~19.0.4",
     "react-dom": "~19.0.4",
+    "react-error-boundary": "^4.1.2",
     "react-intl": "^6.4.4",
     "react-on-rails-pro": "16.6.0",
     "react-on-rails-pro-node-renderer": "16.6.0",

yarn.lock

@@ -8745,6 +8745,13 @@ react-dom@~19.0.4:
   dependencies:
     scheduler "^0.25.0"
 
+react-error-boundary@^4.1.2:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/react-error-boundary/-/react-error-boundary-4.1.2.tgz#bc750ad962edb8b135d6ae922c046051eb58f289"
+  integrity sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 react-intl@^6.4.4:
   version "6.8.9"
   resolved "https://registry.npmjs.org/react-intl/-/react-intl-6.8.9.tgz"