Implementation:TobikoData Sqlmesh Errors Page

Knowledge Sources	TobikoData_Sqlmesh
Domains	Web_UI, Error_Management, Debugging
Last Updated	2026-02-07 20:00 GMT

Overview

Error management page displaying a list of application errors with detailed error information and management controls.

Description

PageErrors provides a dedicated interface for viewing and managing errors that occur in the SQLMesh web application. The page features a sidebar with error list organized by error type (API, internal, plan operations, etc.) and a detail view showing full error information including stack traces and descriptions. It implements automatic navigation logic that redirects to the most recent error or home page when the error list is empty.

Key features include SourceList component displaying errors in reverse chronological order, color-coded error items using EnumVariant.Danger, individual error deletion and Clear All functionality, automatic routing to most recent error on mount/update, integration with NotificationCenter for error state management, and Outlet component for nested error detail routes.

The page handles edge cases like empty error lists (redirects to home), undefined error IDs (navigates to base errors route), and synchronizes URL with current error selection automatically.

Usage

Navigate to this page to review errors, debug issues, and manage error notifications accumulated during SQLMesh operations.

Code Reference

Source Location

Repository: TobikoData_Sqlmesh
File: web/client/src/library/pages/errors/Errors.tsx

Signature

export default function PageErrors(): JSX.Element

Import

import PageErrors from '@library/pages/errors/Errors'

I/O Contract

Inputs

Source	Type	Description
errors (NotificationCenter)	Set<ErrorIDE>	Set of application errors
pathname (router)	string	Current route path

Outputs

Component	Type	Description
JSX.Element	React Component	Page with error list sidebar and detail view

Usage Examples

// Route configuration
<Route
  path={EnumRoutes.Errors}
  element={<PageErrors />}
>
  <Route path=":errorId" element={<ErrorDetail />} />
</Route>

// Page structure:
// ┌──────────────────┬─────────────────────────┐
// │ Error List       │  Error Detail           │
// │                  │  ┌─────────────────────┐│
// │ ├─ API Error     │  │ Type: API Error     ││
// │ │  (danger)      │  │ Message: ...        ││
// │ ├─ Run Plan      │  │ Stack Trace: ...    ││
// │ │  Error         │  │                     ││
// │ ├─ General       │  │                     ││
// │ │  Error         │  │                     ││
// │                  │  └─────────────────────┘│
// │ [Clear All]      │                         │
// └──────────────────┴─────────────────────────┘

// Navigation logic (automatic)
useEffect(() => {
  if (isArrayEmpty(list)) {
    // No errors - go home
    setTimeout(() => navigate(EnumRoutes.Home))
  } else {
    const id = list[0]?.id
    if (isNil(id)) {
      navigate(EnumRoutes.Errors, { replace: true })
    } else {
      // Navigate to most recent error
      navigate(EnumRoutes.Errors + '/' + id, { replace: true })
    }
  }
}, [list])

// Error deletion handler
function handleDelete(id: string): void {
  const error = list.find(error => error.id === id)
  if (isNotNil(error)) {
    removeError(error)
  }
}

// Clear all errors
<Button
  size={EnumSize.sm}
  variant={EnumVariant.Neutral}
  onClick={() => clearErrors()}
>
  Clear All
</Button>

// Error list item
<SourceListItem
  to={`${EnumRoutes.Errors}/${error.id}`}
  name={error.key}
  description={error.message}
  variant={EnumVariant.Danger}
  handleDelete={() => handleDelete(error.id)}
/>

// Error types mapping
types={list.reduce(
  (acc: Record<string, string>, it) =>
    Object.assign(acc, { [it.id]: it.status }),
  {}
)}

Error Types

The page displays errors from NotificationCenter with these keys:

Error Key	Description
internal	Internal application errors
api	API communication errors
general	General uncategorized errors
run-plan	Plan execution errors
apply-plan	Plan application errors
cancel-plan	Plan cancellation errors
environments	Environment management errors
models	Model loading/parsing errors
fetchdf	Data fetch errors
evaluate-model	Model evaluation errors
render-query	Query rendering errors
column-lineage	Column lineage computation errors
model-lineage	Model lineage computation errors
meta	Metadata errors
modules	Module loading errors
file-explorer	File system operation errors
table	Table operation errors
table-diff	Table diff computation errors
save-file	File save operation errors

Component Features

Sidebar

SourceList with reverse chronological order
Active state highlighting for current error
Individual delete buttons per error
"Clear All" button at bottom
Divider separating list from controls

Detail View

Outlet component for nested routes
Shows full error information
Stack traces and descriptions
Contextual error details

Navigation Behavior

Auto-navigate to most recent error
Redirect to home when list is empty
Replace history to prevent back button issues
Sync URL with error selection

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment