trpc/app-router surfacing trpc errors in `error.tsx`?

[i already posted this on trpc discord but not getting anything over there so figured i'd see if anyone here might know] I've got this condition for throwing in my trpc procedure:
if (!userClerkProfile) {
console.log("throwing"); // -> this is logging
throw new TRPCError({
code: "NOT_FOUND",
message: `Couldn't find the user with @${input.username}`,
});

if (!userClerkProfile) {
console.log("throwing"); // -> this is logging
throw new TRPCError({
code: "NOT_FOUND",
message: `Couldn't find the user with @${input.username}`,
});

and on client I have a next13 error.tsx route, in which I do:
const ErrorViewMap = {
[TRPC_ERROR_MAP.NOT_FOUND]: UsernameNotFoundErrorView,
DEFAULT: () => <p>Unexpected error, please try again</p>,
};

export default function ProfilePageError({
error,
reset,
}: PropsProfilePageError) {
const errorCode = getHTTPStatusCodeFromError(error);
const ErrorView = ErrorViewMap[errorCode] ?? ErrorViewMap.DEFAULT;

return <ErrorView message={"stock message"} resetFn={reset} />;
}
const ErrorViewMap = {
[TRPC_ERROR_MAP.NOT_FOUND]: UsernameNotFoundErrorView,
DEFAULT: () => <p>Unexpected error, please try again</p>,
};

export default function ProfilePageError({
error,
reset,
}: PropsProfilePageError) {
const errorCode = getHTTPStatusCodeFromError(error);
const ErrorView = ErrorViewMap[errorCode] ?? ErrorViewMap.DEFAULT;

return <ErrorView message={"stock message"} resetFn={reset} />;
}
errorCode is always 500 when we throw from that condition. No matter the code I pass when I throw
2 Replies
shilohjt
shilohjt15mo ago
The errorCode variable in your client-side code is being populated by calling getHTTPStatusCodeFromError(error). Make sure that this function returns the correct mapping from the thrown error to its HTTP status code.
jack
jackOP15mo ago
Not at my computer right now but I believe that the error is coming through as expected I’ll check tomorrow and get back here
Want results from more Discord servers?
Add your server