Skip to Content
Clerk logo

Clerk Docs

Ctrl + K
Go to clerkstage.dev

ClerkErrorBoundary()

Clerk uses short-lived tokens to keep your application secure. To refresh expired tokens Clerk uses Remix's error boundary feature(opens in a new tab).

If you do not implement this into your app, you will see a 401 after a short period of time even though your user is logged in.

Usage

import type { MetaFunction, LoaderFunction } from "@remix-run/node"; import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, } from "@remix-run/react"; import { rootAuthLoader } from "@clerk/remix/ssr.server"; import { ClerkApp, ClerkErrorBoundary } from "@clerk/remix"; export const meta: MetaFunction = () => ({ charset: "utf-8", title: "New Remix App", viewport: "width=device-width,initial-scale=1", }); export const loader: LoaderFunction = (args) => rootAuthLoader(args); // add an error boundary export const ErrorBoundary = ClerkErrorBoundary(); function App() { return ( <html lang="en"> <head> <Meta /> <Links /> </head> <body> <Outlet /> <ScrollRestoration /> <Scripts /> <LiveReload /> </body> </html> ); } export default ClerkApp(App);

If you need to add a custom boundary to your application you can pass it as an argument to the ClerkErrorBoundary.

export const ErrorBoundary = ClerkErrorBoundary(YourBoundary);

Properties

NameTypeDescription
RootErrorBoundary?React.ComponentTypeAn optional component used as your application boundary.

What did you think of this content?

Clerk © 2024