gebeya-dala-error-fixer
Version:
Automatic runtime error detection and fix suggestions for Next.js applications with config-based setup
182 lines (181 loc) • 10.6 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const ErrorModal = ({ isOpen, error, suggestion, onClose, onFixIt, fixItEnabled = true }) => {
if (!isOpen || !error || !suggestion)
return null;
const copyToClipboard = async (text) => {
try {
await navigator.clipboard.writeText(text);
}
catch (err) {
console.error('Failed to copy to clipboard:', err);
}
};
const formatTime = (timestamp) => {
return new Date(timestamp).toLocaleTimeString();
};
return (_jsx("div", { style: {
position: 'fixed',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: 'rgba(0, 0, 0, 0.8)',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 9999,
fontFamily: 'system-ui, -apple-system, sans-serif'
}, children: _jsxs("div", { style: {
backgroundColor: '#1a1a1a',
color: '#ffffff',
borderRadius: '12px',
padding: '24px',
maxWidth: '600px',
width: '90%',
maxHeight: '80vh',
overflow: 'auto',
boxShadow: '0 20px 40px rgba(0, 0, 0, 0.3)',
border: '1px solid #333'
}, children: [_jsxs("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '20px',
paddingBottom: '16px',
borderBottom: '1px solid #333'
}, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [_jsx("div", { style: {
width: '24px',
height: '24px',
backgroundColor: '#ef4444',
borderRadius: '50%',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
fontSize: '14px',
fontWeight: 'bold'
}, children: "!" }), _jsx("h2", { style: { margin: 0, fontSize: '18px', fontWeight: '600' }, children: suggestion.title })] }), _jsx("button", { onClick: onClose, style: {
background: 'none',
border: 'none',
color: '#999',
fontSize: '24px',
cursor: 'pointer',
padding: '0',
width: '24px',
height: '24px',
display: 'flex',
alignItems: 'center',
justifyContent: 'center'
}, children: "\u00D7" })] }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsxs("div", { style: {
fontSize: '12px',
color: '#999',
marginBottom: '8px'
}, children: ["Error occurred at ", formatTime(error.timestamp)] }), _jsx("div", { style: {
backgroundColor: '#2a2a2a',
padding: '12px',
borderRadius: '6px',
border: '1px solid #333',
fontSize: '14px',
fontFamily: 'monospace',
wordBreak: 'break-word',
maxHeight: '100px',
overflow: 'auto'
}, children: error.message })] }), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { style: { margin: '0 0 8px 0', fontSize: '14px', fontWeight: '600' }, children: "What's happening?" }), _jsx("p", { style: {
margin: 0,
fontSize: '14px',
color: '#ccc',
lineHeight: '1.4'
}, children: suggestion.description })] }), suggestion.code && (_jsxs("div", { style: { marginBottom: '20px' }, children: [_jsxs("div", { style: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
marginBottom: '8px'
}, children: [_jsx("h3", { style: { margin: 0, fontSize: '14px', fontWeight: '600' }, children: "How to fix it:" }), _jsx("button", { onClick: () => copyToClipboard(suggestion.code), style: {
background: '#333',
border: '1px solid #555',
color: '#fff',
padding: '4px 8px',
borderRadius: '4px',
fontSize: '12px',
cursor: 'pointer'
}, children: "Copy" })] }), _jsx("pre", { style: {
backgroundColor: '#2a2a2a',
padding: '12px',
borderRadius: '6px',
border: '1px solid #333',
fontSize: '13px',
fontFamily: 'monospace',
margin: 0,
overflow: 'auto',
whiteSpace: 'pre-wrap'
}, children: suggestion.code })] })), _jsxs("div", { style: { marginBottom: '20px' }, children: [_jsx("h3", { style: { margin: '0 0 12px 0', fontSize: '14px', fontWeight: '600' }, children: "Suggested actions:" }), _jsx("ul", { style: {
margin: 0,
paddingLeft: '20px',
fontSize: '14px',
color: '#ccc'
}, children: suggestion.actions.map((action, index) => (_jsx("li", { style: { marginBottom: '4px' }, children: action }, index))) })] }), error.stack && (_jsxs("details", { style: { marginBottom: '20px' }, children: [_jsx("summary", { style: {
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
color: '#999',
marginBottom: '8px'
}, children: "Stack Trace" }), _jsx("pre", { style: {
backgroundColor: '#2a2a2a',
padding: '12px',
borderRadius: '6px',
border: '1px solid #333',
fontSize: '11px',
fontFamily: 'monospace',
margin: 0,
overflow: 'auto',
whiteSpace: 'pre-wrap',
maxHeight: '150px',
color: '#999'
}, children: error.stack })] })), _jsxs("div", { style: {
display: 'flex',
justifyContent: 'flex-end',
gap: '12px',
paddingTop: '16px',
borderTop: '1px solid #333'
}, children: [fixItEnabled && (_jsx("button", { onClick: () => {
if (onFixIt && error && suggestion) {
onFixIt(error, suggestion);
}
else {
// Default fix it action
if (suggestion.code) {
copyToClipboard(suggestion.code);
alert('Code copied to clipboard! Apply the fix to your code.');
}
else {
alert('Please follow the suggested actions to fix this error.');
}
}
onClose();
}, style: {
background: 'linear-gradient(135deg, #10b981, #059669)',
border: 'none',
color: '#fff',
padding: '10px 20px',
borderRadius: '6px',
fontSize: '14px',
fontWeight: '600',
cursor: 'pointer',
boxShadow: '0 2px 8px rgba(16, 185, 129, 0.3)',
transition: 'all 0.2s ease'
}, onMouseOver: (e) => {
e.currentTarget.style.transform = 'translateY(-1px)';
e.currentTarget.style.boxShadow = '0 4px 12px rgba(16, 185, 129, 0.4)';
}, onMouseOut: (e) => {
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = '0 2px 8px rgba(16, 185, 129, 0.3)';
}, children: "\uD83D\uDD27 Fix it" })), _jsx("button", { onClick: onClose, style: {
background: '#333',
border: '1px solid #555',
color: '#fff',
padding: '8px 16px',
borderRadius: '6px',
fontSize: '14px',
cursor: 'pointer'
}, children: "Close" })] })] }) }));
};