refactor errors & redesign search results header

package.json

@@ -28,6 +28,7 @@
     "deepmerge": "^4.3.1",
     "dexie": "^3.2.4",
     "echarts": "^5.4.2",
+    "http-status-codes": "^2.3.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",

src/components/ErrorMessage.tsx

@@ -1,7 +1,8 @@
 /** @jsxImportSource @emotion/react */
-import { ReactNode } from "react";
+import { ReactNode, useEffect, useMemo } from "react";
 import { Alert, AlertProps, AlertTitle } from "@mui/material";
 import { css } from "@emotion/react";
+import { useRollbar } from "@rollbar/react";
 
 const alertStyle = css`
 	padding: 16px 22px;
@@ -25,12 +26,34 @@ const detailsStyle = css`
 
 export type ErrorMessageProps = AlertProps & {
 	message: ReactNode;
-	details?: ReactNode;
+	details?: unknown|unknown[];
+	report?: boolean;
 	showReported?: boolean;
 }
 
 export const ErrorMessage = (props: ErrorMessageProps) => {
-	const {message, details, showReported, ...alertProps} = props;
+	const {message, details, report, showReported = report, ...alertProps} = props;
+
+	const rollbar = useRollbar();
+
+	const errors = useMemo<unknown[]>(
+		() => Array.isArray(details) ? details : details ? [details] : [],
+		[details]
+	);
+
+	const detailsContent = useMemo(() => {
+		return errors
+			.map(it => it instanceof Error ? it.message : "Unknown error")
+			.join("\n\n");
+	}, [errors]);
+
+	console.log("details", detailsContent);
+
+	useEffect(() => {
+		if (report) {
+			errors.forEach(it => rollbar.error(it as any));
+		}
+	}, [errors, report, rollbar]);
 
 	return (
 		<Alert severity="error" css={alertStyle} data-test="error" {...alertProps}>
@@ -40,10 +63,10 @@ export const ErrorMessage = (props: ErrorMessageProps) => {
 					This error is logged. No need to report it.
 				</div>
 			}
-			{details &&
+			{detailsContent &&
 				<details css={detailsStyle}>
 					<summary>Details</summary>
-					<pre>{details}</pre>
+					<pre>{detailsContent}</pre>
 				</details>
 			}
 		</Alert>

src/components/InfoTable.tsx

@@ -136,7 +136,7 @@ export type InfoTableProps<T extends object, A extends any[] = []> = TableContai
 	additionalData?: A;
 	loading?: boolean;
 	notFound?: boolean;
-	notFoundMessage?: string;
+	notFoundMessage?: ReactNode;
 	error?: any;
 	errorMessage?: string;
 	children: ReactElement<InfoTableAttributeProps<T, A>>|(ReactElement<InfoTableAttributeProps<T, A>>|false|undefined|null)[];
@@ -167,8 +167,8 @@ export const InfoTable = <T extends object, A extends any[] = []>(props: InfoTab
 		return (
 			<ErrorMessage
 				message={errorMessage}
-				details={error.message}
-				showReported
+				details={error}
+				report
 			/>
 		);
 	}

src/components/ItemsTable.tsx

@@ -131,8 +131,8 @@ export const ItemsTable = <T extends ItemsTableItem, S = any, A extends any[] =
 		return (
 			<ErrorMessage
 				message={errorMessage}
-				details={error.message}
-				showReported
+				details={error}
+				report
 			/>
 		);
 	}

src/components/account/AccountBalancesTable.tsx

@@ -181,9 +181,10 @@ export const AccountBalancesTable = (props: AccountBalancesTableProps) => {
 							}
 							{balance.error &&
 								<ErrorMessage
-									message="Unexpected error occured while fetching data"
-									details={balance.error.message}
 									data-test={`${balance.network.name}-balance-error`}
+									message="Unexpected error occured while fetching data"
+									details={balance.error}
+									report
 								/>
 							}
 						</>

src/components/account/AccountPortfolio.tsx

@@ -123,8 +123,8 @@ export const AccountPortfolio = (props: AccountPortfolioProps) => {
 		return (
 			<ErrorMessage
 				message="Unexpected error occured while fetching data"
-				details={balances.error.message}
-				showReported
+				details={balances.error}
+				report
 			/>
 		);
 	}

src/components/network/NetworkStats.tsx

@@ -99,8 +99,8 @@ export const NetworkStats = (props: NetworkInfoTableProps) => {
 		return (
 			<ErrorMessage
 				message="Unexpected error occured while fetching data"
-				details={stats.error.message}
-				showReported
+				details={stats.error}
+				report
 			/>
 		);
 	}

src/components/network/NetworkTokenDistribution.tsx

@@ -63,8 +63,8 @@ export const NetworkTokenDistribution = (props: NetworkTokenDistributionProps) =
 		return (
 			<ErrorMessage
 				message="Unexpected error occured while fetching data"
-				details={stats.error.message}
-				showReported
+				details={stats.error}
+				report
 			/>
 		);
 	}

src/hooks/useResource.ts

@@ -1,9 +1,8 @@
 import { useEffect, useMemo } from "react";
 import useSwr, { SWRConfiguration } from "swr";
-import { useRollbar } from "@rollbar/react";
 
 import { Resource } from "../model/resource";
-import { DataError } from "../utils/error";
+import { NonFatalError } from "../utils/error";
 
 export interface UseResourceOptions extends SWRConfiguration {
 	/**
@@ -25,8 +24,6 @@ export function useResource<T = any, F extends any[] = any[]>(
 	args: F,
 	options: UseResourceOptions = {}
 ) {
-	const rollbar = useRollbar();
-
 	const {skip, refresh, refreshInterval = 3000, ...swrOptions} = options;
 
 	const swrKey = !skip
@@ -39,13 +36,7 @@ export function useResource<T = any, F extends any[] = any[]>(
 	});
 
 	useEffect(() => {
-		if (!error) {
-			return;
-		}
-
-		if (error && error instanceof DataError) {
-			rollbar.error(error);
-		} else {
+		if (error && !(error instanceof NonFatalError)) {
 			throw error;
 		}
 	}, [error]);

src/model/searchResult.ts

@@ -1,3 +1,5 @@
+import { NetworkError } from "../utils/error";
+
 import { ItemsResponse } from "./itemsResponse";
 import { SearchResultItem } from "./searchResultItem";
 
@@ -11,5 +13,6 @@ export type SearchResult = {
 	blocks: ItemsResponse<SearchResultItem<Block>, true>
 	extrinsics: ItemsResponse<SearchResultItem<Extrinsic>, true>
 	events: ItemsResponse<SearchResultItem<Event>, true>
+	errors?: NetworkError[];
 	totalCount: number;
 }

src/rollbar.ts

@@ -22,4 +22,26 @@ export const rollbarConfig: Configuration = {
 	enabled: config.rollbar.enabled
 };
 
-export const rollbar = new Rollbar(rollbarConfig);
+const rollbar = new Rollbar(rollbarConfig);
+
+if (!config.rollbar.enabled && window.location.hostname === "localhost") {
+	// if the rollbar is disabled on localhost, print
+	// the message about reporting to the console
+	// so it is obvious when it would happen
+
+	const notifier = (rollbar as any).client.notifier;
+	const log = notifier.log;
+
+	notifier.log = function (item: any, callback: any) {
+		console.warn(`The following ${item.level} item would be reported to Rollbar`);
+
+		if (!item._isUncaught) {
+			const consoleAction = ["error", "critical"].includes(item.level) ? "error" : "warn";
+			console[consoleAction](...item._originalArgs);
+		}
+
+		log.apply(this, [item, callback]);
+	};
+}
+
+export { rollbar };

src/router.tsx

@@ -29,6 +29,7 @@ export const routes: RouteObject[] = [
 			{
 				path: "search/:tab?",
 				element: <SearchPage />,
+				errorElement: <ErrorPage />,
 			},
 			{
 				id: "network",

src/screens/error.tsx

@@ -20,7 +20,8 @@ export const ErrorPage = () => {
 				<CardHeader>Error</CardHeader>
 				<ErrorMessage
 					message="Unexpected error occured while loading page"
-					details={("message" in (error as any)) ? (error as any).message : undefined}
+					details={error}
+					showReported
 				/>
 			</Card>
 		</>