feat: integrate react-error-boundary for error handling and add post functionality in journal viewer

Author: kentcdodds

exercises/99.final/99.solution/app/routes/ui/journal-viewer.tsx

@@ -1,4 +1,10 @@
-import { useMcpUiInit } from '#app/utils/mcp.ts'
+import { useTransition } from 'react'
+import {
+	ErrorBoundary,
+	useErrorBoundary,
+	type FallbackProps,
+} from 'react-error-boundary'
+import { useMcpUiInit, navigateToLink } from '#app/utils/mcp.ts'
 import { type Route } from './+types/journal-viewer.tsx'
 
 export async function loader({ context }: Route.LoaderArgs) {
@@ -18,10 +24,11 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 					<h1 className="text-foreground mb-2 text-3xl font-bold">
 						Your Journal
 					</h1>
-					<p className="text-muted-foreground">
+					<p className="text-muted-foreground mb-4">
 						You have {entries.length} journal{' '}
 						{entries.length === 1 ? 'entry' : 'entries'}
 					</p>
+					<XPostLink entryCount={entries.length} />
 				</div>
 
 				{entries.length === 0 ? (
@@ -76,3 +83,56 @@ export default function JournalViewer({ loaderData }: Route.ComponentProps) {
 		</div>
 	)
 }
+
+function XPostLink({ entryCount }: { entryCount: number }) {
+	return (
+		<ErrorBoundary FallbackComponent={XPostLinkError}>
+			<XPostLinkImpl entryCount={entryCount} />
+		</ErrorBoundary>
+	)
+}
+
+function XPostLinkError({ error, resetErrorBoundary }: FallbackProps) {
+	return (
+		<div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border p-3">
+			<p className="text-sm font-medium">Failed to post on X</p>
+			<p className="text-xs text-destructive/80">{error.message}</p>
+			<button
+				onClick={resetErrorBoundary}
+				className="mt-2 text-xs text-destructive hover:underline cursor-pointer"
+			>
+				Try again
+			</button>
+		</div>
+	)
+}
+
+function XPostLinkImpl({ entryCount }: { entryCount: number }) {
+	const [isPending, startTransition] = useTransition()
+	const { showBoundary } = useErrorBoundary()
+	const handlePostOnX = () => {
+		startTransition(async () => {
+			try {
+				const text = `I have ${entryCount} journal ${entryCount === 1 ? 'entry' : 'entries'} in my personal journal app! 📝✨`
+				const url = `https://x.com/intent/post?text=${encodeURIComponent(text)}`
+
+				await navigateToLink(url)
+			} catch (err) {
+				showBoundary(err)
+			}
+		})
+	}
+
+	return (
+		<button
+			onClick={handlePostOnX}
+			disabled={isPending}
+			className="bg-black text-white px-4 py-2 rounded-lg hover:bg-gray-800 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors flex items-center gap-2 cursor-pointer"
+		>
+			<svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+				<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
+			</svg>
+			{isPending ? 'Posting...' : 'Post'}
+		</button>
+	)
+}

exercises/99.final/99.solution/app/utils/mcp.ts

@@ -62,11 +62,11 @@ export function useFormSubmissionCapability() {
 	return canUseOnSubmit
 }
 
-export function callTool(
-	toolName: string,
-	params: any,
+function createMcpMessageHandler<T>(
+	type: string,
+	payload: Record<string, unknown>,
 	signal?: AbortSignal,
-): Promise<any> {
+): Promise<T> {
 	const messageId = crypto.randomUUID()
 
 	return new Promise((resolve, reject) => {
@@ -75,22 +75,10 @@ export function callTool(
 			return
 		}
 
-		// Send tool call with messageId
-		window.parent.postMessage(
-			{
-				type: 'tool',
-				messageId,
-				payload: {
-					toolName,
-					params,
-				},
-			},
-			'*',
-		)
+		window.parent.postMessage({ type, messageId, payload }, '*')
 
 		function handleMessage(event: MessageEvent) {
 			if (event.data.type === 'ui-message-response') {
-				console.log(event)
 				const {
 					messageId: responseMessageId,
 					payload: { response, error },
@@ -111,48 +99,24 @@ export function callTool(
 	})
 }
 
+export function callTool(
+	toolName: string,
+	params: any,
+	signal?: AbortSignal,
+): Promise<any> {
+	return createMcpMessageHandler('tool', { toolName, params }, signal)
+}
+
 export function sendPrompt(
 	prompt: string,
 	signal?: AbortSignal,
 ): Promise<void> {
-	const messageId = crypto.randomUUID()
-
-	return new Promise((resolve, reject) => {
-		if (signal?.aborted) {
-			reject(new Error('Operation aborted'))
-			return
-		}
-
-		// Send prompt with messageId
-		window.parent.postMessage(
-			{
-				type: 'prompt',
-				messageId,
-				payload: {
-					prompt,
-				},
-			},
-			'*',
-		)
-
-		function handleMessage(event: MessageEvent) {
-			if (event.data.type === 'ui-message-response') {
-				const {
-					messageId: responseMessageId,
-					payload: { response, error },
-				} = event.data
-				if (responseMessageId === messageId) {
-					window.removeEventListener('message', handleMessage)
-
-					if (error) {
-						reject(new Error(error))
-					} else {
-						resolve(response)
-					}
-				}
-			}
-		}
+	return createMcpMessageHandler('prompt', { prompt }, signal)
+}
 
-		window.addEventListener('message', handleMessage, { signal })
-	})
+export function navigateToLink(
+	url: string,
+	signal?: AbortSignal,
+): Promise<void> {
+	return createMcpMessageHandler('link', { url }, signal)
 }

exercises/99.final/99.solution/package.json

@@ -24,6 +24,7 @@
     "agents": "^0.0.111",
     "isbot": "^5.1.30",
     "react": "^18.3.1",
+    "react-error-boundary": "^6.0.0",
     "react-dom": "^18.3.1",
     "react-router": "^7.8.2",
     "zod": "^3.25.67"