Add context (and request?) to ErrorBoundary #6297
Replies: 2 comments 4 replies
-
|
One alternative is to include the necessary export function loader({ context }) {
try {
doSomethingDangerous()
} catch (e) {
throw new Error(JSON.stringify({ message: e.message, env: context.ENV }))
}
}
export function ErrorBoundary({ error }: { error: Error }) {
let env, message
try {
const parsed = JSON.parse(error.message)
env = parsed.env
message = parsed.message
} catch {
env = {}
message = error.message
}
doSomethingWith(env)
return <html>{message}</html>
}This requires wrapping every |
Beta Was this translation helpful? Give feedback.
-
|
ErrorBoundary runs both server and client side, so you can't pass the AppLoadContext because that's a server-only thing. Doing this will limit error boundaries to only work server-side and never hydrate your app. Another way this may be able to work is once RSC are stable and Remix supports them, error boundaries could be considered server components and have access to every AppLoadContext. |
Beta Was this translation helpful? Give feedback.
-
Great point. An alternative solution would be loader data for an ErrorBoundary: // app/routes/my-route.tsx
export function errorLoaderData({ request, context, params }) {
return { ENV: context.env }
}
export function ErrorBoundary() {
const { ENV } = useErrorLoaderData()
...
}Another alternative would be to pass the // app/entry.server.tsx
export default function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext,
context: AppLoadContext
) {
const markup = renderToString(
<EnvironmentVariablesContext env={context.env}>
<RemixServer context={remixContext} url={request.url} />,
<EnvironmentVariablesContext>
)
return new Response('<!DOCTYPE html>' + markup, {
status: responseStatusCode,
headers: responseHeaders,
})
} |
Beta Was this translation helpful? Give feedback.
-
You can't access loader data in ErrorBoundary, because the trigger of the error boundary could be the loader failing. export async function loader() {
throw new Error("Something failed in the loader")
}
export function ErrorBoundary() {
// this was rendered because loader failed, so there's no loader data
}What you could do is to access a parent route loader data, so if you have
This is supported on the latest version of Remix |
Beta Was this translation helpful? Give feedback.
-
This is why I had suggested the new
True. The downside is that I need to split a route that has |
Beta Was this translation helpful? Give feedback.
-
This is excellent news! 98bdd4c has the commit and it does exactly what I need! |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
-
Problem
ErrorBoundaryhas the following type:Since the props don't include
context, any data or services that requirecontextare unavailable in error boundaries.In many environments (including Cloudflare Pages),
process.envdoesn't exist; environment variables are instead attached to thecontext.This makes it very difficult to use an error boundary to report errors to third-party trackers like Sentry, Rollbar, or LogRocket.
Proposal
Add
context: AppLoadContextto theErrorBoundaryprops. Better yet, if it's not prohibitive, add all ofDataFunctionArgs({ request, context, params }).Beta Was this translation helpful? Give feedback.
All reactions