@restnfeel/agentc-starter-kit
Version:
한국어 기업용 CMS 모듈 - Task Master AI와 함께 빠르게 웹사이트를 구현할 수 있는 재사용 가능한 컴포넌트 시스템
90 lines (87 loc) • 4.68 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import React, { Component } from 'react';
import { createChatbotError } from '../../utils/index.js';
/**
* Error Boundary component for catching and handling React errors
* in the chatbot system
*/
class ChatbotErrorBoundary extends Component {
constructor(props) {
super(props);
this.handleRetry = () => {
this.setState({
hasError: false,
error: null,
errorInfo: null,
});
};
this.state = {
hasError: false,
error: null,
errorInfo: null,
};
}
static getDerivedStateFromError(error) {
// Update state so the next render will show the fallback UI
const chatbotError = createChatbotError("REACT_ERROR_BOUNDARY", error.message || "An unexpected error occurred", {
originalError: error,
stack: error.stack,
});
return {
hasError: true,
error: chatbotError,
};
}
componentDidCatch(error, errorInfo) {
var _a, _b;
const chatbotError = createChatbotError("REACT_ERROR_BOUNDARY", error.message || "An unexpected error occurred", {
originalError: error,
stack: error.stack,
componentStack: errorInfo.componentStack,
});
this.setState({
error: chatbotError,
errorInfo,
});
// Call the error callback if provided
(_b = (_a = this.props).onError) === null || _b === void 0 ? void 0 : _b.call(_a, chatbotError, errorInfo);
// Log error to console in development
{
console.error("ChatbotErrorBoundary caught an error:", error, errorInfo);
}
}
render() {
var _a, _b;
const { showErrorDetails = "development" === "development" } = this.props;
if (this.state.hasError) {
// Custom fallback component
if (this.props.fallback) {
return this.props.fallback;
}
// Default error UI
return (jsxs("div", { className: "chatbot-error-boundary p-6 bg-red-50 border border-red-200 rounded-lg", children: [jsxs("div", { className: "flex items-center mb-4", children: [jsx("div", { className: "flex-shrink-0", children: jsx("svg", { className: "h-5 w-5 text-red-400", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 20 20", fill: "currentColor", children: jsx("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z", clipRule: "evenodd" }) }) }), jsxs("div", { className: "ml-3", children: [jsx("h3", { className: "text-sm font-medium text-red-800", children: "Chatbot Error" }), jsx("p", { className: "text-sm text-red-700 mt-1", children: ((_a = this.state.error) === null || _a === void 0 ? void 0 : _a.message) || "An unexpected error occurred" })] })] }), showErrorDetails && ((_b = this.state.error) === null || _b === void 0 ? void 0 : _b.details) && (jsxs("details", { className: "mb-4", children: [jsx("summary", { className: "text-sm font-medium text-red-800 cursor-pointer", children: "Error Details" }), jsx("pre", { className: "mt-2 text-xs text-red-700 bg-red-100 p-2 rounded overflow-auto max-h-40", children: JSON.stringify(this.state.error.details, null, 2) })] })), jsxs("div", { className: "flex space-x-2", children: [jsx("button", { onClick: this.handleRetry, className: "bg-red-600 text-white px-3 py-1 rounded text-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500", children: "Try Again" }), jsx("button", { onClick: () => window.location.reload(), className: "bg-gray-600 text-white px-3 py-1 rounded text-sm hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500", children: "Reload Page" })] })] }));
}
return this.props.children;
}
}
/**
* Hook for using error boundary in functional components
*/
const useChatbotErrorHandler = () => {
const [error, setError] = React.useState(null);
const handleError = React.useCallback((error) => {
setError(error);
console.error("Chatbot error:", error);
}, []);
const clearError = React.useCallback(() => {
setError(null);
}, []);
return {
error,
handleError,
clearError,
hasError: error !== null,
};
};
export { ChatbotErrorBoundary, ChatbotErrorBoundary as default, useChatbotErrorHandler };
//# sourceMappingURL=ErrorBoundary.js.map