refactor(error-handling): replace inline error boundaries with RenderErrorFallback

Author: ushkinaz

src/App.svelte

@@ -19,21 +19,21 @@ import { GAME_REPO_URL, UI_GUIDE_NAME } from "./constants";
 import { t } from "@transifex/native";
 import { buildMetaDescription } from "./seo";
 import {
-  NIGHTLY_VERSION,
-  STABLE_VERSION,
   type BuildInfo,
-  type InitialAppState,
   buildUrl,
   changeVersion,
   getCurrentVersionSlug,
-  getVersionedBasePath,
   getUrlConfig,
+  getVersionedBasePath,
   handleInternalNavigation,
+  type InitialAppState,
   initializeRouting,
   isSupportedType,
   isSupportedVersion,
   navigateTo,
+  NIGHTLY_VERSION,
   page,
+  STABLE_VERSION,
   updateQueryParam,
   updateQueryParamNoReload,
   updateSearchRoute,
@@ -48,9 +48,10 @@ import CategoryGrid from "./CategoryGrid.svelte";
 import Loading from "./Loading.svelte";
 import Spinner from "./Spinner.svelte";
 import { fade } from "svelte/transition";
-import { isTesting, isNext, RUNNING_MODE } from "./utils/env";
+import { isNext, isTesting, RUNNING_MODE } from "./utils/env";
 import MigoWarning from "./MigoWarning.svelte";
 import Notification, { notify } from "./Notification.svelte";
+import RenderErrorFallback from "./RenderErrorFallback.svelte";
 
 import { gameSingularName } from "./i18n/gettext";
 
@@ -492,6 +493,30 @@ function maybeFocusSearch(e: KeyboardEvent) {
   }
 }
 
