Skip to main content

<ClerkFailed>

The <ClerkFailed> component indicates that the Browser 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 Browser object, such as .

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

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

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

Feedback

What did you think of this content?

Last updated on

GitHubEdit on GitHub