T
TanStack•8mo ago
rising-crimson

DefaultCatchBoundary not showing in en error from the cold start of a database

It is justwhite blank page. My database is a cheap dev tier that's why the cold start is long. But I am relying on a component that will show upon the error. Code is here which I got from the example template of TanStack Start. __root.tsx 
createTanStackRouter({
      routeTree,
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
    }),
createTanStackRouter({
      routeTree,
      defaultErrorComponent: DefaultCatchBoundary,
      defaultNotFoundComponent: () => <NotFound />,
    }),
DefaultCatchBoundary.tsx `` import { ErrorComponent, Link, rootRouteId, useMatch, useRouter, } from '@tanstack/react-router'; import type { ErrorComponentProps } from '@tanstack/react-router'; export function DefaultCatchBoundary({ error }: ErrorComponentProps) { const router = useRouter(); const isRoot = useMatch({ strict: false, select: (state) => state.id === rootRouteId, }); console.error(error); return ( <div className="min-w-0 flex-1 p-4 flex flex-col items-center justify-center gap-6"> <ErrorComponent error={error} /> <div className="flex gap-2 items-center flex-wrap"> <button onClick={() => { router.invalidate(); }} className={px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold} > Try Again </button> {isRoot ? ( <Link to="/" className={px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold} > Home </Link> ) : ( <Link to="/" className={px-2 py-1 bg-gray-600 dark:bg-gray-700 rounded text-white uppercase font-extrabold`} onClick={(e) => { e.preventDefault(); window.history.back(); }} > Go Back </Link> )} </div> </div> ); }. You can see the error message in the devtool network tab as response. But still, the component is not showing.
1 Reply
rising-crimson
rising-crimsonOP•8mo ago
Here is the service that queries from the database. 
import { slow } from '@/utils/slow';
import { prisma } from '../../db';

export async function getProject() {
  console.log('getProject');

  await slow(500);

  try {
    const projects = await prisma.project.findMany({
      include: {
        teamMembers: true,
      },
    });

    const project = projects.map((proj) => {
      return {
        ...proj,
        teamMembers: proj.teamMembers.reduce(
          (acc, member) => {
            if (!acc[member.role]) {
              acc[member.role] = { count: 0, members: [] };
            }
            acc[member.role].count += 1;
            acc[member.role].members.push(member);
            return acc;
          },
          {} as Record<
            string,
            { count: number; members: typeof proj.teamMembers }
          >
        ),
      };
    });

    return project[0];
  } catch (error) {
    throw new Error('Prisma error. Might be from cold start');
  }
}
import { slow } from '@/utils/slow';
import { prisma } from '../../db';

export async function getProject() {
  console.log('getProject');

  await slow(500);

  try {
    const projects = await prisma.project.findMany({
      include: {
        teamMembers: true,
      },
    });

    const project = projects.map((proj) => {
      return {
        ...proj,
        teamMembers: proj.teamMembers.reduce(
          (acc, member) => {
            if (!acc[member.role]) {
              acc[member.role] = { count: 0, members: [] };
            }
            acc[member.role].count += 1;
            acc[member.role].members.push(member);
            return acc;
          },
          {} as Record<
            string,
            { count: number; members: typeof proj.teamMembers }
          >
        ),
      };
    });

    return project[0];
  } catch (error) {
    throw new Error('Prisma error. Might be from cold start');
  }
}

Did you find this page helpful?