From 1b39498ba1cd460405c355ccc3695eb6bc772598 Mon Sep 17 00:00:00 2001
From: Nikita <nikita.develops.work@gmail.com>
Date: Fri, 30 Aug 2024 19:04:56 +0300
Subject: [PATCH 1/5] feat(error-handling): implement a way to handle errors
 that occur inside server components

---
 .../components/research_and_updates.tsx       | 143 ++++-----
 .../(home)/components/tournaments_block.tsx   |  89 +++---
 .../components/project_contributions.tsx      | 295 +++++++++---------
 .../components/project_leaderboard.tsx        |  65 ++--
 .../medals/components/medals_page.tsx         | 158 +++++-----
 .../components/sidebar/news_match/index.tsx   |  13 +-
 .../sidebar/similar_questions/index.tsx       |  19 +-
 front_end/src/app/(main)/questions/page.tsx   |   2 +-
 front_end/src/components/posts_feed/index.tsx |  39 ++-
 front_end/src/components/refresh_button.tsx   |  17 +
 .../server_component_error_boundary.tsx       |  25 ++
 11 files changed, 468 insertions(+), 397 deletions(-)
 create mode 100644 front_end/src/components/refresh_button.tsx
 create mode 100644 front_end/src/components/server_component_error_boundary.tsx

diff --git a/front_end/src/app/(main)/(home)/components/research_and_updates.tsx b/front_end/src/app/(main)/(home)/components/research_and_updates.tsx
index 7e909285a5..16a0eeab24 100644
--- a/front_end/src/app/(main)/(home)/components/research_and_updates.tsx
+++ b/front_end/src/app/(main)/(home)/components/research_and_updates.tsx
@@ -10,85 +10,88 @@ import imagePlaceholder from "@/app/assets/images/tournament.webp";
 import PostsApi from "@/services/posts";
 import { PostWithNotebook } from "@/types/post";
 import { getNotebookSummary } from "@/utils/questions";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   postIds: number[];
 };
 
 const ResearchAndUpdatesBlock: FC<Props> = async ({ postIds }) => {
-  const t = await getTranslations();
-  const locale = await getLocale();
-  const { results } = await PostsApi.getPostsWithCP({
-    ids: postIds,
-  });
-  const posts = results as PostWithNotebook[];
+  return ServerComponentErrorBoundary(async () => {
+    const t = await getTranslations();
+    const locale = await getLocale();
+    const { results } = await PostsApi.getPostsWithCP({
+      ids: postIds,
+    });
+    const posts = results as PostWithNotebook[];
 
-  return (
-    <div className="my-6 flex flex-col md:my-12 lg:my-16">
-      <h2 className="mb-5 mt-0 w-full text-4xl font-bold text-blue-800 dark:text-blue-800-dark md:text-5xl">
-        {t("research")} &{" "}
-        <span className="text-blue-600 dark:text-blue-600-dark">
-          {t("updates")}
-        </span>
-      </h2>
-      <p className="m-0 text-xl text-blue-700 dark:text-blue-700-dark">
-        {t("partnersUseForecasts")}
-      </p>
-      <div className="mt-6 flex flex-col gap-8 lg:flex-row">
-        {posts.map(({ title, created_at, id, notebook, url_title }) => (
-          <Link
-            key={id}
-            className="flex-1 rounded-b-2xl bg-gray-0 no-underline hover:shadow-lg active:shadow-md dark:bg-gray-0-dark"
-            href={`/notebooks/${id}/${url_title}`}
-          >
-            {notebook.image_url && notebook.image_url.startsWith("https:") ? (
-              <Image
-                src={notebook.image_url}
-                alt=""
-                width={265}
-                height={160}
-                quality={100}
-                className="h-56 w-full object-cover object-center"
-              />
-            ) : (
-              <Image
-                src={imagePlaceholder}
-                alt=""
-                className="h-56 w-full object-cover object-center"
-                quality={100}
-              />
-            )}
+    return (
+      <div className="my-6 flex flex-col md:my-12 lg:my-16">
+        <h2 className="mb-5 mt-0 w-full text-4xl font-bold text-blue-800 dark:text-blue-800-dark md:text-5xl">
+          {t("research")} &{" "}
+          <span className="text-blue-600 dark:text-blue-600-dark">
+            {t("updates")}
+          </span>
+        </h2>
+        <p className="m-0 text-xl text-blue-700 dark:text-blue-700-dark">
+          {t("partnersUseForecasts")}
+        </p>
+        <div className="mt-6 flex flex-col gap-8 lg:flex-row">
+          {posts.map(({ title, created_at, id, notebook, url_title }) => (
+            <Link
+              key={id}
+              className="flex-1 rounded-b-2xl bg-gray-0 no-underline hover:shadow-lg active:shadow-md dark:bg-gray-0-dark"
+              href={`/notebooks/${id}/${url_title}`}
+            >
+              {notebook.image_url && notebook.image_url.startsWith("https:") ? (
+                <Image
+                  src={notebook.image_url}
+                  alt=""
+                  width={265}
+                  height={160}
+                  quality={100}
+                  className="h-56 w-full object-cover object-center"
+                />
+              ) : (
+                <Image
+                  src={imagePlaceholder}
+                  alt=""
+                  className="h-56 w-full object-cover object-center"
+                  quality={100}
+                />
+              )}
 
-            <div className="px-5 py-6">
-              <span className="rounded-full bg-blue-400 px-1.5 py-0.5 text-sm font-medium text-blue-900 dark:bg-blue-400-dark dark:text-blue-900-dark">
-                {intlFormat(
-                  new Date(created_at),
-                  {
-                    year: "numeric",
-                    month: "short",
-                  },
-                  { locale }
-                )}
-              </span>
-              <h3 className="mb-2 mt-3 text-2xl">{title}</h3>
-              <p className="m-0 text-base text-blue-700 dark:text-blue-700-dark">
-                {getNotebookSummary(notebook.markdown, 200, 80)}
-              </p>
-            </div>
-          </Link>
-        ))}
+              <div className="px-5 py-6">
+                <span className="rounded-full bg-blue-400 px-1.5 py-0.5 text-sm font-medium text-blue-900 dark:bg-blue-400-dark dark:text-blue-900-dark">
+                  {intlFormat(
+                    new Date(created_at),
+                    {
+                      year: "numeric",
+                      month: "short",
+                    },
+                    { locale }
+                  )}
+                </span>
+                <h3 className="mb-2 mt-3 text-2xl">{title}</h3>
+                <p className="m-0 text-base text-blue-700 dark:text-blue-700-dark">
+                  {getNotebookSummary(notebook.markdown, 200, 80)}
+                </p>
+              </div>
+            </Link>
+          ))}
+        </div>
+        <a
+          href="https://metaculus.medium.com/"
+          className="mt-8 inline-flex items-center self-end text-right text-base font-bold text-blue-800 no-underline dark:text-blue-800-dark"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {t("seeMorePosts")}
+          <FontAwesomeIcon icon={faArrowRight} className="ml-1.5 mr-1" />
+        </a>
       </div>
-      <a
-        href="https://metaculus.medium.com/"
-        className="mt-8 inline-flex items-center self-end text-right text-base font-bold text-blue-800 no-underline dark:text-blue-800-dark"
-        target="_blank"
-        rel="noreferrer"
-      >
-        {t("seeMorePosts")}
-        <FontAwesomeIcon icon={faArrowRight} className="ml-1.5 mr-1" />
-      </a>
-    </div>
-  );
+    );
+  });
 };
 
 export default ResearchAndUpdatesBlock;
diff --git a/front_end/src/app/(main)/(home)/components/tournaments_block.tsx b/front_end/src/app/(main)/(home)/components/tournaments_block.tsx
index de7f11c305..15534710bf 100644
--- a/front_end/src/app/(main)/(home)/components/tournaments_block.tsx
+++ b/front_end/src/app/(main)/(home)/components/tournaments_block.tsx
@@ -5,6 +5,7 @@ import { getTranslations } from "next-intl/server";
 import { FC } from "react";
 
 import TournamentCard from "@/components/tournament_card";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 import ProjectsApi from "@/services/projects";
 import { Tournament, TournamentType } from "@/types/projects";
 
@@ -13,51 +14,53 @@ type Props = {
 };
 
 const TournamentsBlock: FC<Props> = async ({ postSlugs }) => {
-  const t = await getTranslations();
-  const tournamentPromises = postSlugs.map(
-    (slug) => ProjectsApi.getSlugTournament(slug) as Promise<Tournament>
-  );
-  const tournaments = await Promise.all(tournamentPromises);
+  return ServerComponentErrorBoundary(async () => {
+    const t = await getTranslations();
+    const tournamentPromises = postSlugs.map(
+      (slug) => ProjectsApi.getSlugTournament(slug) as Promise<Tournament>
+    );
+    const tournaments = await Promise.all(tournamentPromises);
 
-  return (
-    <div className="my-6 flex flex-col md:my-12 lg:my-16">
-      <h2 className="mb-5 mt-0 w-full text-4xl font-bold text-blue-800 dark:text-blue-800-dark md:text-5xl">
-        {t("forecasting")}{" "}
-        <span className="text-blue-600 dark:text-blue-600-dark">
-          {t("tournaments")}
-        </span>
-      </h2>
-      <p className="m-0 text-xl text-blue-700 dark:text-blue-700-dark">
-        {t("joinTournaments")}
-      </p>
-      <div className="mt-8 grid gap-8 md:grid-cols-2 xl:grid-cols-4">
-        {tournaments.map((tournament) => (
-          <TournamentCard
-            key={tournament.id}
-            href={
-              tournament.slug
-                ? `/tournament/${tournament.slug}`
-                : `/tournament/${tournament.id}`
-            }
-            headerImageSrc={tournament.header_image}
-            name={tournament.name}
-            questionsCount={tournament.posts_count}
-            closeDate={tournament.close_date}
-            showCloseDate={tournament.type !== TournamentType.QuestionSeries}
-            prizePool={tournament.prize_pool}
-            withCount={false}
-          />
-        ))}
+    return (
+      <div className="my-6 flex flex-col md:my-12 lg:my-16">
+        <h2 className="mb-5 mt-0 w-full text-4xl font-bold text-blue-800 dark:text-blue-800-dark md:text-5xl">
+          {t("forecasting")}{" "}
+          <span className="text-blue-600 dark:text-blue-600-dark">
+            {t("tournaments")}
+          </span>
+        </h2>
+        <p className="m-0 text-xl text-blue-700 dark:text-blue-700-dark">
+          {t("joinTournaments")}
+        </p>
+        <div className="mt-8 grid gap-8 md:grid-cols-2 xl:grid-cols-4">
+          {tournaments.map((tournament) => (
+            <TournamentCard
+              key={tournament.id}
+              href={
+                tournament.slug
+                  ? `/tournament/${tournament.slug}`
+                  : `/tournament/${tournament.id}`
+              }
+              headerImageSrc={tournament.header_image}
+              name={tournament.name}
+              questionsCount={tournament.posts_count}
+              closeDate={tournament.close_date}
+              showCloseDate={tournament.type !== TournamentType.QuestionSeries}
+              prizePool={tournament.prize_pool}
+              withCount={false}
+            />
+          ))}
+        </div>
+        <Link
+          href="/tournaments/"
+          className="mt-8 inline-flex items-center self-end text-right text-base font-bold text-blue-800 no-underline dark:text-blue-800-dark"
+        >
+          {t("seeAllTournaments")}
+          <FontAwesomeIcon icon={faArrowRight} className="ml-1.5 mr-1" />
+        </Link>
       </div>
-      <Link
-        href="/tournaments/"
-        className="mt-8 inline-flex items-center self-end text-right text-base font-bold text-blue-800 no-underline dark:text-blue-800-dark"
-      >
-        {t("seeAllTournaments")}
-        <FontAwesomeIcon icon={faArrowRight} className="ml-1.5 mr-1" />
-      </Link>
-    </div>
-  );
+    );
+  });
 };
 
 export default TournamentsBlock;
diff --git a/front_end/src/app/(main)/(leaderboards)/contributions/components/project_contributions.tsx b/front_end/src/app/(main)/(leaderboards)/contributions/components/project_contributions.tsx
index 25ce312dc7..cd5bd6f35f 100644
--- a/front_end/src/app/(main)/(leaderboards)/contributions/components/project_contributions.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/contributions/components/project_contributions.tsx
@@ -6,6 +6,7 @@ import InfoToggle from "@/components/ui/info_toggle";
 import SectionToggle from "@/components/ui/section_toggle";
 import LeaderboardApi from "@/services/leaderboard";
 import { Tournament } from "@/types/projects";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   project: Tournament;
