Add error handling to Table component (#6126)

Author: yomete

ui/packages/shared/profile/src/ProfileFlameGraph/FlameGraphArrow/useVisibleNodes.ts

@@ -129,7 +129,7 @@ export const useVisibleNodes = ({
       renderedRangeRef.current = {
         minDepth: Infinity,
         maxDepth: -Infinity,
-        table: table,
+        table,
       };
     }
 

ui/packages/shared/profile/src/ProfileView/components/DashboardItems/index.tsx

@@ -128,6 +128,7 @@ export const getDashboardItem = ({
     case 'table':
       return topTableData != null ? (
         <Table
+          error={topTableData.error}
           total={total}
           filtered={filtered}
           loading={topTableData.loading}

ui/packages/shared/profile/src/ProfileView/types/visualization.ts

@@ -11,6 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import {RpcError} from '@protobuf-ts/runtime-rpc';
+
 import {FlamegraphArrow, QueryServiceClient, Source, TableArrow} from '@parca/client';
 
 import {ProfileSource} from '../../ProfileSource';
@@ -20,7 +22,7 @@ export interface FlamegraphData {
   arrow?: FlamegraphArrow;
   total?: bigint;
   filtered?: bigint;
-  error?: any;
+  error: RpcError | null;
   metadataMappingFiles?: string[];
   metadataLoading: boolean;
   metadataLabels?: string[];
@@ -32,14 +34,14 @@ export interface TopTableData {
   arrow?: TableArrow;
   total?: bigint;
   filtered?: bigint;
-  error?: any;
+  error: RpcError | null;
   unit?: string;
 }
 
 export interface SourceData {
   loading: boolean;
   data?: Source;
-  error?: any;
+  error: RpcError | null;
 }
 
 export interface SandwichData {

ui/packages/shared/profile/src/Table/index.tsx

@@ -13,6 +13,7 @@
 
 import React, {useCallback, useEffect, useMemo, useRef} from 'react';
 
+import {RpcError} from '@protobuf-ts/runtime-rpc';
 import {tableFromIPC} from 'apache-arrow';
 import {AnimatePresence, motion} from 'framer-motion';
 import {useContextMenu} from 'react-contexify';
@@ -59,6 +60,7 @@ export interface TableProps {
   isHalfScreen: boolean;
   unit?: string;
   metadataMappingFiles?: string[];
+  error: RpcError | null;
 }
 
 export const Table = React.memo(function Table({
@@ -70,6 +72,7 @@ export const Table = React.memo(function Table({
   isHalfScreen,
   unit,
   metadataMappingFiles,
+  error,
 }: TableProps): React.JSX.Element {
   const currentColorProfile = useCurrentColorProfile();
   const [dashboardItems] = useURLState<string[]>('dashboard_items', {
@@ -220,6 +223,9 @@ export const Table = React.memo(function Table({
       </div>
     );
   }
+  if (error != null) {
+    return <div className="mx-auto text-center">Error: {error.message}</div>;
+  }
 
   if (rows.length === 0) {
     return <div className="mx-auto text-center">Profile has no samples</div>;

ui/packages/shared/profile/src/useSumBy.ts

@@ -267,7 +267,7 @@ export const useDraftSumBy = (
 
   return {
     draftSumBy: draftSumBy ?? defaultSumBy ?? DEFAULT_EMPTY_SUM_BY,
-    setDraftSumBy: setDraftSumBy,
+    setDraftSumBy,
     isDraftSumByLoading: isLoading,
   };
 };