+function onItemBoundaryError(boundaryError: unknown): void {
+  const error =
+    boundaryError instanceof Error
+      ? boundaryError
+      : new Error(String(boundaryError));
+  const routeItem = $page.route.item;
+  metrics.count("app.error.catch", 1, {
+    type: routeItem?.type ?? "shell",
+    id: routeItem?.id ?? "none",
+  });
+  const context = {
+    route: {
+      version: $page.route.version,
+      type: routeItem?.type,
+      id: routeItem?.id,
+      search: $page.route.search,
+    },
+  };
+  console.error(error, context);
+  Sentry.captureException(error, {
+    contexts: { context },
+  });
+}
+
 /**
  * Returns the native name (endonym) of a language (e.g., "Deutsch" for "de").
  * Uses Intl.DisplayNames to auto-generate names without hardcoded lists.
@@ -603,7 +628,9 @@ let canonicalUrl = $derived(
                 type="button"
                 class="search-control-btn search-clear-button"
                 tabindex="-1"
-                aria-label={t("Clear search", { _context: SEARCH_UI_CONTEXT })}
+                aria-label={t("Clear search", {
+                  _context: SEARCH_UI_CONTEXT,
+                })}
                 onclick={() => {
                   search = "";
                   handleSearchInput();
@@ -678,11 +705,16 @@ let canonicalUrl = $derived(
   {#if item}
     {#if $data}
       {#key item}
-        {#if item.id}
-          <Thing {item} data={$data} />
-        {:else}
-          <Catalog type={item.type} data={$data} />
-        {/if}
+        <svelte:boundary onerror={onItemBoundaryError}>
+          {#if item.id}
+            <Thing {item} data={$data} />
+          {:else}
+            <Catalog type={item.type} data={$data} />
+          {/if}
+          {#snippet failed(e)}
+            <RenderErrorFallback data={$data} error={e} {item} />
+          {/snippet}
+        </svelte:boundary>
       {/key}
     {:else}
       <Loading
@@ -766,7 +798,9 @@ let canonicalUrl = $derived(
         <div class="specs-footer">
           <div class="footer-item">
             <span class="spec-label"
-              >{t("Maintainer", { _context: INTRO_DASHBOARD_CONTEXT })}:</span>
+              >{t("Maintainer", {
+                _context: INTRO_DASHBOARD_CONTEXT,
+              })}:</span>
             <a href="https://github.com/ushkinaz" target="_blank">ushkinaz</a>
           </div>
           <div class="footer-item">
@@ -777,7 +811,9 @@ let canonicalUrl = $derived(
           </div>
           <div class="footer-item">
             <span class="spec-label"
-              >{t("Feedback", { _context: INTRO_DASHBOARD_CONTEXT })}:</span>
+              >{t("Feedback", {
+                _context: INTRO_DASHBOARD_CONTEXT,
+              })}:</span>
             <a href="https://discord.gg/XW7XhXuZ89" target="_blank">Discord</a>
           </div>
         </div>

src/RenderErrorFallback.svelte

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { t } from "@transifex/native";
+import { untrack } from "svelte";
+
+import type { CBNData } from "./data";
+import JsonView from "./JsonView.svelte";
+import { isSupportedType } from "./routing";
+import type { SupportedTypes } from "./types";
+import { isDev } from "./utils/env";
+
+const ERROR_CONTEXT = "Render Error";
+
+interface Props {
+  data?: CBNData | null;
+  error: unknown;
+  item?: { id: string; type: string } | null;
+}
+
+let {
+  data: sourceData,
+  error: sourceError,
+  item: sourceItem,
+}: Props = $props();
+
+const data = untrack(() => sourceData);
+const error = untrack(() => sourceError);
+const item = untrack(() => sourceItem);
+
+function defaultFallbackJsonObject(
+  type: string,
+  id: string,
+): { __filename: string; id: string; type: string } | undefined {
+  if (type === "json_flag") {
+    return { id, type, __filename: "" };
+  }
+  return undefined;
+}
+
+const jsonObject = untrack(() => {
+  if (!item?.id || !data || !isSupportedType(item.type)) {
+    return undefined;
+  }
+
+  return (
+    data.byIdMaybe(item.type as keyof SupportedTypes, item.id) ??
+    defaultFallbackJsonObject(item.type, item.id)
+  );
+});
+</script>
+
+<section>
+  <div class="render-error" role="alert">
+    <div class="error-card">
+      <h1>{t("Error", { _context: ERROR_CONTEXT })}</h1>
+      <p>
+        {t(
+          "There was a problem displaying this page. Not all versions of Cataclysm are supported by the Guide currently. Try selecting a different build.",
+          { _context: ERROR_CONTEXT },
+        )}
+      </p>
+      {#if isDev}
+        <section>
+          <h2>{t("Debug", { _context: ERROR_CONTEXT })}</h2>
+          {#if error instanceof Error}
+            <pre class="trace">{error.stack}</pre>
+          {:else}
+            <div>{String(error)}</div>
+          {/if}
+        </section>
+      {/if}
+    </div>
+
+    {#if jsonObject}
+      <JsonView obj={jsonObject} buildNumber={data?.build_number} />
+    {/if}
+  </div>
+</section>
+
+<style>
+.render-error {
+  text-align: left;
+}
+
+.error-card {
+  border: 1px solid var(--cata-color-red);
+  padding: 1rem;
+  margin: 1rem 0;
+}
+
+.trace {
+  font-family: monospace;
+  overflow-x: auto;
+}
+</style>

src/Thing.svelte

@@ -26,15 +26,13 @@ import ConstructionGroup from "./types/ConstructionGroup.svelte";
 import Achievement from "./types/Achievement.svelte";
 import ObsoletionWarning from "./ObsoletionWarning.svelte";
 import Bionic from "./types/Bionic.svelte";
-import * as Sentry from "@sentry/browser";
 import type { SupportedTypes } from "./types";
 import JsonView from "./JsonView.svelte";
 import OvermapSpecial from "./types/OvermapSpecial.svelte";
 import ItemAction from "./types/ItemAction.svelte";
 import Technique from "./types/Technique.svelte";
 import { metrics } from "./metrics";
 import { nowTimeStamp } from "./utils/perf";
-import { isDev } from "./utils/env";
 
 interface Props {
   item: { id: string; type: string };
@@ -46,19 +44,6 @@ const item = untrack(() => sourceItem);
 const data = untrack(() => sourceData);
 setContext("data", data);
 
-function onError(e: Error) {
-  metrics.count("app.error.catch", 1, { type: item?.type, id: item?.id });
-  console.error(e);
-  Sentry.captureException(e, {
-    contexts: {
-      item: {
-        type: item?.type,
-        id: item?.id,
-      },
-    },
-  });
-}
-
 function defaultItem(id: string, type: string) {
   if (type === "json_flag") {
     return { id, type, __filename: "" };
@@ -137,53 +122,11 @@ const display = (obj && displays[obj.type]) ?? Unknown;
     _comment: "Error message when an object is not found in the data",
   })}
 {:else}
-  <svelte:boundary
-    onerror={(boundaryError) => {
-      onError(
-        boundaryError instanceof Error
-          ? boundaryError
-          : new Error(String(boundaryError)),
-      );
-    }}>
-    {#if /obsolet/.test(obj.__filename)}
-      <ObsoletionWarning item={obj} />
-    {/if}
-    {@const SvelteComponent = display}
-    <SvelteComponent item={obj} />
-
-    {#snippet failed(e)}
-      <section>
-        <div class="error">
-          <h1>{t("Error")}</h1>
-          <p>
-            {t(
-              "There was a problem displaying this page. Not all versions of Cataclysm are supported by the Guide currently. Try selecting a different build.",
-            )}
-          </p>
-          {#if isDev}
-            <section>
-              <h2>{t("Debug")}</h2>
-              <div>{e instanceof Error ? e.message : String(e)}</div>
-              <pre class="trace">{e instanceof Error ? e.stack : ""}</pre>
-            </section>
-          {/if}
-        </div>
-      </section>
-    {/snippet}
-  </svelte:boundary>
+  {#if /obsolet/.test(obj.__filename)}
+    <ObsoletionWarning item={obj} />
+  {/if}
+  {@const SvelteComponent = display}
+  <SvelteComponent item={obj} />
 {/if}
 
 <JsonView {obj} buildNumber={data.build_number} />
-
-<style>
-.error {
-  border: 1px solid red;
-  padding: 1rem;
-  margin: 1rem 0;
-}
-
-.trace {
-  font-family: monospace;
-  overflow-x: auto;
-}
-</style>