{"record":{"id":"61e2bf9bdccf4ef8","repo":"vercel/next.js","slug":"catcherror-can-only-be-used-in-client-components","errorCode":null,"errorMessage":"`catchError` can only be used in Client Components.","messagePattern":"`catchError` can only be used in Client Components\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/next/src/api/error.react-server.ts","lineNumber":2,"sourceCode":"export function catchError(): never {\n  throw new Error('`catchError` can only be used in Client Components.')\n}\n\nexport type { ErrorInfo } from '../client/components/error-boundary'\n","sourceCodeStart":1,"sourceCodeEnd":6,"githubUrl":"https://github.com/vercel/next.js/blob/0ae8c72462952df163f1b1e0726641bc5b40dc93/packages/next/src/api/error.react-server.ts#L1-L6","documentation":"`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.","triggerScenarios":"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.","commonSituations":"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'.","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."],"exampleFix":"// before — catchError called in a Server Component\nimport { catchError } from 'next/dist/client/components/error-boundary'\nexport default function ServerComp() { catchError() }\n\n// after — move to a Client Component\n'use client'\nimport { catchError } from 'next/dist/client/components/error-boundary'\nexport default function ClientComp() { /* ... */ catchError() }","handlingStrategy":"validation","validationCode":"// catchError is client-only; verify you're in a client component.\nfunction assertClientContext(): void {\n  if (typeof window === 'undefined') {\n    throw new Error('catchError can only be used in Client Components.')\n  }\n}","typeGuard":"function isClientComponent(): boolean {\n  return typeof window !== 'undefined'\n}","tryCatchPattern":null,"preventionTips":["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."],"tags":["error-handling","client-components","server-components","react-server"],"analyzedSha":"0ae8c72462952df163f1b1e0726641bc5b40dc93","analyzedAt":"2026-08-06T19:44:29.143Z","schemaVersion":2},"datasetVersion":"2026-08-07T02:17:10.218Z"}