Use refetchComponent explicitly in retry path

Previous commit's retry path used resetErrorBoundary + onReset state
mutation alone — RSCRoute would auto-fetch on the post-reset render
because props had changed. Functional, but didn't actually demonstrate
useRSC().refetchComponent, which is the canonical RoR Pro RSC retry
API per rsc-troubleshooting.md.

Switch to: refetchComponent('LiveActivity', correctedProps) primes the
cache, then resetErrorBoundary fires; the post-reset render hits cache
instead of triggering a second fetch. This shows the explicit API call
the docs recommend, while still handling our intentional-error case
(refetching with simulateError=false instead of the original throwing
props).

Page description updated to mention refetchComponent.

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

Author: ihabadham

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

@@ -3,26 +3,12 @@
 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>
-  );
-}
+import { useRSC } from 'react-on-rails-pro/RSCProvider';
 
 const LiveActivityRefresher = () => {
   const [refreshKey, setRefreshKey] = useState(0);
   const [simulateError, setSimulateError] = useState(false);
+  const { refetchComponent } = useRSC();
 
   const handleRefresh = () => {
     setSimulateError(false);
@@ -34,6 +20,18 @@ const LiveActivityRefresher = () => {
     setRefreshKey((k) => k + 1);
   };
 
+  // refetchComponent primes the cache with corrected props before resetting
+  // the boundary, so the post-reset render hits cache instead of re-fetching.
+  const buildRetry = (resetErrorBoundary) => () => {
+    const newKey = refreshKey + 1;
+    setSimulateError(false);
+    setRefreshKey(newKey);
+    refetchComponent('LiveActivity', { simulateError: false, refreshKey: newKey })
+      // eslint-disable-next-line no-console
+      .catch((err) => console.error('Retry refetch failed:', err))
+      .finally(() => resetErrorBoundary());
+  };
+
   return (
     <div className="space-y-3">
       <div className="flex items-center gap-2">
@@ -51,16 +49,22 @@ const LiveActivityRefresher = () => {
         >
           Simulate Error
         </button>
-        <span className="text-xs text-slate-500 ml-2">
-          Refresh count: {refreshKey}
-        </span>
+        <span className="text-xs text-slate-500 ml-2">Refresh count: {refreshKey}</span>
       </div>
       <ErrorBoundary
-        FallbackComponent={ErrorFallback}
-        onReset={() => {
-          setSimulateError(false);
-          setRefreshKey((k) => k + 1);
-        }}
+        fallbackRender={({ error, resetErrorBoundary }) => (
+          <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={buildRetry(resetErrorBoundary)}
+              className="px-3 py-1.5 text-sm bg-rose-600 text-white rounded hover:bg-rose-700"
+            >
+              Retry
+            </button>
+          </div>
+        )}
         resetKeys={[refreshKey]}
       >
         <RSCRoute componentName="LiveActivity" componentProps={{ simulateError, refreshKey }} />

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

@@ -72,7 +72,7 @@ const ServerComponentsPage = ({ comments = [] }) => {
             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.
+            calls <code>refetchComponent</code> with corrected props.
           </p>
           <LiveActivityRefresher />
         </section>