Skip to main content
Docs

<ClerkFailed>

The <ClerkFailed> component indicates that the Clerk object has failed to load. This is useful for displaying an error message to the user.

Example

It's not recommended to wrap the entire app in control components; instead, only wrap the components that need access to the Clerk object, such as custom flows.

app/routes/index.tsx
import { ClerkLoading, ClerkLoaded, ClerkDegraded, ClerkFailed } from '@clerk/tanstack-react-start'
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/')({
  component: Home,
})

function Home() {
  return (
    <>
      <ClerkLoading>
        <p>Clerk is loading...</p>
      </ClerkLoading>
      <ClerkLoaded>
        <p>Clerk has loaded (ready or degraded)</p>
        <MyCustomSignInFlow />
        <ClerkDegraded>
          <p>Clerk is experiencing issues. Please try again later.</p>
        </ClerkDegraded>
      </ClerkLoaded>
      <ClerkFailed>
        <p>Something went wrong with Clerk. Please contact support.</p>
      </ClerkFailed>
    </>
  )
}

Feedback

What did you think of this content?
GitHubEdit on GitHub

Last updated on