Next.js Discord

Discord Forum

Error handling

Unanswered
Green Kingfisher posted this in #help-forum
Open in Discord
Green KingfisherOP
This is a page.tsx where i am requesting from from an api. I want to show errors(eg authentication error, etc) using a toast. I need a solution that works in server component.

import { api } from '@/lib/api';
import PlayerFilters from './_components/player-filters';
import { PlayersTable } from './_components/players-table';
import { playerColumns } from './_components/player-columns';
import ClientLogger from '@/components/client-logger';
import { SearchedPlayerType } from '@/types';
import PaginationButtons from '@/components/pagination-buttons';

const getPlayers = async (searchParams: any) => {
  try {
    const url = `/player/search${
      new URLSearchParams(searchParams).toString()
        ? '?' + new URLSearchParams(searchParams).toString()
        : ''
    }`;

    const { data } = await api(url);

    return data;
  } catch (error: any) {
    return error.response.data;
  }
};

const PlayersPage = async ({ searchParams }: { searchParams: any }) => {
  const searchedPlayers = await getPlayers(searchParams);

  console.log(searchedPlayers);

  const formattedPlayers = searchedPlayers.results?.map(
    (player: SearchedPlayerType) => ({
      name: player.player.player_name,
      picture: player.player.picture,
      nation: player.player.nation,
      age: Math.floor(Number(player.player.age)).toString(),
      club: player.club.squad,
      season: player.season,
      competitionName: player.competition_name,
      position: player.player.position,
    })
  );

  return (
    <div className='py-20 space-y-8'>
      <PlayerFilters />
      <PlayersTable columns={playerColumns} data={formattedPlayers || []} />
      <PaginationButtons
        previous={searchedPlayers.previous}
        next={searchedPlayers.next}
      />
      <ClientLogger data={searchedPlayers} />
    </div>
  );
};

export default PlayersPage;

4 Replies

@chisto https://ui.shadcn.com/docs/components/sonner
Green KingfisherOP
I dont think this works in server components...
I tried to do this:
page.tsx :
const PlayersPage = async ({ searchParams }: { searchParams: any }) => {
  const { data, success, message } = await getPlayers(searchParams);

  console.log(success, message);

  const formattedPlayers = data?.results?.map((player: SearchedPlayerType) => ({
    name: player.player.player_name,
    picture: player.player.picture,
    nation: player.player.nation,
    age: Math.floor(Number(player.player.age)).toString(),
    club: player.club.squad,
    season: player.season,
    competitionName: player.competition_name,
    position: player.player.position,
  }));

  return (
    <div className='py-20 space-y-8'>
      <PlayerFilters />
      <PlayersTable columns={playerColumns} data={formattedPlayers || []} />
      <PaginationButtons previous={data?.previous} next={data?.next} />
      <ClientLogger data={data} />
      <ClientSonner hasError={!success} message={message} />
    </div>
  );
};

export default PlayersPage;


client-sonner.tsx:
'use client';

import { useToast } from '@/hooks/use-toast';
import { useEffect } from 'react';
// import { toast } from 'sonner';

const ClientSonner = ({
  hasError,
  message,
  errors,
}: {
  hasError: boolean;
  message: string;
  errors?: any;
}) => {
  const { toast } = useToast();

  useEffect(() => {
    if (hasError) {
      console.log(hasError);

      toast({
        description: message,
        variant: 'destructive',
      });
    }
  }, [hasError, message, toast]);

  console.log(errors);

  return null;
};

export default ClientSonner;


The useEffect inside client-sonner.tsx prints hasError as true but the toast is not rendered.
chisto
did you put the <Toaster /> in RootLayout?