Handle page crash when rendering NFTs with unexpected title, description values (#5095)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR introduces error handling components to display messages for unexpected values in the NFT-related pages, enhancing user experience by providing feedback when data does not meet expectations.

### Detailed summary
- Added `react-error-boundary` to handle errors.
- Created `UnexpectedValueErrorMessage` component for displaying error messages.
- Integrated error handling in `TokenIdPage`, `NFTName`, and `NFTDescription` components.
- Updated `NFTGetAllTable` to use `UnexpectedValueErrorMessage` for invalid data.
- Wrapped NFT cell rendering in `ErrorBoundary` to catch errors.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/package.json

@@ -85,6 +85,7 @@
     "react-day-picker": "^8.10.1",
     "react-dom": "18.3.1",
     "react-dropzone": "^14.2.9",
+    "react-error-boundary": "^4.1.2",
     "react-hook-form": "7.52.0",
     "react-intersection-observer": "^9.10.3",
     "react-markdown": "^9.0.1",

apps/dashboard/src/@/components/blocks/error-fallbacks/unexpect-value-error-message.tsx

@@ -0,0 +1,44 @@
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { useMemo } from "react";
+
+export function UnexpectedValueErrorMessage(props: {
+  value: unknown;
+  title: string;
+  description: string;
+  className?: string;
+}) {
+  const stringifiedValue = useMemo(() => {
+    try {
+      return JSON.stringify(props.value, null, 2);
+    } catch {
+      return undefined;
+    }
+  }, [props.value]);
+
+  return (
+    <div className={props.className}>
+      <p className="text-base text-destructive-text"> {props.title} </p>
+      <p className="text-foreground text-sm">{props.description}</p>
+      {stringifiedValue && (
+        <div className="mt-3">
+          <p className="mb-0.5 text-muted-foreground text-sm">Value Received</p>
+          <ScrollShadow className="rounded-lg bg-muted/50">
+            <code className="block whitespace-pre p-4 font-mono text-xs">
+              {stringifiedValue}
+            </code>
+          </ScrollShadow>
+
+          <CopyTextButton
+            copyIconPosition="left"
+            textToShow="Copy value"
+            textToCopy={stringifiedValue}
+            tooltip="Copy value"
+            className="-translate-x-2 mt-1 text-muted-foreground"
+            variant="ghost"
+          />
+        </div>
+      )}
+    </div>
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/[tokenId]/token-id.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { UnexpectedValueErrorMessage } from "@/components/blocks/error-fallbacks/unexpect-value-error-message";
 import { WalletAddress } from "@/components/blocks/wallet-address";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
@@ -53,6 +54,8 @@ interface TokenIdPageProps {
   isErc721: boolean;
 }
 
+// TODO: verify the entire nft object with zod schema and display an error message
+
 export const TokenIdPage: React.FC<TokenIdPageProps> = ({
   contract,
   tokenId,
@@ -132,15 +135,15 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
           height={isMobile ? "100%" : "300px"}
         />
       </Card>
+
       <Flex flexDir="column" gap={6} w="full" px={2}>
-        <Flex flexDir="column" gap={2}>
-          <Heading size="title.lg">{nft.metadata.name}</Heading>
+        <Flex flexDir="column" gap={1.5}>
+          <NFTName value={nft.metadata.name} />
           {nft.metadata?.description && (
-            <Text size="label.md" noOfLines={50} whiteSpace="pre-wrap">
-              {nft.metadata.description}
-            </Text>
+            <NFTDescription value={nft.metadata.description} />
           )}
         </Flex>
+
         <Flex flexDir="column" gap={{ base: 0, md: 4 }}>
           <Box
             w="full"
@@ -338,3 +341,39 @@ export const TokenIdPage: React.FC<TokenIdPageProps> = ({
     </Flex>
   );
 };
+
+function NFTName(props: {
+  value: unknown;
+}) {
+  if (typeof props.value === "string") {
+    return (
+      <h2 className="font-semibold text-lg tracking-tight"> {props.value}</h2>
+    );
+  }
+
+  return (
+    <UnexpectedValueErrorMessage
+      title="Invalid Name"
+      description="Name is not a string"
+      value={props.value}
+      className="mb-3 rounded-lg border border-border p-4"
+    />
+  );
+}
+
+function NFTDescription(props: {
+  value: unknown;
+}) {
+  if (typeof props.value === "string") {
+    return <p className="text-muted-foreground"> {props.value}</p>;
+  }
+
+  return (
+    <UnexpectedValueErrorMessage
+      title="Invalid Description"
+      description="Description is not a string"
+      value={props.value}
+      className="mb-3 rounded-lg border border-border p-4"
+    />
+  );
+}

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx

@@ -1,7 +1,10 @@
 "use client";
 
+import { UnexpectedValueErrorMessage } from "@/components/blocks/error-fallbacks/unexpect-value-error-message";
 import { WalletAddress } from "@/components/blocks/wallet-address";
+import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
 import {
   Flex,
   IconButton,
@@ -16,6 +19,7 @@ import {
   Thead,
   Tr,
 } from "@chakra-ui/react";
+import * as Sentry from "@sentry/nextjs";
 import { MediaCell } from "components/contract-pages/table/table-columns/cells/media-cell";
 import { useChainSlug } from "hooks/chains/chainSlug";
 import {
@@ -26,6 +30,7 @@ import {
   ChevronRightIcon,
 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
+import { ErrorBoundary, type FallbackProps } from "react-error-boundary";
 import {
   type CellProps,
   type Column,
@@ -72,24 +77,51 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
       {
         Header: "Name",
         accessor: (row) => row.metadata.name,
-        Cell: (cell: CellProps<NFT, string>) => (
-          <Text noOfLines={1} size="label.md">
-            {cell.value}
-          </Text>
-        ),
+        Cell: (cell: CellProps<NFT, string>) => {
+          if (typeof cell.value !== "string") {
+            return (
+              <UnexpectedValueErrorMessage
+                title="Invalid Name"
+                description="Name is not a string"
+                value={cell.value}
+                className="w-[300px] py-3"
+              />
+            );
+          }
+
+          return (
+            <p className="line-clamp-1 text-muted-foreground text-sm">
+              {cell.value}
+            </p>
+          );
+        },
       },
       {
         Header: "Description",
         accessor: (row) => row.metadata.description,
-        Cell: (cell: CellProps<NFT, string>) => (
-          <Text
-            noOfLines={4}
-            size="body.md"
-            fontStyle={!cell.value ? "italic" : "normal"}
-          >
-            {cell.value || "No description"}
-          </Text>
-        ),
+        Cell: (cell: CellProps<NFT, string>) => {
+          if (typeof cell.value !== "string") {
+            return (
+              <UnexpectedValueErrorMessage
+                title="Invalid description"
+                description="Description is not a string"
+                value={cell.value}
+                className="w-[300px] py-3"
+              />
+            );
+          }
+
+          return (
+            <p
+              className={cn(
+                "line-clamp-4 max-w-[200px] whitespace-normal text-muted-foreground text-sm",
+                { italic: !cell.value },
+              )}
+            >
+              {cell.value || "No description"}
+            </p>
+          );
+        },
       },
     ];
     if (isErc721) {
@@ -280,18 +312,22 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
                   // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
                   key={rowIndex}
                 >
-                  {row.cells.map((cell, cellIndex) => (
-                    <Td
-                      {...cell.getCellProps()}
-                      borderBottomWidth="inherit"
-                      borderColor="borderColor"
-                      maxW="sm"
-                      // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
-                      key={cellIndex}
-                    >
-                      {cell.render("Cell")}
-                    </Td>
-                  ))}
+                  {row.cells.map((cell, cellIndex) => {
+                    return (
+                      <Td
+                        {...cell.getCellProps()}
+                        borderBottomWidth="inherit"
+                        borderColor="borderColor"
+                        maxW="sm"
+                        // biome-ignore lint/suspicious/noArrayIndexKey: FIXME
+                        key={cellIndex}
+                      >
+                        <ErrorBoundary FallbackComponent={NFTCellErrorBoundary}>
+                          {cell.render("Cell")}
+                        </ErrorBoundary>
+                      </Td>
+                    );
+                  })}
                   <Td borderBottomWidth="inherit" borderColor="borderColor">
                     {!failedToLoad && <ArrowRightIcon className="size-4" />}
                   </Td>
@@ -374,3 +410,25 @@ export const NFTGetAllTable: React.FC<ContractOverviewNFTGetAllProps> = ({
     </Flex>
   );
 };
+
+function NFTCellErrorBoundary(errorProps: FallbackProps) {
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    Sentry.withScope((scope) => {
+      scope.setTag("component-crashed", "true");
+      scope.setTag("component-crashed-boundary", "NFTCellErrorBoundary");
+      scope.setLevel("fatal");
+      Sentry.captureException(errorProps.error);
+    });
+  }, [errorProps.error]);
+
+  return (
+    <CopyTextButton
+      textToShow={errorProps.error.message}
+      textToCopy={errorProps.error.message}
+      copyIconPosition="left"
+      tooltip={errorProps.error.message}
+      className="max-w-[250px] truncate text-destructive-text"
+    />
+  );
+}