Implementation:TobikoData Sqlmesh ReportErrors

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

Overview

A comprehensive error reporting component with popover display, expandable tracebacks, and structured error details.

Description

ReportErrors is a sophisticated error display system built on Headless UI's Popover that provides hover-triggered error reporting in the SQLMesh UI. The main component displays an error count badge that shows a Popover.Panel on hover, revealing a scrollable list of errors in reverse chronological order. Each error is rendered using the DisplayError component, which presents structured information including error status, scope, timestamp (formatted using toDateFormat with pattern yyyy-mm-dd hh-mm-ss), type, origin, and trigger. Errors with tracebacks include an expandable Disclosure section that reveals the full stack trace in a monospace font with syntax highlighting. The component integrates with the notification center for error management, providing both individual error dismissal and a bulk Clear action. Error metadata includes SQLMesh version information and supports optional SplitPane layout for viewing error details and tracebacks side-by-side.

Usage

Use this component in the application header or status bar to provide users with immediate visibility into errors. The hover-triggered popover keeps errors accessible without disrupting workflow, while the detailed error view helps with debugging. The component automatically hides when no errors are present and shows danger styling when errors exist.

Code Reference

Source Location

• Repository: TobikoData_Sqlmesh
• File: web/client/src/library/components/report/ReportErrors.tsx

Signature

export default function ReportErrors(): JSX.Element

export function DisplayError({
  error,
  scope,
  withSplitPane = false,
}: {
  scope: ErrorKey
  error: ErrorIDE
  withSplitPane?: boolean
}): JSX.Element

Import

import ReportErrors, { DisplayError } from '@components/report/ReportErrors'

I/O Contract

Inputs

Name	Type	Required	Description
ReportErrors (no props - reads from notification center)
DisplayError
error	ErrorIDE	Yes	Error object containing message, traceback, metadata
scope	ErrorKey	Yes	Error scope/category for display
withSplitPane	boolean	No	Whether to use split pane layout for error and traceback (defaults to false)

Outputs

Name	Type	Description
JSX.Element	React component	Error badge with popover list (ReportErrors) or structured error display (DisplayError)

Usage Examples

import ReportErrors from '@components/report/ReportErrors'

// In application header
function AppHeader() {
  return (
    <header className="flex items-center justify-between p-4">
      <h1>SQLMesh</h1>
      <div className="flex items-center">
        <ReportErrors />
      </div>
    </header>
  )
}

// Using DisplayError directly in an error page
import { DisplayError } from '@components/report/ReportErrors'

function ErrorDetailPage({ error }) {
  return (
    <div className="p-4">
      <DisplayError
        error={error}
        scope="ModelExecution"
        withSplitPane={true}
      />
    </div>
  )
}

Related Pages

• Environment:TobikoData_Sqlmesh_Web_UI_Stack