Everyone help me, how to handle server component error?

import { api, HydrateClient } from "@/trpc/server";
import { columns } from "./columns";
import { DataTable } from "./data-table";

export default async function SourcePage() {
  const sources = await api.source.getAll();
  // Sources will throwing an error (bad request, unauthorized, forbidden, etc)
  return (
    <HydrateClient>
      <div className="">
        <h1>Source Page</h1>
        <DataTable columns={columns} data={sources} />
      </div>
    </HydrateClient>
  );
}

import { api, HydrateClient } from "@/trpc/server";
import { columns } from "./columns";
import { DataTable } from "./data-table";

export default async function SourcePage() {
  const sources = await api.source.getAll();
  // Sources will throwing an error (bad request, unauthorized, forbidden, etc)
  return (
    <HydrateClient>
      <div className="">
        <h1>Source Page</h1>
        <DataTable columns={columns} data={sources} />
      </div>
    </HydrateClient>
  );
}