Surface errors from logs.all.otel endpoint (supabase#46094)

## Context

If an error somehow occurs on the logs.all.otel endpoint for unified
logs, the network request still returns a 200 but the error is then
returned in the response as such:
<img width="681" height="269" alt="image"
src="https://github.com/user-attachments/assets/62bcf68f-8a8c-46a0-a91a-17f653004fa0"
/>

In which case, there's currently no UI error handling in unified logs,
and it'll just show no results. Changes in this PR addresses that:
<img width="1450" height="956" alt="image"
src="https://github.com/user-attachments/assets/1b2c166b-d3d1-4923-9e35-51bad99b6e1c"
/>


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Bug Fixes**
* Enhanced error handling and messaging for log retrieval—displays
explicit error notifications when queries fail instead of misleading
empty state messages, improving user experience and clarity during
troubleshooting.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/supabase/supabase/pull/46094?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: joshenlim

apps/studio/components/interfaces/UnifiedLogs/UnifiedLogs.tsx

@@ -143,6 +143,8 @@ export const UnifiedLogs = () => {
 
   const {
     data: unifiedLogsData,
+    error,
+    isError,
     isLoading,
     isFetching,
     isFetchingNextPage,
@@ -152,6 +154,7 @@ export const UnifiedLogs = () => {
     fetchNextPage,
     fetchPreviousPage,
   } = useUnifiedLogsInfiniteQuery({ projectRef, search: searchParameters })
+
   const {
     data: counts,
     isPending: isLoadingCounts,
@@ -161,6 +164,7 @@ export const UnifiedLogs = () => {
     projectRef,
     search: searchParameters,
   })
+
   const {
     data: unifiedLogsChart = [],
     isFetching: isFetchingCharts,
@@ -355,6 +359,7 @@ export const UnifiedLogs = () => {
   return (
     <DataTableProvider
       table={table}
+      error={error}
       columns={UNIFIED_LOGS_COLUMNS}
       filterFields={filterFields}
       columnFilters={columnFilters}
@@ -365,6 +370,7 @@ export const UnifiedLogs = () => {
       searchParameters={searchParameters}
       enableColumnOrdering={true}
       isFetching={isFetching}
+      isError={isError}
       isLoading={isLoading}
       isLoadingCounts={isLoadingCounts}
       getFacetedUniqueValues={getFacetedUniqueValues(facets)}

apps/studio/components/ui/DataTable/DataTableInfinite.tsx

@@ -7,6 +7,7 @@ import { Fragment, UIEvent, useCallback, useRef } from 'react'
 import { Button, cn } from 'ui'
 import { ShimmeringLoader } from 'ui-patterns'
 
+import AlertError from '../AlertError'
 import { formatCompactNumber } from './DataTable.utils'
 import { useDataTable } from './providers/DataTableProvider'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './Table'
@@ -44,7 +45,7 @@ export function DataTableInfinite<TData, TValue, TMeta>({
   setColumnVisibility,
   searchParamsParser,
 }: DataTableInfiniteProps<TData, TValue, TMeta>) {
-  const { table, isLoading, isFetching } = useDataTable()
+  const { table, error, isError, isLoading, isFetching } = useDataTable()
   const tableRef = useRef<HTMLTableElement>(null)
 
   const headerGroups = table.getHeaderGroups()
@@ -145,6 +146,20 @@ export function DataTableInfinite<TData, TValue, TMeta>({
               </TableRow>
             ))}
           </Fragment>
+        ) : isError ? (
+          <Fragment>
+            <TableRow className="hover:bg-transparent h-full">
+              <TableCell colSpan={columns.length} className="text-center">
+                <div className="flex flex-col items-start justify-start h-full gap-3 px-4 pt-4">
+                  <AlertError
+                    error={error}
+                    className="text-left"
+                    subject="Failed to retrieve logs"
+                  />
+                </div>
+              </TableCell>
+            </TableRow>
+          </Fragment>
         ) : (
           <Fragment>
             <TableRow className="hover:bg-transparent h-full">

apps/studio/components/ui/DataTable/providers/DataTableProvider.tsx

@@ -11,6 +11,7 @@ import { createContext, ReactNode, useContext, useMemo } from 'react'
 
 import { DataTableFilterField } from '../DataTable.types'
 import { QuerySearchParamsType } from '@/components/interfaces/UnifiedLogs/UnifiedLogs.types'
+import { ResponseError } from '@/types'
 
 // REMINDER: read about how to move controlled state out of the useReactTable hook
 // https://github.com/TanStack/table/discussions/4005#discussioncomment-7303569
@@ -28,11 +29,13 @@ interface DataTableStateContextType {
 
 interface DataTableBaseContextType<TData = unknown, TValue = unknown> {
   table: Table<TData>
+  error: ResponseError | null
   filterFields: DataTableFilterField<TData>[]
   columns: ColumnDef<TData, TValue>[]
-  isFetching?: boolean
-  isLoading?: boolean
-  isLoadingCounts?: boolean
+  isFetching: boolean
+  isError: boolean
+  isLoading: boolean
+  isLoadingCounts: boolean
   getFacetedUniqueValues?: (table: Table<TData>, columnId: string) => Map<string, number>
   getFacetedMinMaxValues?: (table: Table<TData>, columnId: string) => undefined | [number, number]
 }

apps/studio/data/logs/unified-logs-infinite-query.ts

@@ -116,6 +116,7 @@ export async function getUnifiedLogs(
   })
 
   if (error) handleError(error)
+  if (data.error) handleError(new Error(data.error as string))
 
   const resultData = data?.result ?? []