@@ -13,169 +14,175 @@ type Props = {
 };
 
 const ProjectContributions: FC<Props> = async ({ project, userId }) => {
-  const t = await getTranslations();
-  const contributionsDetails = await LeaderboardApi.getContributions({
-    type: "project",
-    userId,
-    projectId: project.id,
-  });
+  return ServerComponentErrorBoundary(async () => {
+    const t = await getTranslations();
+    const contributionsDetails = await LeaderboardApi.getContributions({
+      type: "project",
+      userId,
+      projectId: project.id,
+    });
 
-  return (
-    <SectionToggle
-      title={t("myScore")}
-      className="bg-gold-200 dark:bg-gold-200-dark"
-    >
-      {!!contributionsDetails.contributions.length && (
-        <table className="mb-3 w-full">
-          <thead>
-            <tr className="border-b border-gray-400 dark:border-gray-400-dark">
-              <th className="p-2 text-left text-sm font-bold">
-                {t("Question")}
-              </th>
-              <th className="p-2 text-right text-sm font-bold">{t("score")}</th>
-              {project.score_type === "relative_legacy_tournament" && (
+    return (
+      <SectionToggle
+        title={t("myScore")}
+        className="bg-gold-200 dark:bg-gold-200-dark"
+      >
+        {!!contributionsDetails.contributions.length && (
+          <table className="mb-3 w-full">
+            <thead>
+              <tr className="border-b border-gray-400 dark:border-gray-400-dark">
+                <th className="p-2 text-left text-sm font-bold">
+                  {t("Question")}
+                </th>
                 <th className="p-2 text-right text-sm font-bold">
-                  {t("coverage")}
+                  {t("score")}
                 </th>
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            {contributionsDetails.contributions.map((contribution, i) => (
-              <tr
-                key={i}
-                className="even:bg-gray-200 dark:even:bg-gray-200-dark"
-              >
-                <td className="px-2 py-1 text-sm">
-                  <Link
-                    className="block no-underline"
-                    href={`/questions/${contribution.question_id}`}
-                  >
-                    {contribution.question_title}
-                  </Link>
+                {project.score_type === "relative_legacy_tournament" && (
+                  <th className="p-2 text-right text-sm font-bold">
+                    {t("coverage")}
+                  </th>
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              {contributionsDetails.contributions.map((contribution, i) => (
+                <tr
+                  key={i}
+                  className="even:bg-gray-200 dark:even:bg-gray-200-dark"
+                >
+                  <td className="px-2 py-1 text-sm">
+                    <Link
+                      className="block no-underline"
+                      href={`/questions/${contribution.question_id}`}
+                    >
+                      {contribution.question_title}
+                    </Link>
+                  </td>
+                  <td className="px-2 py-1 text-right text-sm font-bold text-orange-800 dark:text-orange-800-dark">
+                    {contribution.score ? contribution.score.toFixed(2) : "-"}
+                  </td>
+                  {project.score_type === "relative_legacy_tournament" && (
+                    <th className="p-2 text-right text-sm font-bold">
+                      {contribution.coverage
+                        ? `${(contribution.coverage * 100).toFixed(0)}%`
+                        : "0%"}
+                    </th>
+                  )}
+                </tr>
+              ))}
+            </tbody>
+
+            <tfoot>
+              <tr>
+                <th className="px-2 py-1 text-right text-sm">
+                  {t("totalTake")}
+                </th>
+                <td className="px-2 py-1 text-right text-sm font-bold text-orange-800 dark:text-orange-800-dark">
+                  {contributionsDetails.leaderboard_entry.take
+                    ? `${contributionsDetails.leaderboard_entry.take.toFixed(3)}`
+                    : "-"}
                 </td>
+              </tr>
+            </tfoot>
+            <tfoot>
+              <tr>
+                <th className="px-2 py-1 text-right text-sm">
+                  {t("totalScore")}
+                </th>
                 <td className="px-2 py-1 text-right text-sm font-bold text-orange-800 dark:text-orange-800-dark">
-                  {contribution.score ? contribution.score.toFixed(2) : "-"}
+                  {contributionsDetails.leaderboard_entry.score
+                    ? `${contributionsDetails.leaderboard_entry.score.toFixed(2)}`
+                    : "-"}
                 </td>
                 {project.score_type === "relative_legacy_tournament" && (
                   <th className="p-2 text-right text-sm font-bold">
-                    {contribution.coverage
-                      ? `${(contribution.coverage * 100).toFixed(0)}%`
+                    {contributionsDetails.leaderboard_entry.coverage
+                      ? `${(contributionsDetails.leaderboard_entry.coverage * 100).toFixed(2)}%`
                       : "0%"}
                   </th>
                 )}
               </tr>
-            ))}
-          </tbody>
+            </tfoot>
+          </table>
+        )}
 
-          <tfoot>
-            <tr>
-              <th className="px-2 py-1 text-right text-sm">{t("totalTake")}</th>
-              <td className="px-2 py-1 text-right text-sm font-bold text-orange-800 dark:text-orange-800-dark">
-                {contributionsDetails.leaderboard_entry.take
-                  ? `${contributionsDetails.leaderboard_entry.take.toFixed(3)}`
-                  : "-"}
-              </td>
-            </tr>
-          </tfoot>
-          <tfoot>
-            <tr>
-              <th className="px-2 py-1 text-right text-sm">
-                {t("totalScore")}
-              </th>
-              <td className="px-2 py-1 text-right text-sm font-bold text-orange-800 dark:text-orange-800-dark">
-                {contributionsDetails.leaderboard_entry.score
-                  ? `${contributionsDetails.leaderboard_entry.score.toFixed(2)}`
-                  : "-"}
-              </td>
+        <InfoToggle title={t("scoringTerminology")}>
+          <div className="mt-2">
+            <dl className="m-0">
+              <div className="m-2 flex text-sm">
+                <dt className="mr-2 w-20 flex-none font-bold">{t("score")}</dt>
+                {project.score_type === "peer_tournament" ? (
+                  <dd>
+                    {t.rich("peerScoreInfo", {
+                      link: (chunks) => (
+                        <Link href={"/help/scores-faq/#peer-score"}>
+                          {chunks}
+                        </Link>
+                      ),
+                    })}
+                  </dd>
+                ) : (
+                  <dd>
+                    {t.rich("relativeScoreInfo", {
+                      link: (chunks) => (
+                        <Link href={"/help/scores-faq/#relative-score"}>
+                          {chunks}
+                        </Link>
+                      ),
+                    })}
+                  </dd>
+                )}
+              </div>
+              <div className="m-2 flex text-sm">
+                <dt className="mr-2 w-20 flex-none font-bold">
+                  {t("totalScore")}
+                </dt>
+                {project.score_type === "peer_tournament" ? (
+                  <dd>
+                    {t.rich("totalPeerScoreInfo", {
+                      link: (chunks) => (
+                        <Link href={"/help/scores-faq/#peer-score"}>
+                          {chunks}
+                        </Link>
+                      ),
+                    })}
+                  </dd>
+                ) : (
+                  <dd>
+                    {t.rich("totalRelativeScoreInfo", {
+                      link: (chunks) => (
+                        <Link href={"/help/scores-faq/#relative-score"}>
+                          {chunks}
+                        </Link>
+                      ),
+                    })}
+                  </dd>
+                )}
+              </div>
               {project.score_type === "relative_legacy_tournament" && (
-                <th className="p-2 text-right text-sm font-bold">
-                  {contributionsDetails.leaderboard_entry.coverage
-                    ? `${(contributionsDetails.leaderboard_entry.coverage * 100).toFixed(2)}%`
-                    : "0%"}
-                </th>
-              )}
-            </tr>
-          </tfoot>
-        </table>
-      )}
-
-      <InfoToggle title={t("scoringTerminology")}>
-        <div className="mt-2">
-          <dl className="m-0">
-            <div className="m-2 flex text-sm">
-              <dt className="mr-2 w-20 flex-none font-bold">{t("score")}</dt>
-              {project.score_type === "peer_tournament" ? (
-                <dd>
-                  {t.rich("peerScoreInfo", {
-                    link: (chunks) => (
-                      <Link href={"/help/scores-faq/#peer-score"}>
-                        {chunks}
-                      </Link>
-                    ),
-                  })}
-                </dd>
-              ) : (
-                <dd>
-                  {t.rich("relativeScoreInfo", {
-                    link: (chunks) => (
-                      <Link href={"/help/scores-faq/#relative-score"}>
-                        {chunks}
-                      </Link>
-                    ),
-                  })}
-                </dd>
-              )}
-            </div>
-            <div className="m-2 flex text-sm">
-              <dt className="mr-2 w-20 flex-none font-bold">
-                {t("totalScore")}
-              </dt>
-              {project.score_type === "peer_tournament" ? (
-                <dd>
-                  {t.rich("totalPeerScoreInfo", {
-                    link: (chunks) => (
-                      <Link href={"/help/scores-faq/#peer-score"}>
-                        {chunks}
-                      </Link>
-                    ),
-                  })}
-                </dd>
-              ) : (
-                <dd>
-                  {t.rich("totalRelativeScoreInfo", {
-                    link: (chunks) => (
-                      <Link href={"/help/scores-faq/#relative-score"}>
-                        {chunks}
-                      </Link>
-                    ),
-                  })}
-                </dd>
+                <div className="m-2 flex text-sm">
+                  <dt className="mr-2 w-20 flex-none font-bold">
+                    {t("coverage")}
+                  </dt>
+                  <dd>{t("relativeCoverageInfo")}</dd>
+                </div>
               )}
-            </div>
-            {project.score_type === "relative_legacy_tournament" && (
               <div className="m-2 flex text-sm">
                 <dt className="mr-2 w-20 flex-none font-bold">
-                  {t("coverage")}
+                  {t("totalTake")}
                 </dt>
-                <dd>{t("relativeCoverageInfo")}</dd>
+                {project.score_type === "peer_tournament" ? (
+                  <dd>{t("peerTakeInfo")}</dd>
+                ) : (
+                  <dd>{t("relativeTakeInfo")}</dd>
+                )}
               </div>
-            )}
-            <div className="m-2 flex text-sm">
-              <dt className="mr-2 w-20 flex-none font-bold">
-                {t("totalTake")}
-              </dt>
-              {project.score_type === "peer_tournament" ? (
-                <dd>{t("peerTakeInfo")}</dd>
-              ) : (
-                <dd>{t("relativeTakeInfo")}</dd>
-              )}
-            </div>
-          </dl>
-        </div>
-      </InfoToggle>
-    </SectionToggle>
-  );
+            </dl>
+          </div>
+        </InfoToggle>
+      </SectionToggle>
+    );
+  });
 };
 
 export default ProjectContributions;
diff --git a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx
index 676bbb9d29..b1975462d1 100644
--- a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx
@@ -7,6 +7,7 @@ import LeaderboardApi from "@/services/leaderboard";
 import { LeaderboardType } from "@/types/scoring";
 
 import ProjectLeaderboardTable from "./project_leaderboard_table";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   projectId: number;
@@ -23,37 +24,39 @@ const ProjectLeaderboard: FC<Props> = async ({
   isQuestionSeries,
   userId,
 }) => {
-  const leaderboardDetails = await LeaderboardApi.getProjectLeaderboard(
-    projectId,
-    leaderboardType
-  );
-
-  if (!leaderboardDetails || !leaderboardDetails.entries.length) {
-    return null;
-  }
-
-  const prizePoolValue = !isNaN(Number(prizePool)) ? Number(prizePool) : 0;
-
-  const t = await getTranslations();
-
-  const leaderboardTitle = isQuestionSeries
-    ? t("openLeaderboard")
-    : t("leaderboard");
-
-  return (
-    <SectionToggle
-      title={leaderboardTitle}
-      className={classNames({
-        "bg-gold-200 dark:bg-gold-200-dark": !isQuestionSeries,
-      })}
-    >
-      <ProjectLeaderboardTable
-        leaderboardDetails={leaderboardDetails}
-        prizePool={prizePoolValue}
-        userId={userId}
-      />
-    </SectionToggle>
-  );
+  return ServerComponentErrorBoundary(async () => {
+    const leaderboardDetails = await LeaderboardApi.getProjectLeaderboard(
+      projectId,
+      leaderboardType
+    );
+
+    if (!leaderboardDetails || !leaderboardDetails.entries.length) {
+      return null;
+    }
+
+    const prizePoolValue = !isNaN(Number(prizePool)) ? Number(prizePool) : 0;
+
+    const t = await getTranslations();
+
+    const leaderboardTitle = isQuestionSeries
+      ? t("openLeaderboard")
+      : t("leaderboard");
+
+    return (
+      <SectionToggle
+        title={leaderboardTitle}
+        className={classNames({
+          "bg-gold-200 dark:bg-gold-200-dark": !isQuestionSeries,
+        })}
+      >
+        <ProjectLeaderboardTable
+          leaderboardDetails={leaderboardDetails}
+          prizePool={prizePoolValue}
+          userId={userId}
+        />
+      </SectionToggle>
+    );
+  });
 };
 
 export default ProjectLeaderboard;
diff --git a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx
index 81d72a4a42..70a8554e1f 100644
--- a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx
@@ -1,108 +1,100 @@
 import classNames from "classnames";
-import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { FC } from "react";
 
-import Tooltip from "@/components/ui/tooltip";
 import LeaderboardApi from "@/services/leaderboard";
 
 import MedalIcon from "../../components/medal_icon";
 import { RANKING_CATEGORIES } from "../../ranking_categories";
-import { CONTRIBUTIONS_USER_FILTER } from "../../contributions/search_params";
-
-import {
-  SCORING_CATEGORY_FILTER,
-  SCORING_YEAR_FILTER,
-} from "../../search_params";
 import { getMedalCategories } from "../helpers/medal_categories";
 import { getMedalDisplayTitle } from "../helpers/medal_title";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   profileId: number;
 };
 
 const MedalsPage: FC<Props> = async ({ profileId }) => {
-  const t = await getTranslations();
+  return ServerComponentErrorBoundary(async () => {
+    const t = await getTranslations();
 
-  const userMedals = await LeaderboardApi.getUserMedals(profileId);
-  const categories = getMedalCategories(userMedals, true);
-  type MedalType = "gold" | "silver" | "bronze";
+    const userMedals = await LeaderboardApi.getUserMedals(profileId);
+    const categories = getMedalCategories(userMedals, true);
+    type MedalType = "gold" | "silver" | "bronze";
 
-  function getMedalClassName(medalType: MedalType): string {
-    switch (medalType) {
-      case "gold":
-        return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#F6D84D]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#F6D84D]/30 dark:md:from-[#F6D84D]/20 from-0% to-30% to-white md:dark:to-blue-950/75";
-      case "silver":
-        return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#A7B1C0]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#A7B1C0]/15 dark:md:from-[#A7B1C0]/15 dark:from-[#A7B1C0]/25 from-0% to-30% to-white md:dark:to-blue-950/75";
-      case "bronze":
-        return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#F09B59]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#F09B59]/20 dark:md:from-[#F09B59]/20 from-0% to-30% to-white md:dark:to-blue-950/75";
-      default:
-        return "";
+    function getMedalClassName(medalType: MedalType): string {
+      switch (medalType) {
+        case "gold":
+          return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#F6D84D]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#F6D84D]/30 dark:md:from-[#F6D84D]/20 from-0% to-30% to-white md:dark:to-blue-950/75";
+        case "silver":
+          return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#A7B1C0]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#A7B1C0]/15 dark:md:from-[#A7B1C0]/15 dark:from-[#A7B1C0]/25 from-0% to-30% to-white md:dark:to-blue-950/75";
+        case "bronze":
+          return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#F09B59]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#F09B59]/20 dark:md:from-[#F09B59]/20 from-0% to-30% to-white md:dark:to-blue-950/75";
+        default:
+          return "";
+      }
     }
-  }
-  return (
-    <section>
-      <div className="flex w-full flex-col items-center gap-4">
-        {categories?.map((category, index) => (
-          <div
-            key={index}
-            className={classNames(
-              "flex w-full flex-col items-center justify-center rounded ",
-              { "sm:col-span-2": category.name === "tournament" }
-            )}
-          >
-            <div className="flex w-full items-center justify-center gap-3 self-stretch rounded-t bg-gradient-to-b from-white to-blue-100 px-5 py-2.5 pb-2 dark:from-blue-900/75 dark:to-blue-900/75 md:py-4 md:pb-4">
-              <span className="lext-lg font-medium text-blue-800 dark:text-blue-200 md:text-xl">
-                {t(RANKING_CATEGORIES[category.name].translationKey)}
-              </span>
-            </div>
-            <div className="flex min-h-[65px] flex-col content-center items-center justify-center gap-3 self-stretch rounded-b bg-blue-100 p-4 pt-0 dark:bg-blue-900/75 md:flex-row md:flex-wrap md:pt-4">
-              {!!category.medals.length ? (
-                category.medals.map((medal, index) => {
-                  return (
-                    <Link
-                      href={
-                        category.name === "tournament"
-                          ? `/tournament/${medal.projectId}`
-                          : `/contributions/?${SCORING_CATEGORY_FILTER}=${category.name}&${CONTRIBUTIONS_USER_FILTER}=${profileId}&${SCORING_YEAR_FILTER}=${medal.year}&duration=${medal.duration}`
-                      }
-                      key={index}
-                      className={`relative flex w-full min-w-[210px] flex-row items-center gap-3 overflow-hidden rounded-lg px-3 py-3 shadow-none shadow-blue-500/30 dark:bg-blue-900 dark:shadow-black/25 md:w-fit md:flex-col md:px-8 md:py-4 md:shadow-lg ${getMedalClassName(medal.type)}`}
-                    >
-                      <div className="z-2 absolute left-[-64px] top-[-40px] hidden size-32 rounded-full bg-white blur-xl dark:bg-blue-950 md:block"></div>
-                      <div className="z-2 absolute right-[-64px] top-[-40px] hidden size-32 rounded-full bg-white blur-xl dark:bg-blue-950 md:block"></div>
-                      <div className="z-5 relative min-w-6">
-                        <MedalIcon
-                          type={medal.type}
-                          className="size-6 md:size-8 "
-                        />
-                      </div>
-                      <div className="z-5 relative flex w-full flex-row items-start justify-between gap-2 md:flex-col md:items-center">
-                        <span className="self-center text-base font-bold text-gray-800 dark:text-gray-200">
-                          {getMedalDisplayTitle(medal)}
-                        </span>
-                        <span className="w-min self-center text-center text-sm text-gray-700 dark:text-gray-300 md:w-fit">
-                          <span className="opacity-70">{t("rank")}: </span>
-                          <span className="font-bold">#{medal.rank}</span>{" "}
-                          <span className="hidden opacity-70 md:inline-block">
-                            {t("outOfRank", { total: medal.totalEntries })}
+    return (
+      <section>
+        <div className="flex w-full flex-col items-center gap-4">
+          {categories?.map((category, index) => (
+            <div
+              key={index}
+              className={classNames(
+                "flex w-full flex-col items-center justify-center rounded ",
+                { "sm:col-span-2": category.name === "tournament" }
+              )}
+            >
+              <div className="flex w-full items-center justify-center gap-3 self-stretch rounded-t bg-gradient-to-b from-white to-blue-100 px-5 py-2.5 pb-2 dark:from-blue-900/75 dark:to-blue-900/75 md:py-4 md:pb-4">
+                <span className="lext-lg font-medium text-blue-800 dark:text-blue-200 md:text-xl">
+                  {t(RANKING_CATEGORIES[category.name].translationKey)}
+                </span>
+              </div>
+              <div className="flex min-h-[65px] flex-col content-center items-center justify-center gap-3 self-stretch rounded-b bg-blue-100 p-4 pt-0 dark:bg-blue-900/75 md:flex-row md:flex-wrap md:pt-4">
+                {!!category.medals.length ? (
+                  category.medals.map((medal, index) => {
+                    return (
+                      <div
+                        key={index}
+                        className={`relative flex w-full min-w-[210px] flex-row items-center gap-3 overflow-hidden rounded-lg px-3 py-3 shadow-none shadow-blue-500/30 dark:bg-blue-900 dark:shadow-black/25 md:w-fit md:flex-col md:px-8 md:py-4 md:shadow-lg ${getMedalClassName(medal.type)}`}
+                      >
+                        <div className="z-2 absolute left-[-64px] top-[-40px] hidden size-32 rounded-full bg-white blur-xl dark:bg-blue-950 md:block"></div>
+                        <div className="z-2 absolute right-[-64px] top-[-40px] hidden size-32 rounded-full bg-white blur-xl dark:bg-blue-950 md:block"></div>
+                        <div className="z-5 relative min-w-6">
+                          <MedalIcon
+                            type={medal.type}
+                            className="size-6 md:size-8 "
+                          />
+                        </div>
+                        <div className="z-5 relative flex w-full flex-row items-start justify-between gap-2 md:flex-col md:items-center">
+                          <span className="self-center text-base font-bold text-gray-800 dark:text-gray-200">
+                            {getMedalDisplayTitle(medal)}
+                          </span>
+                          <span className="w-min self-center text-center text-sm text-gray-700 dark:text-gray-300 md:w-fit">
+                            <span className="opacity-70">{t("rank")}: </span>
+                            <span className="font-bold">
+                              #{medal.rank}
+                            </span>{" "}
+                            <span className="hidden opacity-70 md:inline-block">
+                              {t("outOfRank", { total: medal.totalEntries })}
+                            </span>
                           </span>
-                        </span>
+                        </div>
                       </div>
-                    </Link>
-                  );
-                })
-              ) : (
-                <span className="text-base text-gray-500 dark:text-gray-500-dark">
-                  {t("noMedals")}
-                </span>
-              )}
+                    );
+                  })
+                ) : (
+                  <span className="text-base text-gray-500 dark:text-gray-500-dark">
+                    {t("noMedals")}
+                  </span>
+                )}
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
+          ))}
+        </div>
+      </section>
+    );
+  });
 };
 
 export default MedalsPage;
diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx
index 9d115ca944..330722e952 100644
--- a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import PostsApi from "@/services/posts";
 
 import NewsMatchDrawer from "./news_match_drawer";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 interface Props {
   questionId: number;
@@ -13,11 +14,15 @@ const fetchArticles = async (postId: number) => {
 };
 
 const NewsMatch: FC<Props> = async ({ questionId }) => {
-  const articles = await fetchArticles(questionId);
+  return ServerComponentErrorBoundary(async () => {
+    const articles = await fetchArticles(questionId);
 
-  if (articles.length > 0) {
-    return <NewsMatchDrawer articles={articles} questionId={questionId} />;
-  }
+    if (articles.length > 0) {
+      return <NewsMatchDrawer articles={articles} questionId={questionId} />;
+    } else {
+      return null;
+    }
+  });
 };
 
 export default NewsMatch;
diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsx
index 5cf1b24ee6..dbe22f73ca 100644
--- a/front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsx
@@ -5,22 +5,25 @@ import { PostStatus } from "@/types/post";
 import { QuestionOrder } from "@/types/question";
 
 import SimilarQuestionsDrawer from "./similar_questions_drawer";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   post_id: number;
 };
 
 const SimilarQuestions: FC<Props> = async ({ post_id }) => {
-  const response = await PostsApi.getPostsWithCP({
-    similar_to_post_id: post_id,
-    order_by: QuestionOrder.PredictionCountDesc,
-    statuses: PostStatus.OPEN,
-  });
-  const { results: questions } = response;
+  return ServerComponentErrorBoundary(async () => {
+    const response = await PostsApi.getPostsWithCP({
+      similar_to_post_id: post_id,
+      order_by: QuestionOrder.PredictionCountDesc,
+      statuses: PostStatus.OPEN,
+    });
+    const { results: questions } = response;
 
-  if (!questions.length) return null;
+    if (!questions.length) return null;
 
-  return <SimilarQuestionsDrawer questions={questions} />;
+    return <SimilarQuestionsDrawer questions={questions} />;
+  });
 };
 
 export default SimilarQuestions;
diff --git a/front_end/src/app/(main)/questions/page.tsx b/front_end/src/app/(main)/questions/page.tsx
index 12b4840bd5..43ab17a2b3 100644
--- a/front_end/src/app/(main)/questions/page.tsx
+++ b/front_end/src/app/(main)/questions/page.tsx
@@ -34,7 +34,7 @@ export default async function Questions({
               <LoadingIndicator className="mx-auto h-8 w-24 text-gray-600 dark:text-gray-600-dark" />
             }
           >
-            <AwaitedPostsFeed filters={filters} />
+            <AwaitedPostsFeed filters={filters} topics={topics} />
           </Suspense>
         </div>
       </div>
diff --git a/front_end/src/components/posts_feed/index.tsx b/front_end/src/components/posts_feed/index.tsx
index 0ee317206c..4ab75176cc 100644
--- a/front_end/src/components/posts_feed/index.tsx
+++ b/front_end/src/components/posts_feed/index.tsx
@@ -5,26 +5,39 @@ import PaginatedPostsFeed, {
 } from "@/components/posts_feed/paginated_feed";
 import { POSTS_PER_PAGE } from "@/constants/posts_feed";
 import PostsApi, { PostsParams } from "@/services/posts";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import { Topic } from "@/types/projects";
 
 type Props = {
   filters: PostsParams;
   type?: PostsFeedType;
+  topics?: Topic[];
 };
 
-const AwaitedPostsFeed: FC<Props> = async ({ filters, type }) => {
-  const { results: questions, count } = await PostsApi.getPostsWithCP({
-    ...filters,
-    limit: POSTS_PER_PAGE,
-  });
+const AwaitedPostsFeed: FC<Props> = async ({ filters, type, topics }) => {
+  return ServerComponentErrorBoundary(async () => {
+    if (topics && !topics?.some((topic) => topic.slug === filters.topic)) {
+      return (
+        <div className="text-center text-gray-500 dark:text-gray-500-dark">
+          Such topic does not exist
+        </div>
+      );
+    }
+
+    const { results: questions, count } = await PostsApi.getPostsWithCP({
+      ...filters,
+      limit: POSTS_PER_PAGE,
+    });
 
-  return (
-    <PaginatedPostsFeed
-      filters={filters}
-      initialQuestions={questions}
-      totalCount={count}
-      type={type}
-    />
-  );
+    return (
+      <PaginatedPostsFeed
+        filters={filters}
+        initialQuestions={questions}
+        totalCount={count}
+        type={type}
+      />
+    );
+  });
 };
 
 export default AwaitedPostsFeed;
diff --git a/front_end/src/components/refresh_button.tsx b/front_end/src/components/refresh_button.tsx
new file mode 100644
index 0000000000..ea7b7ca96a
--- /dev/null
+++ b/front_end/src/components/refresh_button.tsx
@@ -0,0 +1,17 @@
+"use client";
+
+import React from "react";
+import { useRouter } from "next/navigation";
+import Button from "./ui/button";
+
+const RefreshButton: React.FC = () => {
+  const router = useRouter();
+
+  return (
+    <Button variant="primary" onClick={() => router.refresh()}>
+      Try again
+    </Button>
+  );
+};
+
+export default RefreshButton;
diff --git a/front_end/src/components/server_component_error_boundary.tsx b/front_end/src/components/server_component_error_boundary.tsx
new file mode 100644
index 0000000000..ad252a342a
--- /dev/null
+++ b/front_end/src/components/server_component_error_boundary.tsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { notFound } from "next/navigation";
+import RefreshButton from "./refresh_button";
+
+const ServerComponentErrorBoundary = async (
+  fn: () => Promise<JSX.Element | null>
+) => {
+  try {
+    return await fn();
+  } catch (error) {
+    if (error instanceof Error) {
+      if (error.message.includes("404")) return notFound();
+      return (
+        <div className="flex h-[50vh] w-full flex-col items-center justify-center">
+          <h2>{error.message ?? "Unknown error"}</h2>
+          <RefreshButton />
+        </div>
+      );
+    }
+
+    throw error;
+  }
+};
+
+export default ServerComponentErrorBoundary;

From b60116eaa27c564c23da263b4d1f3a467c0179dc Mon Sep 17 00:00:00 2001
From: Nikita <nikita.develops.work@gmail.com>
Date: Fri, 30 Aug 2024 19:04:59 +0300
Subject: [PATCH 2/5] feat(erro-handling): wrap server-side components in
 custom error boundary

---
 .../components/contributions_hero.tsx         |   9 +-
 .../components/global_contributions.tsx       |  31 +--
 .../components/global_leaderboard.tsx         |  31 +--
 .../medals/components/medals_widget.tsx       | 139 +++++++-------
 .../elections/components/card_forecast.tsx    |  19 +-
 .../index.tsx                                 | 123 ++++++------
 .../components/state_by_forecast/index.tsx    | 177 +++++++++---------
 .../discovery/components/tags_discovery.tsx   |  33 ++--
 8 files changed, 294 insertions(+), 268 deletions(-)

diff --git a/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_hero.tsx b/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_hero.tsx
index f4d2fa114f..9e0ab98f15 100644
--- a/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_hero.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_hero.tsx
@@ -16,6 +16,7 @@ import {
   SCORING_DURATION_FILTER,
   SCORING_YEAR_FILTER,
 } from "../../search_params";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   category: CategoryKey;
@@ -73,10 +74,12 @@ const ContributionsHero: FC<Props> = ({ year, duration, category, userId }) => {
 };
 
 const AwaitedUserHeader: FC<{ userId: number }> = async ({ userId }) => {
-  const t = await getTranslations();
-  const profile = await ProfileApi.getProfileById(userId);
+  return ServerComponentErrorBoundary(async () => {
+    const t = await getTranslations();
+    const profile = await ProfileApi.getProfileById(userId);
 
-  return <UserHeader>{profile.username ?? t("user")}</UserHeader>;
+    return <UserHeader>{profile.username ?? t("user")}</UserHeader>;
+  });
 };
 
 const UserHeader: FC<PropsWithChildren> = ({ children }) => (
diff --git a/front_end/src/app/(main)/(leaderboards)/contributions/components/global_contributions.tsx b/front_end/src/app/(main)/(leaderboards)/contributions/components/global_contributions.tsx
index 254b769073..288e0094d8 100644
--- a/front_end/src/app/(main)/(leaderboards)/contributions/components/global_contributions.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/contributions/components/global_contributions.tsx
@@ -3,6 +3,7 @@ import { FC } from "react";
 import ContributionsTable from "@/app/(main)/(leaderboards)/contributions/components/contributions_table";
 import LeaderboardApi from "@/services/leaderboard";
 import { CategoryKey, LeaderboardType } from "@/types/scoring";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   startTime: string;
@@ -19,21 +20,23 @@ const GlobalContributions: FC<Props> = async ({
   startTime,
   category,
 }) => {
-  const contributionsDetails = await LeaderboardApi.getContributions({
-    type: "global",
-    leaderboardType,
-    userId,
-    startTime,
-    endTime,
-  });
+  return ServerComponentErrorBoundary(async () => {
+    const contributionsDetails = await LeaderboardApi.getContributions({
+      type: "global",
+      leaderboardType,
+      userId,
+      startTime,
+      endTime,
+    });
 
-  return (
-    <ContributionsTable
-      category={category}
-      leaderboardEntry={contributionsDetails.leaderboard_entry}
-      contributions={contributionsDetails.contributions}
-    />
-  );
+    return (
+      <ContributionsTable
+        category={category}
+        leaderboardEntry={contributionsDetails.leaderboard_entry}
+        contributions={contributionsDetails.contributions}
+      />
+    );
+  });
 };
 
 export default GlobalContributions;
diff --git a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/global_leaderboard.tsx b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/global_leaderboard.tsx
index 3012508807..bca292270f 100644
--- a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/global_leaderboard.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/global_leaderboard.tsx
@@ -4,6 +4,7 @@ import LeaderboardApi from "@/services/leaderboard";
 import { CategoryKey, LeaderboardType } from "@/types/scoring";
 
 import LeaderboardTable from "./leaderboard_table";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   startTime: string;
@@ -24,21 +25,23 @@ const GlobalLeaderboard: FC<Props> = async ({
   category,
   cardSized,
 }) => {
-  const leaderboardDetails = await LeaderboardApi.getGlobalLeaderboard(
-    startTime,
-    endTime,
-    leaderboardType
-  );
+  return ServerComponentErrorBoundary(async () => {
+    const leaderboardDetails = await LeaderboardApi.getGlobalLeaderboard(
+      startTime,
+      endTime,
+      leaderboardType
+    );
 
-  return (
-    <LeaderboardTable
-      duration={duration}
-      year={year}
-      category={category}
-      leaderboardDetails={leaderboardDetails}
-      cardSized={cardSized}
-    />
-  );
+    return (
+      <LeaderboardTable
+        duration={duration}
+        year={year}
+        category={category}
+        leaderboardDetails={leaderboardDetails}
+        cardSized={cardSized}
+      />
+    );
+  });
 };
 
 export default GlobalLeaderboard;
diff --git a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx
index 90f82eb14a..41e84a32c9 100644
--- a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx
@@ -11,85 +11,90 @@ import { RANKING_CATEGORIES } from "../../ranking_categories";
 import { SCORING_CATEGORY_FILTER } from "../../search_params";
 import { getMedalCategories } from "../helpers/medal_categories";
 import { getMedalDisplayTitle } from "../helpers/medal_title";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   profileId: number;
 };
 
 const MedalsWidget: FC<Props> = async ({ profileId }) => {
-  const t = await getTranslations();
+  return ServerComponentErrorBoundary(async () => {
+    const t = await getTranslations();
 
-  const userMedals = await LeaderboardApi.getUserMedals(profileId);
-  const categories = getMedalCategories(userMedals, true);
+    const userMedals = await LeaderboardApi.getUserMedals(profileId);
+    const categories = getMedalCategories(userMedals, true);
 
-  return (
-    <section className="rounded bg-white p-4 dark:bg-blue-900 md:p-6">
-      <div className="mb-5 flex w-full flex-row items-center justify-between">
-        <h3 className="my-0 py-0 text-gray-700 dark:text-gray-300">
-          {t("medals")}
-        </h3>
-        <a
-          className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-          href={`/accounts/profile/${profileId}?mode=medals`}
-        >
-          View All
-        </a>
-      </div>
-      <div className="flex w-full flex-col items-center gap-2 md:gap-3">
-        {categories?.map((category, index) => (
-          <div
-            key={index}
-            className={classNames(
-              "flex w-full flex-col items-center justify-center rounded  bg-blue-100 dark:bg-blue-950/50",
-              { "sm:col-span-2": category.name === "tournament" }
-            )}
+    return (
+      <section className="rounded bg-white p-4 dark:bg-blue-900 md:p-6">
+        <div className="mb-5 flex w-full flex-row items-center justify-between">
+          <h3 className="my-0 py-0 text-gray-700 dark:text-gray-300">
+            {t("medals")}
+          </h3>
+          <a
+            className="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+            href={`/accounts/profile/${profileId}?mode=medals`}
           >
-            <Link
-              href={`/accounts/profile/${profileId}?mode=medals`}
-              className="flex w-full items-center justify-center gap-3 self-stretch px-5 py-1.5 text-base font-medium text-blue-800 no-underline dark:text-blue-800-dark md:py-3 md:text-lg"
+            View All
+          </a>
+        </div>
+        <div className="flex w-full flex-col items-center gap-2 md:gap-3">
+          {categories?.map((category, index) => (
+            <div
+              key={index}
+              className={classNames(
+                "flex w-full flex-col items-center justify-center rounded  bg-blue-100 dark:bg-blue-950/50",
+                { "sm:col-span-2": category.name === "tournament" }
+              )}
             >
-              <span>{t(RANKING_CATEGORIES[category.name].translationKey)}</span>
-            </Link>
-            <div className="flex flex-wrap content-center items-center justify-center gap-[8px] self-stretch rounded-b bg-blue-200 px-3 py-2 dark:bg-blue-100-dark md:gap-[13px] md:py-3">
-              {!!category.medals.length ? (
-                category.medals.map((medal, index) => {
-                  const tooltipContent = (
-                    <div className="flex flex-col items-center self-stretch">
-                      <span className="text-sm font-bold text-gray-800 dark:text-gray-800-dark">
-                        {getMedalDisplayTitle(medal)}
-                      </span>
-                      <span className="text-base text-gray-700 dark:text-gray-700-dark">
-                        {t("rank")}:{" "}
-                        <span className="font-bold">#{medal.rank}</span>{" "}
-                        {t("outOfRank", { total: medal.totalEntries })}
-                      </span>
-                    </div>
-                  );
-
-                  return (
-                    <Tooltip
-                      showDelayMs={200}
-                      placement={"bottom"}
-                      tooltipContent={tooltipContent}
-                      key={index}
-                    >
-                      <a href={`/accounts/profile/${profileId}?mode=medals`}>
-                        <MedalIcon type={medal.type} className="size-6" />
-                      </a>
-                    </Tooltip>
-                  );
-                })
-              ) : (
-                <span className="text-base text-gray-500 dark:text-gray-500-dark">
-                  {t("noMedals")}
+              <Link
+                href={`/accounts/profile/${profileId}?mode=medals`}
+                className="flex w-full items-center justify-center gap-3 self-stretch px-5 py-1.5 text-base font-medium text-blue-800 no-underline dark:text-blue-800-dark md:py-3 md:text-lg"
+              >
+                <span>
+                  {t(RANKING_CATEGORIES[category.name].translationKey)}
                 </span>
-              )}
+              </Link>
+              <div className="flex flex-wrap content-center items-center justify-center gap-[8px] self-stretch rounded-b bg-blue-200 px-3 py-2 dark:bg-blue-100-dark md:gap-[13px] md:py-3">
+                {!!category.medals.length ? (
+                  category.medals.map((medal, index) => {
+                    const tooltipContent = (
+                      <div className="flex flex-col items-center self-stretch">
+                        <span className="text-sm font-bold text-gray-800 dark:text-gray-800-dark">
+                          {getMedalDisplayTitle(medal)}
+                        </span>
+                        <span className="text-base text-gray-700 dark:text-gray-700-dark">
+                          {t("rank")}:{" "}
+                          <span className="font-bold">#{medal.rank}</span>{" "}
+                          {t("outOfRank", { total: medal.totalEntries })}
+                        </span>
+                      </div>
+                    );
+
+                    return (
+                      <Tooltip
+                        showDelayMs={200}
+                        placement={"bottom"}
+                        tooltipContent={tooltipContent}
+                        key={index}
+                      >
+                        <a href={`/accounts/profile/${profileId}?mode=medals`}>
+                          <MedalIcon type={medal.type} className="size-6" />
+                        </a>
+                      </Tooltip>
+                    );
+                  })
+                ) : (
+                  <span className="text-base text-gray-500 dark:text-gray-500-dark">
+                    {t("noMedals")}
+                  </span>
+                )}
+              </div>
             </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
+          ))}
+        </div>
+      </section>
+    );
+  });
 };
 
 export default MedalsWidget;
diff --git a/front_end/src/app/(main)/experiments/elections/components/card_forecast.tsx b/front_end/src/app/(main)/experiments/elections/components/card_forecast.tsx
index 28d3d29627..bddb081312 100644
--- a/front_end/src/app/(main)/experiments/elections/components/card_forecast.tsx
+++ b/front_end/src/app/(main)/experiments/elections/components/card_forecast.tsx
@@ -3,21 +3,24 @@ import { FC } from "react";
 import ForecastCard from "@/components/forecast_card";
 import PostsApi from "@/services/posts";
 import { TimelineChartZoomOption } from "@/types/charts";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   postId: number;
 };
 
 const CardForecast: FC<Props> = async ({ postId }) => {
-  const post = await PostsApi.getPost(postId);
-  if (!post) return null;
+  return ServerComponentErrorBoundary(async () => {
+    const post = await PostsApi.getPost(postId);
+    if (!post) return null;
 
-  return (
-    <ForecastCard
-      post={post}
-      defaultChartZoom={TimelineChartZoomOption.TwoMonths}
-    />
-  );
+    return (
+      <ForecastCard
+        post={post}
+        defaultChartZoom={TimelineChartZoomOption.TwoMonths}
+      />
+    );
+  });
 };
 
 export default CardForecast;
diff --git a/front_end/src/app/(main)/experiments/elections/components/expected_electoral_votes_forecast/index.tsx b/front_end/src/app/(main)/experiments/elections/components/expected_electoral_votes_forecast/index.tsx
index d23ad39a33..b80417c0b1 100644
--- a/front_end/src/app/(main)/experiments/elections/components/expected_electoral_votes_forecast/index.tsx
+++ b/front_end/src/app/(main)/experiments/elections/components/expected_electoral_votes_forecast/index.tsx
@@ -11,6 +11,7 @@ import { Candle } from "@/types/experiments";
 import { QuestionType, QuestionWithForecasts } from "@/types/question";
 import { getDisplayValue } from "@/utils/charts";
 import { computeQuartilesFromCDF } from "@/utils/math";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   democratPostId: number;
@@ -21,82 +22,84 @@ const ExpectedElectoralVotesForecast: FC<Props> = async ({
   democratPostId,
   republicanPostId,
 }) => {
-  const t = await getTranslations();
-  const [democratPost, republicanPost] = await Promise.all([
-    PostsApi.getPost(democratPostId),
-    PostsApi.getPost(republicanPostId),
-  ]);
-  if (!democratPost?.question || !republicanPost?.question) {
-    return null;
-  }
+  return ServerComponentErrorBoundary(async () => {
+    const t = await getTranslations();
+    const [democratPost, republicanPost] = await Promise.all([
+      PostsApi.getPost(democratPostId),
+      PostsApi.getPost(republicanPostId),
+    ]);
+    if (!democratPost?.question || !republicanPost?.question) {
+      return null;
+    }
 
-  const { candles, democratPrediction, republicanPrediction } =
-    getForecastData(democratPost.question, republicanPost.question) ?? {};
+    const { candles, democratPrediction, republicanPrediction } =
+      getForecastData(democratPost.question, republicanPost.question) ?? {};
 
-  return (
-    <div className="relative mt-4 flex w-full flex-col rounded bg-gray-0 p-4 dark:bg-gray-0-dark">
-      <div className="absolute left-2/4 top-5 hidden -translate-x-2/4 text-xs text-blue-700 opacity-75 dark:text-blue-700-dark md:block">
-        ({t("270VotesToWin")})
-      </div>
-      <div className="absolute right-5 top-5 hidden text-xs text-blue-700 opacity-75 dark:text-blue-700-dark min-[400px]:block md:hidden">
-        ({t("270VotesToWin")})
-      </div>
-      <span className="text-lg text-gray-700 dark:text-gray-700-dark">
-        {t("expectedElectoralVotes")}
-      </span>
-      <div className="relative mt-3 flex w-full justify-between md:mt-0">
-        <span className="absolute left-0 top-[51px] text-blue-700 opacity-65 dark:text-blue-700-dark">
-          {t("0Votes")}
-        </span>
-        <span className="absolute right-0 top-[51px] text-blue-700 opacity-65 dark:text-blue-700-dark">
-          {t("538Votes")}
+    return (
+      <div className="relative mt-4 flex w-full flex-col rounded bg-gray-0 p-4 dark:bg-gray-0-dark">
+        <div className="absolute left-2/4 top-5 hidden -translate-x-2/4 text-xs text-blue-700 opacity-75 dark:text-blue-700-dark md:block">
+          ({t("270VotesToWin")})
+        </div>
+        <div className="absolute right-5 top-5 hidden text-xs text-blue-700 opacity-75 dark:text-blue-700-dark min-[400px]:block md:hidden">
+          ({t("270VotesToWin")})
+        </div>
+        <span className="text-lg text-gray-700 dark:text-gray-700-dark">
+          {t("expectedElectoralVotes")}
         </span>
-        <span
-          className={classNames(
-            "absolute left-2/4 top-[45px] z-10 mt-[-16px] h-[58px] w-[2px] -translate-x-2/4 bg-gray-400 mix-blend-luminosity dark:bg-gray-500"
-          )}
-        />
-        <div className="mb-3 flex w-full items-center justify-center gap-2 pl-5 text-base text-[#0252A5] dark:text-[#A7C3DC]">
+        <div className="relative mt-3 flex w-full justify-between md:mt-0">
+          <span className="absolute left-0 top-[51px] text-blue-700 opacity-65 dark:text-blue-700-dark">
+            {t("0Votes")}
+          </span>
+          <span className="absolute right-0 top-[51px] text-blue-700 opacity-65 dark:text-blue-700-dark">
+            {t("538Votes")}
+          </span>
+          <span
+            className={classNames(
+              "absolute left-2/4 top-[45px] z-10 mt-[-16px] h-[58px] w-[2px] -translate-x-2/4 bg-gray-400 mix-blend-luminosity dark:bg-gray-500"
+            )}
+          />
+          <div className="mb-3 flex w-full items-center justify-center gap-2 pl-5 text-base text-[#0252A5] dark:text-[#A7C3DC]">
+            <div className="flex items-center gap-2 capitalize">
+              <span className="font-bold">{democratPrediction}</span>
+              {t("democrat")}
+            </div>
+            <Button
+              aria-label={t("democratElectoralVote")}
+              variant="tertiary"
+              size="sm"
+              presentationType="icon"
+              href={`/questions/${democratPost.question.id}`}
+            >
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="text-[#0252A5] dark:text-[#A7C3DC]"
+              />
+            </Button>
+          </div>
+        </div>
+        {!!candles && <ExperimentCandleBarGraph candles={candles} />}
+
+        <div className="relative mt-3 flex w-full items-center justify-center gap-2 pl-5 text-base text-[#E0152B] dark:text-[#E7858F]">
           <div className="flex items-center gap-2 capitalize">
-            <span className="font-bold">{democratPrediction}</span>
-            {t("democrat")}
+            <span className="font-bold">{republicanPrediction}</span>
+            {t("republican")}
           </div>
           <Button
-            aria-label={t("democratElectoralVote")}
+            aria-label={t("republicanElectoralVote")}
             variant="tertiary"
             size="sm"
             presentationType="icon"
-            href={`/questions/${democratPost.question.id}`}
+            href={`/questions/${republicanPost.question.id}`}
           >
             <FontAwesomeIcon
               icon={faArrowUpRightFromSquare}
-              className="text-[#0252A5] dark:text-[#A7C3DC]"
+              className="text-[#E0152B] dark:text-[#E7858F]"
             />
           </Button>
         </div>
       </div>
-      {!!candles && <ExperimentCandleBarGraph candles={candles} />}
-
-      <div className="relative mt-3 flex w-full items-center justify-center gap-2 pl-5 text-base text-[#E0152B] dark:text-[#E7858F]">
-        <div className="flex items-center gap-2 capitalize">
-          <span className="font-bold">{republicanPrediction}</span>
-          {t("republican")}
-        </div>
-        <Button
-          aria-label={t("republicanElectoralVote")}
-          variant="tertiary"
-          size="sm"
-          presentationType="icon"
-          href={`/questions/${republicanPost.question.id}`}
-        >
-          <FontAwesomeIcon
-            icon={faArrowUpRightFromSquare}
-            className="text-[#E0152B] dark:text-[#E7858F]"
-          />
-        </Button>
-      </div>
-    </div>
-  );
+    );
+  });
 };
 
 type ForecastData = {
diff --git a/front_end/src/app/(main)/experiments/elections/components/state_by_forecast/index.tsx b/front_end/src/app/(main)/experiments/elections/components/state_by_forecast/index.tsx
index ba014881e6..6d97f3ce07 100644
--- a/front_end/src/app/(main)/experiments/elections/components/state_by_forecast/index.tsx
+++ b/front_end/src/app/(main)/experiments/elections/components/state_by_forecast/index.tsx
@@ -17,6 +17,7 @@ import { extractQuestionGroupName } from "@/utils/questions";
 import MiddleVotesArrow from "./middle_votes_arrow";
 import StateByForecastCharts from "./state_by_forecast_charts";
 import { US_MAP_AREAS } from "./us_areas";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   questionGroupId: number;
@@ -31,105 +32,107 @@ const StateByForecast: FC<Props> = async ({
   republicanPostId,
   isEmbed,
 }) => {
-  const t = await getTranslations();
-  const post = await PostsApi.getPost(questionGroupId);
-  if (!post?.group_of_questions) {
-    return null;
-  }
+  return ServerComponentErrorBoundary(async () => {
+    const t = await getTranslations();
+    const post = await PostsApi.getPost(questionGroupId);
+    if (!post?.group_of_questions) {
+      return null;
+    }
 
-  let democratPrediction = null;
-  let republicanPrediction = null;
-  if (democratPostId && republicanPostId) {
-    const [demPost, repPost] = await Promise.all([
-      PostsApi.getPost(democratPostId),
-      PostsApi.getPost(republicanPostId),
-    ]);
-    const predictions = getDemocratRepublicanPrediction({ demPost, repPost });
-    if (predictions) {
-      democratPrediction = predictions.democratPrediction;
-      republicanPrediction = predictions.republicanPrediction;
+    let democratPrediction = null;
+    let republicanPrediction = null;
+    if (democratPostId && republicanPostId) {
+      const [demPost, repPost] = await Promise.all([
+        PostsApi.getPost(democratPostId),
+        PostsApi.getPost(republicanPostId),
+      ]);
+      const predictions = getDemocratRepublicanPrediction({ demPost, repPost });
+      if (predictions) {
+        democratPrediction = predictions.democratPrediction;
+        republicanPrediction = predictions.republicanPrediction;
+      }
     }
-  }
 
-  const stateByItems = getStateByItems(
-    post.id,
-    post.group_of_questions.questions
-  );
+    const stateByItems = getStateByItems(
+      post.id,
+      post.group_of_questions.questions
+    );
 
-  if (isEmbed) {
-    return (
-      <div className="relative mt-20 inline-flex w-full flex-col">
-        <div className="flex w-full flex-col">
-          <MiddleVotesArrow
-            className={classNames("absolute left-2/4 -translate-x-2/4")}
-          />
-          <div className="flex w-full justify-between">
-            {democratPrediction && (
-              <div className="capitalize">
-                {t("democrat")}
-                <br />
-                {t("numVotes", { num: democratPrediction })}
-              </div>
-            )}
-            {republicanPrediction && (
-              <div className="capitalize">
-                {t("republican")}
-                <br />
-                {t("numVotes", { num: republicanPrediction })}
-              </div>
-            )}
+    if (isEmbed) {
+      return (
+        <div className="relative mt-20 inline-flex w-full flex-col">
+          <div className="flex w-full flex-col">
+            <MiddleVotesArrow
+              className={classNames("absolute left-2/4 -translate-x-2/4")}
+            />
+            <div className="flex w-full justify-between">
+              {democratPrediction && (
+                <div className="capitalize">
+                  {t("democrat")}
+                  <br />
+                  {t("numVotes", { num: democratPrediction })}
+                </div>
+              )}
+              {republicanPrediction && (
+                <div className="capitalize">
+                  {t("republican")}
+                  <br />
+                  {t("numVotes", { num: republicanPrediction })}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
 
-        <StateByForecastCharts items={stateByItems} interactive={false} />
-      </div>
-    );
-  }
+          <StateByForecastCharts items={stateByItems} interactive={false} />
+        </div>
+      );
+    }
 
-  return (
-    <div className="mt-4 flex w-full flex-col rounded bg-gray-0 p-4 dark:bg-gray-0-dark">
-      <div className="mb-2 grid w-full grid-cols-[1fr_auto_1fr] gap-2">
-        <Link
-          className="col-start-2 row-span-1 row-start-1 flex items-center gap-2 text-lg text-gray-700 no-underline hover:text-gray-900 dark:text-gray-700-dark hover:dark:text-gray-900-dark md:col-start-1"
-          href={`/questions/${post.id}`}
-        >
-          {t("stateByStateForecasts")}
-          <Button
-            aria-label={t("republicanElectoralVote")}
-            variant="tertiary"
-            presentationType="icon"
-            size="sm"
+    return (
+      <div className="mt-4 flex w-full flex-col rounded bg-gray-0 p-4 dark:bg-gray-0-dark">
+        <div className="mb-2 grid w-full grid-cols-[1fr_auto_1fr] gap-2">
+          <Link
+            className="col-start-2 row-span-1 row-start-1 flex items-center gap-2 text-lg text-gray-700 no-underline hover:text-gray-900 dark:text-gray-700-dark hover:dark:text-gray-900-dark md:col-start-1"
+            href={`/questions/${post.id}`}
           >
-            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-          </Button>
-        </Link>
-
-        <ElectionsEmbedModal />
-      </div>
-
-      <div className="relative mt-10 w-full md:mt-0">
-        <MiddleVotesArrow className="absolute left-2/4 -translate-x-2/4 -translate-y-full" />
-      </div>
+            {t("stateByStateForecasts")}
+            <Button
+              aria-label={t("republicanElectoralVote")}
+              variant="tertiary"
+              presentationType="icon"
+              size="sm"
+            >
+              <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+            </Button>
+          </Link>
 
-      <StateByForecastCharts items={stateByItems} />
+          <ElectionsEmbedModal />
+        </div>
 
-      <hr className="border-blue-400 dark:border-blue-400-dark" />
+        <div className="relative mt-10 w-full md:mt-0">
+          <MiddleVotesArrow className="absolute left-2/4 -translate-x-2/4 -translate-y-full" />
+        </div>
 
-      <div className="font-sans text-sm font-light leading-5 text-gray-600 dark:text-gray-600-dark">
-        {t.rich("electionHubDisclaimer", {
-          bold: (chunks) => <span className="font-semibold">{chunks}</span>,
-          link: (chunks) => (
-            <Link
-              href={`/questions/${post.id}`}
-              className="font-semibold hover:text-blue-800 dark:hover:text-blue-800-dark"
-            >
-              {chunks}
-            </Link>
-          ),
-        })}
+        <StateByForecastCharts items={stateByItems} />
+
+        <hr className="border-blue-400 dark:border-blue-400-dark" />
+
+        <div className="font-sans text-sm font-light leading-5 text-gray-600 dark:text-gray-600-dark">
+          {t.rich("electionHubDisclaimer", {
+            bold: (chunks) => <span className="font-semibold">{chunks}</span>,
+            link: (chunks) => (
+              <Link
+                href={`/questions/${post.id}`}
+                className="font-semibold hover:text-blue-800 dark:hover:text-blue-800-dark"
+              >
+                {chunks}
+              </Link>
+            ),
+          })}
+        </div>
       </div>
-    </div>
-  );
+    );
+  });
 };
 
 const getStateByItems = (
diff --git a/front_end/src/app/(main)/questions/discovery/components/tags_discovery.tsx b/front_end/src/app/(main)/questions/discovery/components/tags_discovery.tsx
index 02f837b2c9..50164dda83 100644
--- a/front_end/src/app/(main)/questions/discovery/components/tags_discovery.tsx
+++ b/front_end/src/app/(main)/questions/discovery/components/tags_discovery.tsx
@@ -9,6 +9,7 @@ import { SearchParams } from "@/types/navigation";
 import DiscoverySection from "./section";
 import AwaitedTags from "./tags";
 import { TAGS_TEXT_SEARCH_FILTER } from "../constants/tags_feed";
+import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 const getFilters = (searchParams: SearchParams) => {
   const filters: TagsParams = {};
@@ -23,21 +24,23 @@ const getFilters = (searchParams: SearchParams) => {
 const TagsDiscovery: FC<{ searchParams: SearchParams }> = async ({
   searchParams,
 }) => {
-  const filters = getFilters(searchParams);
-  let tags = await ProjectsApi.getTags(filters);
-  const t = await getTranslations();
-
-  return (
-    <DiscoverySection title={t("tags")}>
-      <TagFilters />
-      <Suspense
-        key={JSON.stringify(searchParams)}
-        fallback={<LoadingIndicator className="mx-auto my-8 w-24" />}
-      >
-        <AwaitedTags tags={tags} />
-      </Suspense>
-    </DiscoverySection>
-  );
+  return ServerComponentErrorBoundary(async () => {
+    const filters = getFilters(searchParams);
+    let tags = await ProjectsApi.getTags(filters);
+    const t = await getTranslations();
+
+    return (
+      <DiscoverySection title={t("tags")}>
+        <TagFilters />
+        <Suspense
+          key={JSON.stringify(searchParams)}
+          fallback={<LoadingIndicator className="mx-auto my-8 w-24" />}
+        >
+          <AwaitedTags tags={tags} />
+        </Suspense>
+      </DiscoverySection>
+    );
+  });
 };
 
 export default TagsDiscovery;

From ff794bc256dd12be09561bacc454c7ee4c974744 Mon Sep 17 00:00:00 2001
From: Nikita <nikita.develops.work@gmail.com>
Date: Fri, 30 Aug 2024 19:05:03 +0300
Subject: [PATCH 3/5] fix(question-feed): fix topic filter bug

---
 front_end/src/components/posts_feed/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/front_end/src/components/posts_feed/index.tsx b/front_end/src/components/posts_feed/index.tsx
index 4ab75176cc..52d2be5508 100644
--- a/front_end/src/components/posts_feed/index.tsx
+++ b/front_end/src/components/posts_feed/index.tsx
@@ -16,7 +16,11 @@ type Props = {
 
 const AwaitedPostsFeed: FC<Props> = async ({ filters, type, topics }) => {
   return ServerComponentErrorBoundary(async () => {
-    if (topics && !topics?.some((topic) => topic.slug === filters.topic)) {
+    if (
+      topics &&
+      filters.topic &&
+      !topics?.some((topic) => topic.slug === filters.topic)
+    ) {
       return (
         <div className="text-center text-gray-500 dark:text-gray-500-dark">
           Such topic does not exist

From 0d607a7bd363d349d7353ba44e622fc23ab1c04d Mon Sep 17 00:00:00 2001
From: Nikita <nikita.develops.work@gmail.com>
Date: Fri, 30 Aug 2024 19:05:08 +0300
Subject: [PATCH 4/5] fix(error-handling): fix error boundary component

---
 .../components/server_component_error_boundary.tsx   | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/front_end/src/components/server_component_error_boundary.tsx b/front_end/src/components/server_component_error_boundary.tsx
index ad252a342a..e09b1442ea 100644
--- a/front_end/src/components/server_component_error_boundary.tsx
+++ b/front_end/src/components/server_component_error_boundary.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import { notFound } from "next/navigation";
 import RefreshButton from "./refresh_button";
 
 const ServerComponentErrorBoundary = async (
@@ -9,16 +8,21 @@ const ServerComponentErrorBoundary = async (
     return await fn();
   } catch (error) {
     if (error instanceof Error) {
-      if (error.message.includes("404")) return notFound();
+      const { digest } = error as Error & { digest?: string };
       return (
         <div className="flex h-[50vh] w-full flex-col items-center justify-center">
-          <h2>{error.message ?? "Unknown error"}</h2>
+          <h2>{digest ?? "Unknown error"}</h2>
           <RefreshButton />
         </div>
       );
     }
 
-    throw error;
+    return (
+      <div className="flex h-[50vh] w-full flex-col items-center justify-center">
+        <h2>Unknown error</h2>
+        <RefreshButton />
+      </div>
+    );
   }
 };
 

From a56747f4adbf84bcd4798b335b6168071b2d9549 Mon Sep 17 00:00:00 2001
From: Nikita <nikita.develops.work@gmail.com>
Date: Mon, 2 Sep 2024 12:57:11 +0300
Subject: [PATCH 5/5] fix(error-handle): refactor async server component error
 boundary to HOC

---
 .../components/research_and_updates.tsx       | 146 +++++++-------
 .../(home)/components/tournaments_block.tsx   |  92 +++++----
 .../components/contributions_hero.tsx         |   7 +-
 .../components/global_contributions.tsx       |   6 +-
 .../components/project_contributions.tsx      |   6 +-
 .../components/global_leaderboard.tsx         |   6 +-
 .../components/project_leaderboard.tsx        |   6 +-
 .../medals/components/medals_page.tsx         | 148 +++++++-------
 .../medals/components/medals_widget.tsx       |   6 +-
 .../elections/components/card_forecast.tsx    |  22 +--
 .../index.tsx                                 | 126 ++++++------
 .../components/state_by_forecast/index.tsx    | 180 +++++++++---------
 .../components/sidebar/news_match/index.tsx   |  22 +--
 .../sidebar/similar_questions/index.tsx       |  22 +--
 .../discovery/components/tags_discovery.tsx   |  36 ++--
 front_end/src/components/posts_feed/index.tsx |  30 ++-
 .../server_component_error_boundary.tsx       |  41 ++--
 17 files changed, 434 insertions(+), 468 deletions(-)

diff --git a/front_end/src/app/(main)/(home)/components/research_and_updates.tsx b/front_end/src/app/(main)/(home)/components/research_and_updates.tsx
index 16a0eeab24..a712745b8d 100644
--- a/front_end/src/app/(main)/(home)/components/research_and_updates.tsx
+++ b/front_end/src/app/(main)/(home)/components/research_and_updates.tsx
@@ -10,88 +10,86 @@ import imagePlaceholder from "@/app/assets/images/tournament.webp";
 import PostsApi from "@/services/posts";
 import { PostWithNotebook } from "@/types/post";
 import { getNotebookSummary } from "@/utils/questions";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   postIds: number[];
 };
 
 const ResearchAndUpdatesBlock: FC<Props> = async ({ postIds }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const t = await getTranslations();
-    const locale = await getLocale();
-    const { results } = await PostsApi.getPostsWithCP({
-      ids: postIds,
-    });
-    const posts = results as PostWithNotebook[];
+  const t = await getTranslations();
+  const locale = await getLocale();
+  const { results } = await PostsApi.getPostsWithCP({
+    ids: postIds,
+  });
+  const posts = results as PostWithNotebook[];
 
-    return (
-      <div className="my-6 flex flex-col md:my-12 lg:my-16">
-        <h2 className="mb-5 mt-0 w-full text-4xl font-bold text-blue-800 dark:text-blue-800-dark md:text-5xl">
-          {t("research")} &{" "}
-          <span className="text-blue-600 dark:text-blue-600-dark">
-            {t("updates")}
-          </span>
-        </h2>
-        <p className="m-0 text-xl text-blue-700 dark:text-blue-700-dark">
-          {t("partnersUseForecasts")}
-        </p>
-        <div className="mt-6 flex flex-col gap-8 lg:flex-row">
-          {posts.map(({ title, created_at, id, notebook, url_title }) => (
-            <Link
-              key={id}
-              className="flex-1 rounded-b-2xl bg-gray-0 no-underline hover:shadow-lg active:shadow-md dark:bg-gray-0-dark"
-              href={`/notebooks/${id}/${url_title}`}
-            >
-              {notebook.image_url && notebook.image_url.startsWith("https:") ? (
-                <Image
-                  src={notebook.image_url}
-                  alt=""
-                  width={265}
-                  height={160}
-                  quality={100}
-                  className="h-56 w-full object-cover object-center"
-                />
-              ) : (
-                <Image
-                  src={imagePlaceholder}
-                  alt=""
-                  className="h-56 w-full object-cover object-center"
-                  quality={100}
-                />
-              )}
+  return (
+    <div className="my-6 flex flex-col md:my-12 lg:my-16">
+      <h2 className="mb-5 mt-0 w-full text-4xl font-bold text-blue-800 dark:text-blue-800-dark md:text-5xl">
+        {t("research")} &{" "}
+        <span className="text-blue-600 dark:text-blue-600-dark">
+          {t("updates")}
+        </span>
+      </h2>
+      <p className="m-0 text-xl text-blue-700 dark:text-blue-700-dark">
+        {t("partnersUseForecasts")}
+      </p>
+      <div className="mt-6 flex flex-col gap-8 lg:flex-row">
+        {posts.map(({ title, created_at, id, notebook, url_title }) => (
+          <Link
+            key={id}
+            className="flex-1 rounded-b-2xl bg-gray-0 no-underline hover:shadow-lg active:shadow-md dark:bg-gray-0-dark"
+            href={`/notebooks/${id}/${url_title}`}
+          >
+            {notebook.image_url && notebook.image_url.startsWith("https:") ? (
+              <Image
+                src={notebook.image_url}
+                alt=""
+                width={265}
+                height={160}
+                quality={100}
+                className="h-56 w-full object-cover object-center"
+              />
+            ) : (
+              <Image
+                src={imagePlaceholder}
+                alt=""
+                className="h-56 w-full object-cover object-center"
+                quality={100}
+              />
+            )}
 
-              <div className="px-5 py-6">
-                <span className="rounded-full bg-blue-400 px-1.5 py-0.5 text-sm font-medium text-blue-900 dark:bg-blue-400-dark dark:text-blue-900-dark">
-                  {intlFormat(
-                    new Date(created_at),
-                    {
-                      year: "numeric",
-                      month: "short",
-                    },
-                    { locale }
-                  )}
-                </span>
-                <h3 className="mb-2 mt-3 text-2xl">{title}</h3>
-                <p className="m-0 text-base text-blue-700 dark:text-blue-700-dark">
-                  {getNotebookSummary(notebook.markdown, 200, 80)}
-                </p>
-              </div>
-            </Link>
-          ))}
-        </div>
-        <a
-          href="https://metaculus.medium.com/"
-          className="mt-8 inline-flex items-center self-end text-right text-base font-bold text-blue-800 no-underline dark:text-blue-800-dark"
-          target="_blank"
-          rel="noreferrer"
-        >
-          {t("seeMorePosts")}
-          <FontAwesomeIcon icon={faArrowRight} className="ml-1.5 mr-1" />
-        </a>
+            <div className="px-5 py-6">
+              <span className="rounded-full bg-blue-400 px-1.5 py-0.5 text-sm font-medium text-blue-900 dark:bg-blue-400-dark dark:text-blue-900-dark">
+                {intlFormat(
+                  new Date(created_at),
+                  {
+                    year: "numeric",
+                    month: "short",
+                  },
+                  { locale }
+                )}
+              </span>
+              <h3 className="mb-2 mt-3 text-2xl">{title}</h3>
+              <p className="m-0 text-base text-blue-700 dark:text-blue-700-dark">
+                {getNotebookSummary(notebook.markdown, 200, 80)}
+              </p>
+            </div>
+          </Link>
+        ))}
       </div>
-    );
-  });
+      <a
+        href="https://metaculus.medium.com/"
+        className="mt-8 inline-flex items-center self-end text-right text-base font-bold text-blue-800 no-underline dark:text-blue-800-dark"
+        target="_blank"
+        rel="noreferrer"
+      >
+        {t("seeMorePosts")}
+        <FontAwesomeIcon icon={faArrowRight} className="ml-1.5 mr-1" />
+      </a>
+    </div>
+  );
 };
 
-export default ResearchAndUpdatesBlock;
+export default WithServerComponentErrorBoundary(ResearchAndUpdatesBlock);
diff --git a/front_end/src/app/(main)/(home)/components/tournaments_block.tsx b/front_end/src/app/(main)/(home)/components/tournaments_block.tsx
index 15534710bf..55742ea6df 100644
--- a/front_end/src/app/(main)/(home)/components/tournaments_block.tsx
+++ b/front_end/src/app/(main)/(home)/components/tournaments_block.tsx
@@ -5,7 +5,7 @@ import { getTranslations } from "next-intl/server";
 import { FC } from "react";
 
 import TournamentCard from "@/components/tournament_card";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 import ProjectsApi from "@/services/projects";
 import { Tournament, TournamentType } from "@/types/projects";
 
@@ -14,53 +14,51 @@ type Props = {
 };
 
 const TournamentsBlock: FC<Props> = async ({ postSlugs }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const t = await getTranslations();
-    const tournamentPromises = postSlugs.map(
-      (slug) => ProjectsApi.getSlugTournament(slug) as Promise<Tournament>
-    );
-    const tournaments = await Promise.all(tournamentPromises);
+  const t = await getTranslations();
+  const tournamentPromises = postSlugs.map(
+    (slug) => ProjectsApi.getSlugTournament(slug) as Promise<Tournament>
+  );
+  const tournaments = await Promise.all(tournamentPromises);
 
-    return (
-      <div className="my-6 flex flex-col md:my-12 lg:my-16">
-        <h2 className="mb-5 mt-0 w-full text-4xl font-bold text-blue-800 dark:text-blue-800-dark md:text-5xl">
-          {t("forecasting")}{" "}
-          <span className="text-blue-600 dark:text-blue-600-dark">
-            {t("tournaments")}
-          </span>
-        </h2>
-        <p className="m-0 text-xl text-blue-700 dark:text-blue-700-dark">
-          {t("joinTournaments")}
-        </p>
-        <div className="mt-8 grid gap-8 md:grid-cols-2 xl:grid-cols-4">
-          {tournaments.map((tournament) => (
-            <TournamentCard
-              key={tournament.id}
-              href={
-                tournament.slug
-                  ? `/tournament/${tournament.slug}`
-                  : `/tournament/${tournament.id}`
-              }
-              headerImageSrc={tournament.header_image}
-              name={tournament.name}
-              questionsCount={tournament.posts_count}
-              closeDate={tournament.close_date}
-              showCloseDate={tournament.type !== TournamentType.QuestionSeries}
-              prizePool={tournament.prize_pool}
-              withCount={false}
-            />
-          ))}
-        </div>
-        <Link
-          href="/tournaments/"
-          className="mt-8 inline-flex items-center self-end text-right text-base font-bold text-blue-800 no-underline dark:text-blue-800-dark"
-        >
-          {t("seeAllTournaments")}
-          <FontAwesomeIcon icon={faArrowRight} className="ml-1.5 mr-1" />
-        </Link>
+  return (
+    <div className="my-6 flex flex-col md:my-12 lg:my-16">
+      <h2 className="mb-5 mt-0 w-full text-4xl font-bold text-blue-800 dark:text-blue-800-dark md:text-5xl">
+        {t("forecasting")}{" "}
+        <span className="text-blue-600 dark:text-blue-600-dark">
+          {t("tournaments")}
+        </span>
+      </h2>
+      <p className="m-0 text-xl text-blue-700 dark:text-blue-700-dark">
+        {t("joinTournaments")}
+      </p>
+      <div className="mt-8 grid gap-8 md:grid-cols-2 xl:grid-cols-4">
+        {tournaments.map((tournament) => (
+          <TournamentCard
+            key={tournament.id}
+            href={
+              tournament.slug
+                ? `/tournament/${tournament.slug}`
+                : `/tournament/${tournament.id}`
+            }
+            headerImageSrc={tournament.header_image}
+            name={tournament.name}
+            questionsCount={tournament.posts_count}
+            closeDate={tournament.close_date}
+            showCloseDate={tournament.type !== TournamentType.QuestionSeries}
+            prizePool={tournament.prize_pool}
+            withCount={false}
+          />
+        ))}
       </div>
-    );
-  });
+      <Link
+        href="/tournaments/"
+        className="mt-8 inline-flex items-center self-end text-right text-base font-bold text-blue-800 no-underline dark:text-blue-800-dark"
+      >
+        {t("seeAllTournaments")}
+        <FontAwesomeIcon icon={faArrowRight} className="ml-1.5 mr-1" />
+      </Link>
+    </div>
+  );
 };
 
-export default TournamentsBlock;
+export default WithServerComponentErrorBoundary(TournamentsBlock);
diff --git a/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_hero.tsx b/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_hero.tsx
index 9e0ab98f15..d755cb41ae 100644
--- a/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_hero.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/contributions/components/contributions_hero.tsx
@@ -16,7 +16,7 @@ import {
   SCORING_DURATION_FILTER,
   SCORING_YEAR_FILTER,
 } from "../../search_params";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   category: CategoryKey;
@@ -73,14 +73,13 @@ const ContributionsHero: FC<Props> = ({ year, duration, category, userId }) => {
   );
 };
 
-const AwaitedUserHeader: FC<{ userId: number }> = async ({ userId }) => {
-  return ServerComponentErrorBoundary(async () => {
+const AwaitedUserHeader: FC<{ userId: number }> =
+  WithServerComponentErrorBoundary(async ({ userId }) => {
     const t = await getTranslations();
     const profile = await ProfileApi.getProfileById(userId);
 
     return <UserHeader>{profile.username ?? t("user")}</UserHeader>;
   });
-};
 
 const UserHeader: FC<PropsWithChildren> = ({ children }) => (
   <h1 className="m-0 text-2xl font-bold text-blue-900 dark:text-blue-900-dark sm:text-4xl">
diff --git a/front_end/src/app/(main)/(leaderboards)/contributions/components/global_contributions.tsx b/front_end/src/app/(main)/(leaderboards)/contributions/components/global_contributions.tsx
index 288e0094d8..4454bed8d3 100644
--- a/front_end/src/app/(main)/(leaderboards)/contributions/components/global_contributions.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/contributions/components/global_contributions.tsx
@@ -3,7 +3,7 @@ import { FC } from "react";
 import ContributionsTable from "@/app/(main)/(leaderboards)/contributions/components/contributions_table";
 import LeaderboardApi from "@/services/leaderboard";
 import { CategoryKey, LeaderboardType } from "@/types/scoring";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   startTime: string;
@@ -20,7 +20,6 @@ const GlobalContributions: FC<Props> = async ({
   startTime,
   category,
 }) => {
-  return ServerComponentErrorBoundary(async () => {
     const contributionsDetails = await LeaderboardApi.getContributions({
       type: "global",
       leaderboardType,
@@ -36,7 +35,6 @@ const GlobalContributions: FC<Props> = async ({
         contributions={contributionsDetails.contributions}
       />
     );
-  });
 };
 
-export default GlobalContributions;
+export default WithServerComponentErrorBoundary(GlobalContributions);
diff --git a/front_end/src/app/(main)/(leaderboards)/contributions/components/project_contributions.tsx b/front_end/src/app/(main)/(leaderboards)/contributions/components/project_contributions.tsx
index cd5bd6f35f..5e8657b924 100644
--- a/front_end/src/app/(main)/(leaderboards)/contributions/components/project_contributions.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/contributions/components/project_contributions.tsx
@@ -6,7 +6,7 @@ import InfoToggle from "@/components/ui/info_toggle";
 import SectionToggle from "@/components/ui/section_toggle";
 import LeaderboardApi from "@/services/leaderboard";
 import { Tournament } from "@/types/projects";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   project: Tournament;
@@ -14,7 +14,6 @@ type Props = {
 };
 
 const ProjectContributions: FC<Props> = async ({ project, userId }) => {
-  return ServerComponentErrorBoundary(async () => {
     const t = await getTranslations();
     const contributionsDetails = await LeaderboardApi.getContributions({
       type: "project",
@@ -182,7 +181,6 @@ const ProjectContributions: FC<Props> = async ({ project, userId }) => {
         </InfoToggle>
       </SectionToggle>
     );
-  });
 };
 
-export default ProjectContributions;
+export default WithServerComponentErrorBoundary(ProjectContributions);
diff --git a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/global_leaderboard.tsx b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/global_leaderboard.tsx
index bca292270f..cb8692eb14 100644
--- a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/global_leaderboard.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/global_leaderboard.tsx
@@ -4,7 +4,7 @@ import LeaderboardApi from "@/services/leaderboard";
 import { CategoryKey, LeaderboardType } from "@/types/scoring";
 
 import LeaderboardTable from "./leaderboard_table";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   startTime: string;
@@ -25,7 +25,6 @@ const GlobalLeaderboard: FC<Props> = async ({
   category,
   cardSized,
 }) => {
-  return ServerComponentErrorBoundary(async () => {
     const leaderboardDetails = await LeaderboardApi.getGlobalLeaderboard(
       startTime,
       endTime,
@@ -41,7 +40,6 @@ const GlobalLeaderboard: FC<Props> = async ({
         cardSized={cardSized}
       />
     );
-  });
 };
 
-export default GlobalLeaderboard;
+export default WithServerComponentErrorBoundary(GlobalLeaderboard);
diff --git a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx
index b1975462d1..4adc0fd826 100644
--- a/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/leaderboard/components/project_leaderboard.tsx
@@ -7,7 +7,7 @@ import LeaderboardApi from "@/services/leaderboard";
 import { LeaderboardType } from "@/types/scoring";
 
 import ProjectLeaderboardTable from "./project_leaderboard_table";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   projectId: number;
@@ -24,7 +24,6 @@ const ProjectLeaderboard: FC<Props> = async ({
   isQuestionSeries,
   userId,
 }) => {
-  return ServerComponentErrorBoundary(async () => {
     const leaderboardDetails = await LeaderboardApi.getProjectLeaderboard(
       projectId,
       leaderboardType
@@ -56,7 +55,6 @@ const ProjectLeaderboard: FC<Props> = async ({
         />
       </SectionToggle>
     );
-  });
 };
 
-export default ProjectLeaderboard;
+export default WithServerComponentErrorBoundary(ProjectLeaderboard);
diff --git a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx
index 70a8554e1f..ace01acd77 100644
--- a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_page.tsx
@@ -8,93 +8,89 @@ import MedalIcon from "../../components/medal_icon";
 import { RANKING_CATEGORIES } from "../../ranking_categories";
 import { getMedalCategories } from "../helpers/medal_categories";
 import { getMedalDisplayTitle } from "../helpers/medal_title";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   profileId: number;
 };
 
 const MedalsPage: FC<Props> = async ({ profileId }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const t = await getTranslations();
+  const t = await getTranslations();
 
-    const userMedals = await LeaderboardApi.getUserMedals(profileId);
-    const categories = getMedalCategories(userMedals, true);
-    type MedalType = "gold" | "silver" | "bronze";
+  const userMedals = await LeaderboardApi.getUserMedals(profileId);
+  const categories = getMedalCategories(userMedals, true);
+  type MedalType = "gold" | "silver" | "bronze";
 
-    function getMedalClassName(medalType: MedalType): string {
-      switch (medalType) {
-        case "gold":
-          return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#F6D84D]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#F6D84D]/30 dark:md:from-[#F6D84D]/20 from-0% to-30% to-white md:dark:to-blue-950/75";
-        case "silver":
-          return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#A7B1C0]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#A7B1C0]/15 dark:md:from-[#A7B1C0]/15 dark:from-[#A7B1C0]/25 from-0% to-30% to-white md:dark:to-blue-950/75";
-        case "bronze":
-          return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#F09B59]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#F09B59]/20 dark:md:from-[#F09B59]/20 from-0% to-30% to-white md:dark:to-blue-950/75";
-        default:
-          return "";
-      }
+  function getMedalClassName(medalType: MedalType): string {
+    switch (medalType) {
+      case "gold":
+        return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#F6D84D]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#F6D84D]/30 dark:md:from-[#F6D84D]/20 from-0% to-30% to-white md:dark:to-blue-950/75";
+      case "silver":
+        return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#A7B1C0]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#A7B1C0]/15 dark:md:from-[#A7B1C0]/15 dark:from-[#A7B1C0]/25 from-0% to-30% to-white md:dark:to-blue-950/75";
+      case "bronze":
+        return "bg-blue-700/5 dark:bg-blue-950 md:bg-white md:bg-gradient-to-b from-[#F09B59]/0 dark:from-blue-950 dark:to-blue-950 md:from-[#F09B59]/20 dark:md:from-[#F09B59]/20 from-0% to-30% to-white md:dark:to-blue-950/75";
+      default:
+        return "";
     }
-    return (
-      <section>
-        <div className="flex w-full flex-col items-center gap-4">
-          {categories?.map((category, index) => (
-            <div
-              key={index}
-              className={classNames(
-                "flex w-full flex-col items-center justify-center rounded ",
-                { "sm:col-span-2": category.name === "tournament" }
-              )}
-            >
-              <div className="flex w-full items-center justify-center gap-3 self-stretch rounded-t bg-gradient-to-b from-white to-blue-100 px-5 py-2.5 pb-2 dark:from-blue-900/75 dark:to-blue-900/75 md:py-4 md:pb-4">
-                <span className="lext-lg font-medium text-blue-800 dark:text-blue-200 md:text-xl">
-                  {t(RANKING_CATEGORIES[category.name].translationKey)}
-                </span>
-              </div>
-              <div className="flex min-h-[65px] flex-col content-center items-center justify-center gap-3 self-stretch rounded-b bg-blue-100 p-4 pt-0 dark:bg-blue-900/75 md:flex-row md:flex-wrap md:pt-4">
-                {!!category.medals.length ? (
-                  category.medals.map((medal, index) => {
-                    return (
-                      <div
-                        key={index}
-                        className={`relative flex w-full min-w-[210px] flex-row items-center gap-3 overflow-hidden rounded-lg px-3 py-3 shadow-none shadow-blue-500/30 dark:bg-blue-900 dark:shadow-black/25 md:w-fit md:flex-col md:px-8 md:py-4 md:shadow-lg ${getMedalClassName(medal.type)}`}
-                      >
-                        <div className="z-2 absolute left-[-64px] top-[-40px] hidden size-32 rounded-full bg-white blur-xl dark:bg-blue-950 md:block"></div>
-                        <div className="z-2 absolute right-[-64px] top-[-40px] hidden size-32 rounded-full bg-white blur-xl dark:bg-blue-950 md:block"></div>
-                        <div className="z-5 relative min-w-6">
-                          <MedalIcon
-                            type={medal.type}
-                            className="size-6 md:size-8 "
-                          />
-                        </div>
-                        <div className="z-5 relative flex w-full flex-row items-start justify-between gap-2 md:flex-col md:items-center">
-                          <span className="self-center text-base font-bold text-gray-800 dark:text-gray-200">
-                            {getMedalDisplayTitle(medal)}
-                          </span>
-                          <span className="w-min self-center text-center text-sm text-gray-700 dark:text-gray-300 md:w-fit">
-                            <span className="opacity-70">{t("rank")}: </span>
-                            <span className="font-bold">
-                              #{medal.rank}
-                            </span>{" "}
-                            <span className="hidden opacity-70 md:inline-block">
-                              {t("outOfRank", { total: medal.totalEntries })}
-                            </span>
+  }
+  return (
+    <section>
+      <div className="flex w-full flex-col items-center gap-4">
+        {categories?.map((category, index) => (
+          <div
+            key={index}
+            className={classNames(
+              "flex w-full flex-col items-center justify-center rounded ",
+              { "sm:col-span-2": category.name === "tournament" }
+            )}
+          >
+            <div className="flex w-full items-center justify-center gap-3 self-stretch rounded-t bg-gradient-to-b from-white to-blue-100 px-5 py-2.5 pb-2 dark:from-blue-900/75 dark:to-blue-900/75 md:py-4 md:pb-4">
+              <span className="lext-lg font-medium text-blue-800 dark:text-blue-200 md:text-xl">
+                {t(RANKING_CATEGORIES[category.name].translationKey)}
+              </span>
+            </div>
+            <div className="flex min-h-[65px] flex-col content-center items-center justify-center gap-3 self-stretch rounded-b bg-blue-100 p-4 pt-0 dark:bg-blue-900/75 md:flex-row md:flex-wrap md:pt-4">
+              {!!category.medals.length ? (
+                category.medals.map((medal, index) => {
+                  return (
+                    <div
+                      key={index}
+                      className={`relative flex w-full min-w-[210px] flex-row items-center gap-3 overflow-hidden rounded-lg px-3 py-3 shadow-none shadow-blue-500/30 dark:bg-blue-900 dark:shadow-black/25 md:w-fit md:flex-col md:px-8 md:py-4 md:shadow-lg ${getMedalClassName(medal.type)}`}
+                    >
+                      <div className="z-2 absolute left-[-64px] top-[-40px] hidden size-32 rounded-full bg-white blur-xl dark:bg-blue-950 md:block"></div>
+                      <div className="z-2 absolute right-[-64px] top-[-40px] hidden size-32 rounded-full bg-white blur-xl dark:bg-blue-950 md:block"></div>
+                      <div className="z-5 relative min-w-6">
+                        <MedalIcon
+                          type={medal.type}
+                          className="size-6 md:size-8 "
+                        />
+                      </div>
+                      <div className="z-5 relative flex w-full flex-row items-start justify-between gap-2 md:flex-col md:items-center">
+                        <span className="self-center text-base font-bold text-gray-800 dark:text-gray-200">
+                          {getMedalDisplayTitle(medal)}
+                        </span>
+                        <span className="w-min self-center text-center text-sm text-gray-700 dark:text-gray-300 md:w-fit">
+                          <span className="opacity-70">{t("rank")}: </span>
+                          <span className="font-bold">#{medal.rank}</span>{" "}
+                          <span className="hidden opacity-70 md:inline-block">
+                            {t("outOfRank", { total: medal.totalEntries })}
                           </span>
-                        </div>
+                        </span>
                       </div>
-                    );
-                  })
-                ) : (
-                  <span className="text-base text-gray-500 dark:text-gray-500-dark">
-                    {t("noMedals")}
-                  </span>
-                )}
-              </div>
+                    </div>
+                  );
+                })
+              ) : (
+                <span className="text-base text-gray-500 dark:text-gray-500-dark">
+                  {t("noMedals")}
+                </span>
+              )}
             </div>
-          ))}
-        </div>
-      </section>
-    );
-  });
+          </div>
+        ))}
+      </div>
+    </section>
+  );
 };
 
-export default MedalsPage;
+export default WithServerComponentErrorBoundary(MedalsPage);
diff --git a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx
index 41e84a32c9..67f3963dc1 100644
--- a/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx
+++ b/front_end/src/app/(main)/(leaderboards)/medals/components/medals_widget.tsx
@@ -11,14 +11,13 @@ import { RANKING_CATEGORIES } from "../../ranking_categories";
 import { SCORING_CATEGORY_FILTER } from "../../search_params";
 import { getMedalCategories } from "../helpers/medal_categories";
 import { getMedalDisplayTitle } from "../helpers/medal_title";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   profileId: number;
 };
 
 const MedalsWidget: FC<Props> = async ({ profileId }) => {
-  return ServerComponentErrorBoundary(async () => {
     const t = await getTranslations();
 
     const userMedals = await LeaderboardApi.getUserMedals(profileId);
@@ -94,7 +93,6 @@ const MedalsWidget: FC<Props> = async ({ profileId }) => {
         </div>
       </section>
     );
-  });
 };
 
-export default MedalsWidget;
+export default WithServerComponentErrorBoundary(MedalsWidget);
diff --git a/front_end/src/app/(main)/experiments/elections/components/card_forecast.tsx b/front_end/src/app/(main)/experiments/elections/components/card_forecast.tsx
index bddb081312..0bf7e7f946 100644
--- a/front_end/src/app/(main)/experiments/elections/components/card_forecast.tsx
+++ b/front_end/src/app/(main)/experiments/elections/components/card_forecast.tsx
@@ -3,24 +3,22 @@ import { FC } from "react";
 import ForecastCard from "@/components/forecast_card";
 import PostsApi from "@/services/posts";
 import { TimelineChartZoomOption } from "@/types/charts";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   postId: number;
 };
 
 const CardForecast: FC<Props> = async ({ postId }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const post = await PostsApi.getPost(postId);
-    if (!post) return null;
+  const post = await PostsApi.getPost(postId);
+  if (!post) return null;
 
-    return (
-      <ForecastCard
-        post={post}
-        defaultChartZoom={TimelineChartZoomOption.TwoMonths}
-      />
-    );
-  });
+  return (
+    <ForecastCard
+      post={post}
+      defaultChartZoom={TimelineChartZoomOption.TwoMonths}
+    />
+  );
 };
 
-export default CardForecast;
+export default WithServerComponentErrorBoundary(CardForecast);
diff --git a/front_end/src/app/(main)/experiments/elections/components/expected_electoral_votes_forecast/index.tsx b/front_end/src/app/(main)/experiments/elections/components/expected_electoral_votes_forecast/index.tsx
index b80417c0b1..4e4b54d4bf 100644
--- a/front_end/src/app/(main)/experiments/elections/components/expected_electoral_votes_forecast/index.tsx
+++ b/front_end/src/app/(main)/experiments/elections/components/expected_electoral_votes_forecast/index.tsx
@@ -11,7 +11,7 @@ import { Candle } from "@/types/experiments";
 import { QuestionType, QuestionWithForecasts } from "@/types/question";
 import { getDisplayValue } from "@/utils/charts";
 import { computeQuartilesFromCDF } from "@/utils/math";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   democratPostId: number;
@@ -22,84 +22,82 @@ const ExpectedElectoralVotesForecast: FC<Props> = async ({
   democratPostId,
   republicanPostId,
 }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const t = await getTranslations();
-    const [democratPost, republicanPost] = await Promise.all([
-      PostsApi.getPost(democratPostId),
-      PostsApi.getPost(republicanPostId),
-    ]);
-    if (!democratPost?.question || !republicanPost?.question) {
-      return null;
-    }
+  const t = await getTranslations();
+  const [democratPost, republicanPost] = await Promise.all([
+    PostsApi.getPost(democratPostId),
+    PostsApi.getPost(republicanPostId),
+  ]);
+  if (!democratPost?.question || !republicanPost?.question) {
+    return null;
+  }
 
-    const { candles, democratPrediction, republicanPrediction } =
-      getForecastData(democratPost.question, republicanPost.question) ?? {};
+  const { candles, democratPrediction, republicanPrediction } =
+    getForecastData(democratPost.question, republicanPost.question) ?? {};
 
-    return (
-      <div className="relative mt-4 flex w-full flex-col rounded bg-gray-0 p-4 dark:bg-gray-0-dark">
-        <div className="absolute left-2/4 top-5 hidden -translate-x-2/4 text-xs text-blue-700 opacity-75 dark:text-blue-700-dark md:block">
-          ({t("270VotesToWin")})
-        </div>
-        <div className="absolute right-5 top-5 hidden text-xs text-blue-700 opacity-75 dark:text-blue-700-dark min-[400px]:block md:hidden">
-          ({t("270VotesToWin")})
-        </div>
-        <span className="text-lg text-gray-700 dark:text-gray-700-dark">
-          {t("expectedElectoralVotes")}
+  return (
+    <div className="relative mt-4 flex w-full flex-col rounded bg-gray-0 p-4 dark:bg-gray-0-dark">
+      <div className="absolute left-2/4 top-5 hidden -translate-x-2/4 text-xs text-blue-700 opacity-75 dark:text-blue-700-dark md:block">
+        ({t("270VotesToWin")})
+      </div>
+      <div className="absolute right-5 top-5 hidden text-xs text-blue-700 opacity-75 dark:text-blue-700-dark min-[400px]:block md:hidden">
+        ({t("270VotesToWin")})
+      </div>
+      <span className="text-lg text-gray-700 dark:text-gray-700-dark">
+        {t("expectedElectoralVotes")}
+      </span>
+      <div className="relative mt-3 flex w-full justify-between md:mt-0">
+        <span className="absolute left-0 top-[51px] text-blue-700 opacity-65 dark:text-blue-700-dark">
+          {t("0Votes")}
         </span>
-        <div className="relative mt-3 flex w-full justify-between md:mt-0">
-          <span className="absolute left-0 top-[51px] text-blue-700 opacity-65 dark:text-blue-700-dark">
-            {t("0Votes")}
-          </span>
-          <span className="absolute right-0 top-[51px] text-blue-700 opacity-65 dark:text-blue-700-dark">
-            {t("538Votes")}
-          </span>
-          <span
-            className={classNames(
-              "absolute left-2/4 top-[45px] z-10 mt-[-16px] h-[58px] w-[2px] -translate-x-2/4 bg-gray-400 mix-blend-luminosity dark:bg-gray-500"
-            )}
-          />
-          <div className="mb-3 flex w-full items-center justify-center gap-2 pl-5 text-base text-[#0252A5] dark:text-[#A7C3DC]">
-            <div className="flex items-center gap-2 capitalize">
-              <span className="font-bold">{democratPrediction}</span>
-              {t("democrat")}
-            </div>
-            <Button
-              aria-label={t("democratElectoralVote")}
-              variant="tertiary"
-              size="sm"
-              presentationType="icon"
-              href={`/questions/${democratPost.question.id}`}
-            >
-              <FontAwesomeIcon
-                icon={faArrowUpRightFromSquare}
-                className="text-[#0252A5] dark:text-[#A7C3DC]"
-              />
-            </Button>
-          </div>
-        </div>
-        {!!candles && <ExperimentCandleBarGraph candles={candles} />}
-
-        <div className="relative mt-3 flex w-full items-center justify-center gap-2 pl-5 text-base text-[#E0152B] dark:text-[#E7858F]">
+        <span className="absolute right-0 top-[51px] text-blue-700 opacity-65 dark:text-blue-700-dark">
+          {t("538Votes")}
+        </span>
+        <span
+          className={classNames(
+            "absolute left-2/4 top-[45px] z-10 mt-[-16px] h-[58px] w-[2px] -translate-x-2/4 bg-gray-400 mix-blend-luminosity dark:bg-gray-500"
+          )}
+        />
+        <div className="mb-3 flex w-full items-center justify-center gap-2 pl-5 text-base text-[#0252A5] dark:text-[#A7C3DC]">
           <div className="flex items-center gap-2 capitalize">
-            <span className="font-bold">{republicanPrediction}</span>
-            {t("republican")}
+            <span className="font-bold">{democratPrediction}</span>
+            {t("democrat")}
           </div>
           <Button
-            aria-label={t("republicanElectoralVote")}
+            aria-label={t("democratElectoralVote")}
             variant="tertiary"
             size="sm"
             presentationType="icon"
-            href={`/questions/${republicanPost.question.id}`}
+            href={`/questions/${democratPost.question.id}`}
           >
             <FontAwesomeIcon
               icon={faArrowUpRightFromSquare}
-              className="text-[#E0152B] dark:text-[#E7858F]"
+              className="text-[#0252A5] dark:text-[#A7C3DC]"
             />
           </Button>
         </div>
       </div>
-    );
-  });
+      {!!candles && <ExperimentCandleBarGraph candles={candles} />}
+
+      <div className="relative mt-3 flex w-full items-center justify-center gap-2 pl-5 text-base text-[#E0152B] dark:text-[#E7858F]">
+        <div className="flex items-center gap-2 capitalize">
+          <span className="font-bold">{republicanPrediction}</span>
+          {t("republican")}
+        </div>
+        <Button
+          aria-label={t("republicanElectoralVote")}
+          variant="tertiary"
+          size="sm"
+          presentationType="icon"
+          href={`/questions/${republicanPost.question.id}`}
+        >
+          <FontAwesomeIcon
+            icon={faArrowUpRightFromSquare}
+            className="text-[#E0152B] dark:text-[#E7858F]"
+          />
+        </Button>
+      </div>
+    </div>
+  );
 };
 
 type ForecastData = {
@@ -153,4 +151,4 @@ function getForecastData(
   };
 }
 
-export default ExpectedElectoralVotesForecast;
+export default WithServerComponentErrorBoundary(ExpectedElectoralVotesForecast);
diff --git a/front_end/src/app/(main)/experiments/elections/components/state_by_forecast/index.tsx b/front_end/src/app/(main)/experiments/elections/components/state_by_forecast/index.tsx
index 6d97f3ce07..7b3997731d 100644
--- a/front_end/src/app/(main)/experiments/elections/components/state_by_forecast/index.tsx
+++ b/front_end/src/app/(main)/experiments/elections/components/state_by_forecast/index.tsx
@@ -17,7 +17,7 @@ import { extractQuestionGroupName } from "@/utils/questions";
 import MiddleVotesArrow from "./middle_votes_arrow";
 import StateByForecastCharts from "./state_by_forecast_charts";
 import { US_MAP_AREAS } from "./us_areas";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   questionGroupId: number;
@@ -32,107 +32,105 @@ const StateByForecast: FC<Props> = async ({
   republicanPostId,
   isEmbed,
 }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const t = await getTranslations();
-    const post = await PostsApi.getPost(questionGroupId);
-    if (!post?.group_of_questions) {
-      return null;
-    }
+  const t = await getTranslations();
+  const post = await PostsApi.getPost(questionGroupId);
+  if (!post?.group_of_questions) {
+    return null;
+  }
 
-    let democratPrediction = null;
-    let republicanPrediction = null;
-    if (democratPostId && republicanPostId) {
-      const [demPost, repPost] = await Promise.all([
-        PostsApi.getPost(democratPostId),
-        PostsApi.getPost(republicanPostId),
-      ]);
-      const predictions = getDemocratRepublicanPrediction({ demPost, repPost });
-      if (predictions) {
-        democratPrediction = predictions.democratPrediction;
-        republicanPrediction = predictions.republicanPrediction;
-      }
+  let democratPrediction = null;
+  let republicanPrediction = null;
+  if (democratPostId && republicanPostId) {
+    const [demPost, repPost] = await Promise.all([
+      PostsApi.getPost(democratPostId),
+      PostsApi.getPost(republicanPostId),
+    ]);
+    const predictions = getDemocratRepublicanPrediction({ demPost, repPost });
+    if (predictions) {
+      democratPrediction = predictions.democratPrediction;
+      republicanPrediction = predictions.republicanPrediction;
     }
+  }
 
-    const stateByItems = getStateByItems(
-      post.id,
-      post.group_of_questions.questions
-    );
+  const stateByItems = getStateByItems(
+    post.id,
+    post.group_of_questions.questions
+  );
 
-    if (isEmbed) {
-      return (
-        <div className="relative mt-20 inline-flex w-full flex-col">
-          <div className="flex w-full flex-col">
-            <MiddleVotesArrow
-              className={classNames("absolute left-2/4 -translate-x-2/4")}
-            />
-            <div className="flex w-full justify-between">
-              {democratPrediction && (
-                <div className="capitalize">
-                  {t("democrat")}
-                  <br />
-                  {t("numVotes", { num: democratPrediction })}
-                </div>
-              )}
-              {republicanPrediction && (
-                <div className="capitalize">
-                  {t("republican")}
-                  <br />
-                  {t("numVotes", { num: republicanPrediction })}
-                </div>
-              )}
-            </div>
+  if (isEmbed) {
+    return (
+      <div className="relative mt-20 inline-flex w-full flex-col">
+        <div className="flex w-full flex-col">
+          <MiddleVotesArrow
+            className={classNames("absolute left-2/4 -translate-x-2/4")}
+          />
+          <div className="flex w-full justify-between">
+            {democratPrediction && (
+              <div className="capitalize">
+                {t("democrat")}
+                <br />
+                {t("numVotes", { num: democratPrediction })}
+              </div>
+            )}
+            {republicanPrediction && (
+              <div className="capitalize">
+                {t("republican")}
+                <br />
+                {t("numVotes", { num: republicanPrediction })}
+              </div>
+            )}
           </div>
-
-          <StateByForecastCharts items={stateByItems} interactive={false} />
         </div>
-      );
-    }
 
-    return (
-      <div className="mt-4 flex w-full flex-col rounded bg-gray-0 p-4 dark:bg-gray-0-dark">
-        <div className="mb-2 grid w-full grid-cols-[1fr_auto_1fr] gap-2">
-          <Link
-            className="col-start-2 row-span-1 row-start-1 flex items-center gap-2 text-lg text-gray-700 no-underline hover:text-gray-900 dark:text-gray-700-dark hover:dark:text-gray-900-dark md:col-start-1"
-            href={`/questions/${post.id}`}
+        <StateByForecastCharts items={stateByItems} interactive={false} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="mt-4 flex w-full flex-col rounded bg-gray-0 p-4 dark:bg-gray-0-dark">
+      <div className="mb-2 grid w-full grid-cols-[1fr_auto_1fr] gap-2">
+        <Link
+          className="col-start-2 row-span-1 row-start-1 flex items-center gap-2 text-lg text-gray-700 no-underline hover:text-gray-900 dark:text-gray-700-dark hover:dark:text-gray-900-dark md:col-start-1"
+          href={`/questions/${post.id}`}
+        >
+          {t("stateByStateForecasts")}
+          <Button
+            aria-label={t("republicanElectoralVote")}
+            variant="tertiary"
+            presentationType="icon"
+            size="sm"
           >
-            {t("stateByStateForecasts")}
-            <Button
-              aria-label={t("republicanElectoralVote")}
-              variant="tertiary"
-              presentationType="icon"
-              size="sm"
-            >
-              <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-            </Button>
-          </Link>
+            <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+          </Button>
+        </Link>
 
-          <ElectionsEmbedModal />
-        </div>
+        <ElectionsEmbedModal />
+      </div>
 
-        <div className="relative mt-10 w-full md:mt-0">
-          <MiddleVotesArrow className="absolute left-2/4 -translate-x-2/4 -translate-y-full" />
-        </div>
+      <div className="relative mt-10 w-full md:mt-0">
+        <MiddleVotesArrow className="absolute left-2/4 -translate-x-2/4 -translate-y-full" />
+      </div>
 
-        <StateByForecastCharts items={stateByItems} />
-
-        <hr className="border-blue-400 dark:border-blue-400-dark" />
-
-        <div className="font-sans text-sm font-light leading-5 text-gray-600 dark:text-gray-600-dark">
-          {t.rich("electionHubDisclaimer", {
-            bold: (chunks) => <span className="font-semibold">{chunks}</span>,
-            link: (chunks) => (
-              <Link
-                href={`/questions/${post.id}`}
-                className="font-semibold hover:text-blue-800 dark:hover:text-blue-800-dark"
-              >
-                {chunks}
-              </Link>
-            ),
-          })}
-        </div>
+      <StateByForecastCharts items={stateByItems} />
+
+      <hr className="border-blue-400 dark:border-blue-400-dark" />
+
+      <div className="font-sans text-sm font-light leading-5 text-gray-600 dark:text-gray-600-dark">
+        {t.rich("electionHubDisclaimer", {
+          bold: (chunks) => <span className="font-semibold">{chunks}</span>,
+          link: (chunks) => (
+            <Link
+              href={`/questions/${post.id}`}
+              className="font-semibold hover:text-blue-800 dark:hover:text-blue-800-dark"
+            >
+              {chunks}
+            </Link>
+          ),
+        })}
       </div>
-    );
-  });
+    </div>
+  );
 };
 
 const getStateByItems = (
@@ -229,4 +227,4 @@ function getDemocratRepublicanPrediction({
   };
 }
 
-export default StateByForecast;
+export default WithServerComponentErrorBoundary(StateByForecast);
diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx
index 330722e952..62c58089ed 100644
--- a/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/news_match/index.tsx
@@ -3,26 +3,20 @@ import { FC } from "react";
 import PostsApi from "@/services/posts";
 
 import NewsMatchDrawer from "./news_match_drawer";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 interface Props {
   questionId: number;
 }
 
-const fetchArticles = async (postId: number) => {
-  return await PostsApi.getRelatedNews(postId);
-};
-
 const NewsMatch: FC<Props> = async ({ questionId }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const articles = await fetchArticles(questionId);
+  const articles = await PostsApi.getRelatedNews(questionId);
 
-    if (articles.length > 0) {
-      return <NewsMatchDrawer articles={articles} questionId={questionId} />;
-    } else {
-      return null;
-    }
-  });
+  if (articles.length > 0) {
+    return <NewsMatchDrawer articles={articles} questionId={questionId} />;
+  } else {
+    return null;
+  }
 };
 
-export default NewsMatch;
+export default WithServerComponentErrorBoundary(NewsMatch);
diff --git a/front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsx b/front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsx
index dbe22f73ca..06524b2081 100644
--- a/front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsx
+++ b/front_end/src/app/(main)/questions/[id]/components/sidebar/similar_questions/index.tsx
@@ -5,25 +5,23 @@ import { PostStatus } from "@/types/post";
 import { QuestionOrder } from "@/types/question";
 
 import SimilarQuestionsDrawer from "./similar_questions_drawer";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 type Props = {
   post_id: number;
 };
 
 const SimilarQuestions: FC<Props> = async ({ post_id }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const response = await PostsApi.getPostsWithCP({
-      similar_to_post_id: post_id,
-      order_by: QuestionOrder.PredictionCountDesc,
-      statuses: PostStatus.OPEN,
-    });
-    const { results: questions } = response;
+  const response = await PostsApi.getPostsWithCP({
+    similar_to_post_id: post_id,
+    order_by: QuestionOrder.PredictionCountDesc,
+    statuses: PostStatus.OPEN,
+  });
+  const { results: questions } = response;
 
-    if (!questions.length) return null;
+  if (!questions.length) return null;
 
-    return <SimilarQuestionsDrawer questions={questions} />;
-  });
+  return <SimilarQuestionsDrawer questions={questions} />;
 };
 
-export default SimilarQuestions;
+export default WithServerComponentErrorBoundary(SimilarQuestions) as FC<Props>;
diff --git a/front_end/src/app/(main)/questions/discovery/components/tags_discovery.tsx b/front_end/src/app/(main)/questions/discovery/components/tags_discovery.tsx
index 50164dda83..2dcdadfa9c 100644
--- a/front_end/src/app/(main)/questions/discovery/components/tags_discovery.tsx
+++ b/front_end/src/app/(main)/questions/discovery/components/tags_discovery.tsx
@@ -9,7 +9,7 @@ import { SearchParams } from "@/types/navigation";
 import DiscoverySection from "./section";
 import AwaitedTags from "./tags";
 import { TAGS_TEXT_SEARCH_FILTER } from "../constants/tags_feed";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 
 const getFilters = (searchParams: SearchParams) => {
   const filters: TagsParams = {};
@@ -24,23 +24,21 @@ const getFilters = (searchParams: SearchParams) => {
 const TagsDiscovery: FC<{ searchParams: SearchParams }> = async ({
   searchParams,
 }) => {
-  return ServerComponentErrorBoundary(async () => {
-    const filters = getFilters(searchParams);
-    let tags = await ProjectsApi.getTags(filters);
-    const t = await getTranslations();
-
-    return (
-      <DiscoverySection title={t("tags")}>
-        <TagFilters />
-        <Suspense
-          key={JSON.stringify(searchParams)}
-          fallback={<LoadingIndicator className="mx-auto my-8 w-24" />}
-        >
-          <AwaitedTags tags={tags} />
-        </Suspense>
-      </DiscoverySection>
-    );
-  });
+  const filters = getFilters(searchParams);
+  let tags = await ProjectsApi.getTags(filters);
+  const t = await getTranslations();
+
+  return (
+    <DiscoverySection title={t("tags")}>
+      <TagFilters />
+      <Suspense
+        key={JSON.stringify(searchParams)}
+        fallback={<LoadingIndicator className="mx-auto my-8 w-24" />}
+      >
+        <AwaitedTags tags={tags} />
+      </Suspense>
+    </DiscoverySection>
+  );
 };
 
-export default TagsDiscovery;
+export default WithServerComponentErrorBoundary(TagsDiscovery);
diff --git a/front_end/src/components/posts_feed/index.tsx b/front_end/src/components/posts_feed/index.tsx
index 52d2be5508..7b3f109bfa 100644
--- a/front_end/src/components/posts_feed/index.tsx
+++ b/front_end/src/components/posts_feed/index.tsx
@@ -5,7 +5,7 @@ import PaginatedPostsFeed, {
 } from "@/components/posts_feed/paginated_feed";
 import { POSTS_PER_PAGE } from "@/constants/posts_feed";
 import PostsApi, { PostsParams } from "@/services/posts";
-import ServerComponentErrorBoundary from "@/components/server_component_error_boundary";
+import WithServerComponentErrorBoundary from "@/components/server_component_error_boundary";
 import { Topic } from "@/types/projects";
 
 type Props = {
@@ -15,7 +15,6 @@ type Props = {
 };
 
 const AwaitedPostsFeed: FC<Props> = async ({ filters, type, topics }) => {
-  return ServerComponentErrorBoundary(async () => {
     if (
       topics &&
       filters.topic &&
@@ -28,20 +27,19 @@ const AwaitedPostsFeed: FC<Props> = async ({ filters, type, topics }) => {
       );
     }
 
-    const { results: questions, count } = await PostsApi.getPostsWithCP({
-      ...filters,
-      limit: POSTS_PER_PAGE,
-    });
-
-    return (
-      <PaginatedPostsFeed
-        filters={filters}
-        initialQuestions={questions}
-        totalCount={count}
-        type={type}
-      />
-    );
+  const { results: questions, count } = await PostsApi.getPostsWithCP({
+    ...filters,
+    limit: POSTS_PER_PAGE,
   });
+
+  return (
+    <PaginatedPostsFeed
+      filters={filters}
+      initialQuestions={questions}
+      totalCount={count}
+      type={type}
+    />
+  );
 };
 
-export default AwaitedPostsFeed;
+export default WithServerComponentErrorBoundary(AwaitedPostsFeed);
diff --git a/front_end/src/components/server_component_error_boundary.tsx b/front_end/src/components/server_component_error_boundary.tsx
index e09b1442ea..ffca597bf0 100644
--- a/front_end/src/components/server_component_error_boundary.tsx
+++ b/front_end/src/components/server_component_error_boundary.tsx
@@ -1,29 +1,32 @@
-import React from "react";
+import { FC } from "react";
 import RefreshButton from "./refresh_button";
 
-const ServerComponentErrorBoundary = async (
-  fn: () => Promise<JSX.Element | null>
-) => {
-  try {
-    return await fn();
-  } catch (error) {
-    if (error instanceof Error) {
-      const { digest } = error as Error & { digest?: string };
+const WithServerComponentErrorBoundary = <P extends {}>(
+  Component: FC<P>
+): FC<P> => {
+  const WrappedComponent = async (props: P) => {
+    try {
+      return await Component(props);
+    } catch (error) {
+      if (error instanceof Error) {
+        const { digest } = error as Error & { digest?: string };
+        return (
+          <div className="flex h-[50vh] w-full flex-col items-center justify-center">
+            <h2>{digest ?? "Unknown error"}</h2>
+            <RefreshButton />
+          </div>
+        );
+      }
+
       return (
         <div className="flex h-[50vh] w-full flex-col items-center justify-center">
-          <h2>{digest ?? "Unknown error"}</h2>
+          <h2>Unknown error</h2>
           <RefreshButton />
         </div>
       );
     }
-
-    return (
-      <div className="flex h-[50vh] w-full flex-col items-center justify-center">
-        <h2>Unknown error</h2>
-        <RefreshButton />
-      </div>
-    );
-  }
+  };
+  return WrappedComponent as FC<P>;
 };
 
-export default ServerComponentErrorBoundary;
+export default WithServerComponentErrorBoundary;