feat: add error boundaries to pool pages

apps/web/app/pools/[id]/error.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import PoolDetailError from './error';
+
+vi.mock('next/link', () => ({
+  default: ({
+    href,
+    children,
+    className,
+  }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+  }) => (
+    <a href={href} className={className}>
+      {children}
+    </a>
+  ),
+}));
+
+describe('PoolDetailError', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('renders the error message with a back link', () => {
+    const retry = vi.fn();
+    render(<PoolDetailError error={new Error('test')} unstable_retry={retry} />);
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(screen.getByText(/couldn't load this pool/)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /all pools/i })).toHaveAttribute(
+      'href',
+      '/pools',
+    );
+  });
+
+  it('calls unstable_retry when the retry button is clicked', () => {
+    const retry = vi.fn();
+    render(<PoolDetailError error={new Error('test')} unstable_retry={retry} />);
+
+    fireEvent.click(screen.getByRole('button', { name: /try again/i }));
+    expect(retry).toHaveBeenCalledTimes(1);
+  });
+});

apps/web/app/pools/[id]/error.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import { useEffect } from 'react';
+import Link from 'next/link';
+
+export default function PoolDetailError({
+  error,
+  unstable_retry,
+}: {
+  error: Error & { digest?: string };
+  unstable_retry: () => void;
+}) {
+  useEffect(() => {
+    console.error('Pool detail page error:', error);
+  }, [error]);
+
+  return (
+    <main className="mx-auto max-w-4xl px-4 py-10">
+      <div className="mb-6">
+        <Link
+          href="/pools"
+          className="inline-flex items-center gap-1.5 text-sm text-zinc-500 hover:text-zinc-800 dark:hover:text-zinc-200 transition-colors"
+        >
+          <svg
+            className="h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            strokeWidth={2}
+            aria-hidden="true"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" />
+          </svg>
+          All Pools
+        </Link>
+      </div>
+      <div className="text-center py-12">
+        <h2 className="text-lg font-semibold text-zinc-900 dark:text-white mb-2">
+          Something went wrong
+        </h2>
+        <p className="text-sm text-zinc-500 mb-4">
+          We couldn&apos;t load this pool. This might be a temporary issue.
+        </p>
+        <button
+          onClick={unstable_retry}
+          className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors"
+        >
+          Try again
+        </button>
+      </div>
+    </main>
+  );
+}

apps/web/app/pools/error.test.tsx

@@ -0,0 +1,21 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import PoolsError from './error';
+
+describe('PoolsError', () => {
+  it('renders the error message', () => {
+    const retry = vi.fn();
+    render(<PoolsError error={new Error('test')} unstable_retry={retry} />);
+
+    expect(screen.getByText('Something went wrong')).toBeInTheDocument();
+    expect(screen.getByText(/couldn't load the pools list/)).toBeInTheDocument();
+  });
+
+  it('calls unstable_retry when the retry button is clicked', () => {
+    const retry = vi.fn();
+    render(<PoolsError error={new Error('test')} unstable_retry={retry} />);
+
+    fireEvent.click(screen.getByRole('button', { name: /try again/i }));
+    expect(retry).toHaveBeenCalledTimes(1);
+  });
+});

apps/web/app/pools/error.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export default function PoolsError({
+  error,
+  unstable_retry,
+}: {
+  error: Error & { digest?: string };
+  unstable_retry: () => void;
+}) {
+  useEffect(() => {
+    console.error('Pools page error:', error);
+  }, [error]);
+
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-8">
+      <div className="text-center py-12">
+        <h2 className="text-lg font-semibold text-zinc-900 dark:text-white mb-2">
+          Something went wrong
+        </h2>
+        <p className="text-sm text-zinc-500 mb-4">
+          We couldn&apos;t load the pools list. This might be a temporary issue.
+        </p>
+        <button
+          onClick={unstable_retry}
+          className="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500 transition-colors"
+        >
+          Try again
+        </button>
+      </div>
+    </div>
+  );
+}