.fig

Files (5)

• Adding Claude Agent Tooling into your FIG Sandbox
• Notes_260914_085337.txt
• Ready-to-Use FIG Applications Sandbox Setup
• SKILL.md
• Updates_001.txt

SKILL.md (first lines)

🧩 FIX.jsx — Current State & Full Implementation
 
🔗 Context: ZyntroAI / FastAPI Boilerplate • Self-Contained Container • v1.3.0
📄 Purpose: Global Error Boundary • Auto-Recovery • UI Fallback • Logging • Schema Safe
 
 
 
📄 FIX.jsx — Full Current Code
 
jsx
  
import React, { Component, ReactNode } from 'react';
import { useZyntro } from './core/ZyntroContext';
import { logError, safeRender } from '../scripts/verify';

interface FIXState {
  hasError: boolean;
  error: Error | null;
  errorInfo: string;
  recovered: boolean;
  retryCount: number;
}

interface FIXProps {
  children: ReactNode;
  fallback?: ReactNode;
  maxRetries?: number;
  onReset?: () => void;
}

// 🛡️ Main Error Boundary
export default class FIX extends Component<FIXProps, FIXState> {
  static defaultProps = {
    maxRetries: 3,
    fallback: null,
  };

  constructor(props: FIXProps) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: '',
      recovered: false,
      retryCount: 0,
    };
  }

  static getDerivedStateFromError(error: Error): Partial<FIXState> {
    return { hasError: true, error, recovered: false };
  }

  componentDidCatch(error: Error, info: { componentStack: string }) {
    this.setState({ errorInfo: info.componentStack });
    logError({
      source: 'FIX.jsx',
      message: error.message,
      stack: info.componentStack,
      timestamp: new Date().toISOString(),
    });
  }

  // 🔄 Auto-Reset Logic
  handleRetry = () => {
    const { retryCount } = this.state;
    const { maxRetries, onReset } = this.props;

    if (retryCount < maxRetries) {
      this.setState({
        hasError: false,
        error: null,
        errorInfo: '',
        recovered: true,
        retryCount: retryCount + 1,
      });
      onReset?.();
    }
  };

  render() {
    const { hasError, error, errorInfo, recovered, retryCount } = this.state;
    const { children, fallback, maxRetries } = this.props;

    if (hasError) {
      return (
        <div className="zyntro-fix-boundary" data-theme="dark">
          {fallback || (
            <div className="fix-fallback">
              <h2>⚠️ ระบบพบข้อผิดพลาด</h2>
              <p className="error-message">{error?.message || 'Unknown error'}</p>
              
              <button 
                className="fix-retry-btn"
                onClick={this.handleRetry}
                disabled={retryCount >= maxRetries}
              >
                {retryCount >= maxRetries ? '❌ หมดจำนวนครั้งลอง' : `🔄 ลองใหม่ (${retryCount}/${maxRetries})`}
              </button>

              <details className="fix-details">
                <summary>📋 ข้อมูลเทคนิค</summary>
                <pre>{errorInfo}</pre>
              </details>
            </div>
          )}
        </div>
      );
    }

    return <>{children}</>;
  }
}

// 🧩 Hook Wrapper (for functional components)
export function useFIX() {
  const { config } = useZyntro();

  const safeUpdate = <T,>(fn: () => T): T | null => {
    try {
      return safeRender(fn);

From ZyntroAI/fastapi-python-boilerplate, MIT.

More from ZyntroAI/fastapi-python-boilerplate