Hi, I finished with the "Learn Next.js" tour a day ago and now I'm trying to figure out if there is a way to handle errors within a component so that my page can at least load partially and avoid the error getting caught at the route level error boundary (error.js).

So far using a simple try/catch within the component works but I'm not sure if it there is a more idiomatic way of doing so, and maybe I'm just unable to find the "official" way of doing it. Also I'm concerned if there are any risks of doing it this way as well because of some footguns that I'm not aware of.

Here is a simple example of how I did it.

// actions.ts
'use server';

export async function hello(): Promise<string> {
  return 'hello';
}

export async function oops(): Promise<string> {
  await new Promise((res) => setTimeout(res, 2000));
  throw new Error('poof');
  return 'oops';
}

// hello.tsx

export default async function Hello() {
  const something = await hello();

  return <div>{something}</div>;
}

// oops.tsx

export default async function Oops() {
  try {
    const something = await oops();
    
    return <div>{something}</div>;
  } catch (error) {
    return <div>{error.message}</div>;
  }
}

// page.tsx

export default function Page() {
  return (
    <div>
      <Suspense fallback={'Loading hello...'}>
        <Hello />
      </Suspense>
      <Suspense fallback={'Loading oops...'}>
        <Oops />
      </Suspense>
    </div>
  );
}

tl;dr - Is there a better way of handling the error on the component level, and are there any potential footguns doing it this way or alternatively.

🙏 Ty