System Components

System components are infrastructure-level components that provide essential functionality for the application. They handle cross-cutting concerns like error handling, rendering, and application state.

What are System Components?

System components are:

• Infrastructure: Provide foundational functionality
• Cross-cutting: Used across the entire application
• Non-visual: Often don't render UI directly (or render error states)
• Essential: Critical for application functionality

Examples

• Error boundaries that catch and handle errors
• Component renderers that dynamically render CMS components
• Providers that manage application-wide state
• Wrappers that add functionality to child components

Components

• AgentMetadata - Agent metadata endpoints (/agents.md, /llms.txt, /sitemap.md)
• CachePriming - Build-time cache priming for launch configuration and route prefetching
• ClientErrorBoundary - Client-side error boundary for catching React errors
• ComponentsRenderer - Dynamic component renderer for CMS components
• ErrorBoundary - Server-side error boundary component
• HeaderProvider - React context provider for header data and state management
• MarkdownRenderer - Markdown rendering engine for docs routes
• MarkdownRoutes - Markdown output routes and content negotiation
• OgImageFallback - Automatic branded OG image generation when CMS image is missing
• ScrollToTop - Scrolls page to top on route changes

Design Principles

• Infrastructure: Provide essential application functionality
• Reusable: Used throughout the application
• Non-visual: Focus on functionality over presentation
• Robust: Handle edge cases and errors gracefully

When to Create a System Component

Create a system component when:

• You need to handle cross-cutting concerns (errors, rendering, state)
• The component provides infrastructure functionality
• It's used application-wide, not page-specific
• It doesn't fit into the atomic design hierarchy (atoms/molecules/organisms)

Relationship to Other Components

System components:

• Support all levels: Used by atoms, molecules, organisms, and pages
• Provide infrastructure: Enable other components to function
• Handle errors: Catch and handle errors from other components
• Enable dynamic rendering: Allow CMS-driven component composition

Examples of Usage

• ErrorBoundary wraps page components to catch errors
• ComponentsRenderer dynamically renders CMS components (Hero, List, Media organisms)
• ClientErrorBoundary provides client-side error handling for React components

Error Handling

System components often handle errors:

• Error boundaries: Catch React errors and display fallback UI
• Graceful degradation: Provide fallbacks when components fail
• Error reporting: Log errors for debugging and monitoring