vercel/next.js · error · Error

`catchError` can only be used in Client Components.

Error message

`catchError` can only be used in Client Components.

What it means

`catchError` is a client-only error-boundary API. Its react-server stub (the variant bundled into RSC) unconditionally throws this error because the function's real implementation only exists in the client bundle. This prevents the function from silently no-op'ing when imported in a Server Component context.

Source

Thrown at packages/next/src/api/error.react-server.ts:2

export function catchError(): never {
  throw new Error('`catchError` can only be used in Client Components.')
}

export type { ErrorInfo } from '../client/components/error-boundary'

View on GitHub (pinned to 0ae8c72462)

Solutions

  1. Move the `catchError` usage into a Client Component (add 'use client' at the top of the file).
  2. Ensure the importing file is not resolved into the server bundle.
  3. For server-side error handling, use try/catch or error boundaries via error.tsx instead.

Example fix

// before — catchError called in a Server Component
import { catchError } from 'next/dist/client/components/error-boundary'
export default function ServerComp() { catchError() }

// after — move to a Client Component
'use client'
import { catchError } from 'next/dist/client/components/error-boundary'
export default function ClientComp() { /* ... */ catchError() }
Defensive patterns

Strategy: validation

Validate before calling

// catchError is client-only; verify you're in a client component.
function assertClientContext(): void {
  if (typeof window === 'undefined') {
    throw new Error('catchError can only be used in Client Components.')
  }
}

Type guard

function isClientComponent(): boolean {
  return typeof window !== 'undefined'
}

Prevention

When it happens

Trigger: Importing and calling `catchError` from the Next.js error API in code that executes in the React Server Component (RSC) environment — i.e., a Server Component or a module resolved into the server bundle.

Common situations: Using `catchError` in a Server Component; importing it from a shared module consumed by RSC code; migrating Pages Router error handling code without adding 'use client'.

Related errors


AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06). Data as JSON: /api/errors/61e2bf9bdccf4ef8. Report an issue: GitHub.