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
- Move the `catchError` usage into a Client Component (add 'use client' at the top of the file).
- Ensure the importing file is not resolved into the server bundle.
- 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
- Add 'use client' at the top of any file that uses catchError.
- Do not import catchError in Server Components or shared modules resolved into the server bundle.
- For server-side error handling, use error.tsx boundaries or try/catch.
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
- `${name}` is only available in a Server Component.
- `unstable_isUnrecognizedActionError` can only be used on the
- Using Client Components is not allowed in this environment.
- Not a redirect error
- An unexpected response was received from the server.
AI-assisted analysis of vercel/next.js@0ae8c72462 (2026-08-06).
Data as JSON: /api/errors/61e2bf9bdccf4ef8.
Report an issue: GitHub.