mirror of
https://github.com/stackblitz-labs/bolt.diy
synced 2025-06-26 18:26:38 +00:00
Add support for export JSON, CSV, PDF, Text
## Changes to DebugTab.tsx & EventLogsTab.tsx ### Debug Tab Enhancements - Added multi-page support for PDF exports - Implemented proper page breaks and content flow - Added styled headers, key-value pairs, and horizontal lines - Added title and timestamp at the top of the PDF - Improved PDF layout with sections for system info, web app info, and performance metrics - Added footer with page numbers - Fixed memory usage calculations with proper null checks - Added error handling for undefined values ### Event Logs Tab Enhancements - Added comprehensive PDF export functionality with: - Professional header with bolt.diy branding - Report summary section - Log statistics with color-coded categories - Detailed log entries with proper formatting - Multi-page support with proper page breaks - Footer with page numbers and timestamp - Added multiple export formats (JSON, CSV, PDF, Text) - Fixed linter errors and improved type safety - Enhanced dark mode compatibility
This commit is contained in:
Stijnus
@@ -1,4 +1,4 @@
|
||||
import React, { useEffect, useState, useMemo } from 'react';
|
||||
import React, { useEffect, useState, useMemo, useCallback } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import { logStore, type LogEntry } from '~/lib/stores/logs';
|
||||
@@ -7,6 +7,8 @@ import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '~/component
|
||||
import { Progress } from '~/components/ui/Progress';
|
||||
import { ScrollArea } from '~/components/ui/ScrollArea';
|
||||
import { Badge } from '~/components/ui/Badge';
|
||||
import { Dialog, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
|
||||
import { jsPDF } from 'jspdf';
|
||||
|
||||
interface SystemInfo {
|
||||
os: string;
|
||||
@@ -138,6 +140,13 @@ interface OllamaServiceStatus {
|
||||
error?: string;
|
||||
}
|
||||
|
||||
interface ExportFormat {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
handler: () => void;
|
||||
}
|
||||
|
||||
const DependencySection = ({
|
||||
title,
|
||||
deps,
|
||||
@@ -541,7 +550,7 @@ export default function DebugTab() {
|
||||
const resourceEntries = performance.getEntriesByType('resource');
|
||||
const resourceStats = {
|
||||
totalResources: resourceEntries.length,
|
||||
totalSize: resourceEntries.reduce((total, entry) => total + (entry as any).transferSize || 0, 0),
|
||||
totalSize: resourceEntries.reduce((total, entry) => total + ((entry as any).transferSize || 0), 0),
|
||||
totalTime: Math.max(...resourceEntries.map((entry) => entry.duration)),
|
||||
};
|
||||
|
||||
@@ -651,6 +660,438 @@ export default function DebugTab() {
|
||||
}
|
||||
};
|
||||
|
||||
const exportAsCSV = () => {
|
||||
try {
|
||||
const debugData = {
|
||||
system: systemInfo,
|
||||
webApp: webAppInfo,
|
||||
errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
|
||||
performance: {
|
||||
memory: (performance as any).memory || {},
|
||||
timing: performance.timing,
|
||||
navigation: performance.navigation,
|
||||
},
|
||||
};
|
||||
|
||||
// Convert the data to CSV format
|
||||
const csvData = [
|
||||
['Category', 'Key', 'Value'],
|
||||
...Object.entries(debugData).flatMap(([category, data]) =>
|
||||
Object.entries(data || {}).map(([key, value]) => [
|
||||
category,
|
||||
key,
|
||||
typeof value === 'object' ? JSON.stringify(value) : String(value),
|
||||
]),
|
||||
),
|
||||
];
|
||||
|
||||
// Create CSV content
|
||||
const csvContent = csvData.map((row) => row.join(',')).join('\n');
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-debug-info-${new Date().toISOString()}.csv`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
toast.success('Debug information exported as CSV');
|
||||
} catch (error) {
|
||||
console.error('Failed to export CSV:', error);
|
||||
toast.error('Failed to export debug information as CSV');
|
||||
}
|
||||
};
|
||||
|
||||
const exportAsPDF = () => {
|
||||
try {
|
||||
const debugData = {
|
||||
system: systemInfo,
|
||||
webApp: webAppInfo,
|
||||
errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
|
||||
performance: {
|
||||
memory: (performance as any).memory || {},
|
||||
timing: performance.timing,
|
||||
navigation: performance.navigation,
|
||||
},
|
||||
};
|
||||
|
||||
// Create new PDF document
|
||||
const doc = new jsPDF();
|
||||
const lineHeight = 7;
|
||||
let yPos = 20;
|
||||
const margin = 20;
|
||||
const pageWidth = doc.internal.pageSize.getWidth();
|
||||
const maxLineWidth = pageWidth - 2 * margin;
|
||||
|
||||
// Add key-value pair with better formatting
|
||||
const addKeyValue = (key: string, value: any, indent = 0) => {
|
||||
// Check if we need a new page
|
||||
if (yPos > doc.internal.pageSize.getHeight() - 20) {
|
||||
doc.addPage();
|
||||
yPos = margin;
|
||||
}
|
||||
|
||||
doc.setFontSize(10);
|
||||
doc.setTextColor('#374151');
|
||||
doc.setFont('helvetica', 'bold');
|
||||
|
||||
// Format the key with proper spacing
|
||||
const formattedKey = key.replace(/([A-Z])/g, ' $1').trim();
|
||||
doc.text(formattedKey + ':', margin + indent, yPos);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setTextColor('#6B7280');
|
||||
|
||||
let valueText;
|
||||
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
// Skip rendering if value is empty object
|
||||
if (Object.keys(value).length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
yPos += lineHeight;
|
||||
Object.entries(value).forEach(([subKey, subValue]) => {
|
||||
// Check for page break before each sub-item
|
||||
if (yPos > doc.internal.pageSize.getHeight() - 20) {
|
||||
doc.addPage();
|
||||
yPos = margin;
|
||||
}
|
||||
|
||||
const formattedSubKey = subKey.replace(/([A-Z])/g, ' $1').trim();
|
||||
addKeyValue(formattedSubKey, subValue, indent + 10);
|
||||
});
|
||||
|
||||
return;
|
||||
} else {
|
||||
valueText = String(value);
|
||||
}
|
||||
|
||||
const valueX = margin + indent + doc.getTextWidth(formattedKey + ': ');
|
||||
const maxValueWidth = maxLineWidth - indent - doc.getTextWidth(formattedKey + ': ');
|
||||
const lines = doc.splitTextToSize(valueText, maxValueWidth);
|
||||
|
||||
// Check if we need a new page for the value
|
||||
if (yPos + lines.length * lineHeight > doc.internal.pageSize.getHeight() - 20) {
|
||||
doc.addPage();
|
||||
yPos = margin;
|
||||
}
|
||||
|
||||
doc.text(lines, valueX, yPos);
|
||||
yPos += lines.length * lineHeight;
|
||||
};
|
||||
|
||||
// Add section header with page break check
|
||||
const addSectionHeader = (title: string) => {
|
||||
// Check if we need a new page
|
||||
if (yPos + 20 > doc.internal.pageSize.getHeight() - 20) {
|
||||
doc.addPage();
|
||||
yPos = margin;
|
||||
}
|
||||
|
||||
yPos += lineHeight;
|
||||
doc.setFillColor('#F3F4F6');
|
||||
doc.rect(margin - 2, yPos - 5, pageWidth - 2 * (margin - 2), lineHeight + 6, 'F');
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.setTextColor('#111827');
|
||||
doc.setFontSize(12);
|
||||
doc.text(title.toUpperCase(), margin, yPos);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
yPos += lineHeight * 1.5;
|
||||
};
|
||||
|
||||
// Add horizontal line with page break check
|
||||
const addHorizontalLine = () => {
|
||||
// Check if we need a new page
|
||||
if (yPos + 10 > doc.internal.pageSize.getHeight() - 20) {
|
||||
doc.addPage();
|
||||
yPos = margin;
|
||||
|
||||
return; // Skip drawing line if we just started a new page
|
||||
}
|
||||
|
||||
doc.setDrawColor('#E5E5E5');
|
||||
doc.line(margin, yPos, pageWidth - margin, yPos);
|
||||
yPos += lineHeight;
|
||||
};
|
||||
|
||||
// Helper function to add footer to all pages
|
||||
const addFooters = () => {
|
||||
const totalPages = doc.internal.pages.length - 1;
|
||||
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
doc.setPage(i);
|
||||
doc.setFontSize(8);
|
||||
doc.setTextColor('#9CA3AF');
|
||||
doc.text(`Page ${i} of ${totalPages}`, pageWidth / 2, doc.internal.pageSize.getHeight() - 10, {
|
||||
align: 'center',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// Title and Header (first page only)
|
||||
doc.setFillColor('#6366F1');
|
||||
doc.rect(0, 0, pageWidth, 40, 'F');
|
||||
doc.setTextColor('#FFFFFF');
|
||||
doc.setFontSize(24);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Debug Information Report', margin, 25);
|
||||
yPos = 50;
|
||||
|
||||
// Timestamp and metadata
|
||||
doc.setTextColor('#6B7280');
|
||||
doc.setFontSize(10);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
|
||||
const timestamp = new Date().toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
});
|
||||
doc.text(`Generated: ${timestamp}`, margin, yPos);
|
||||
yPos += lineHeight * 2;
|
||||
|
||||
// System Information Section
|
||||
if (debugData.system) {
|
||||
addSectionHeader('System Information');
|
||||
|
||||
// OS and Architecture
|
||||
addKeyValue('Operating System', debugData.system.os);
|
||||
addKeyValue('Architecture', debugData.system.arch);
|
||||
addKeyValue('Platform', debugData.system.platform);
|
||||
addKeyValue('CPU Cores', debugData.system.cpus);
|
||||
|
||||
// Memory
|
||||
const memory = debugData.system.memory;
|
||||
addKeyValue('Memory', {
|
||||
'Total Memory': memory.total,
|
||||
'Used Memory': memory.used,
|
||||
'Free Memory': memory.free,
|
||||
Usage: memory.percentage + '%',
|
||||
});
|
||||
|
||||
// Browser Information
|
||||
const browser = debugData.system.browser;
|
||||
addKeyValue('Browser', {
|
||||
Name: browser.name,
|
||||
Version: browser.version,
|
||||
Language: browser.language,
|
||||
Platform: browser.platform,
|
||||
'Cookies Enabled': browser.cookiesEnabled ? 'Yes' : 'No',
|
||||
'Online Status': browser.online ? 'Online' : 'Offline',
|
||||
});
|
||||
|
||||
// Screen Information
|
||||
const screen = debugData.system.screen;
|
||||
addKeyValue('Screen', {
|
||||
Resolution: `${screen.width}x${screen.height}`,
|
||||
'Color Depth': screen.colorDepth + ' bit',
|
||||
'Pixel Ratio': screen.pixelRatio + 'x',
|
||||
});
|
||||
|
||||
// Time Information
|
||||
const time = debugData.system.time;
|
||||
addKeyValue('Time Settings', {
|
||||
Timezone: time.timezone,
|
||||
'UTC Offset': time.offset / 60 + ' hours',
|
||||
Locale: time.locale,
|
||||
});
|
||||
|
||||
addHorizontalLine();
|
||||
}
|
||||
|
||||
// Web App Information Section
|
||||
if (debugData.webApp) {
|
||||
addSectionHeader('Web App Information');
|
||||
|
||||
// Basic Info
|
||||
addKeyValue('Application', {
|
||||
Name: debugData.webApp.name,
|
||||
Version: debugData.webApp.version,
|
||||
Environment: debugData.webApp.environment,
|
||||
'Node Version': debugData.webApp.runtimeInfo.nodeVersion,
|
||||
});
|
||||
|
||||
// Git Information
|
||||
if (debugData.webApp.gitInfo) {
|
||||
const gitInfo = debugData.webApp.gitInfo.local;
|
||||
addKeyValue('Git Information', {
|
||||
Branch: gitInfo.branch,
|
||||
Commit: gitInfo.commitHash,
|
||||
Author: gitInfo.author,
|
||||
'Commit Time': gitInfo.commitTime,
|
||||
Repository: gitInfo.repoName,
|
||||
});
|
||||
|
||||
if (debugData.webApp.gitInfo.github) {
|
||||
const githubInfo = debugData.webApp.gitInfo.github.currentRepo;
|
||||
addKeyValue('GitHub Information', {
|
||||
Repository: githubInfo.fullName,
|
||||
'Default Branch': githubInfo.defaultBranch,
|
||||
Stars: githubInfo.stars,
|
||||
Forks: githubInfo.forks,
|
||||
'Open Issues': githubInfo.openIssues || 0,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
addHorizontalLine();
|
||||
}
|
||||
|
||||
// Performance Section
|
||||
if (debugData.performance) {
|
||||
addSectionHeader('Performance Metrics');
|
||||
|
||||
// Memory Usage
|
||||
const memory = debugData.performance.memory || {};
|
||||
const totalHeap = memory.totalJSHeapSize || 0;
|
||||
const usedHeap = memory.usedJSHeapSize || 0;
|
||||
const usagePercentage = memory.usagePercentage || 0;
|
||||
|
||||
addKeyValue('Memory Usage', {
|
||||
'Total Heap Size': formatBytes(totalHeap),
|
||||
'Used Heap Size': formatBytes(usedHeap),
|
||||
Usage: usagePercentage.toFixed(1) + '%',
|
||||
});
|
||||
|
||||
// Timing Metrics
|
||||
const timing = debugData.performance.timing || {};
|
||||
const navigationStart = timing.navigationStart || 0;
|
||||
const loadEventEnd = timing.loadEventEnd || 0;
|
||||
const domContentLoadedEventEnd = timing.domContentLoadedEventEnd || 0;
|
||||
const responseEnd = timing.responseEnd || 0;
|
||||
const requestStart = timing.requestStart || 0;
|
||||
|
||||
const loadTime = loadEventEnd > navigationStart ? loadEventEnd - navigationStart : 0;
|
||||
const domReadyTime =
|
||||
domContentLoadedEventEnd > navigationStart ? domContentLoadedEventEnd - navigationStart : 0;
|
||||
const requestTime = responseEnd > requestStart ? responseEnd - requestStart : 0;
|
||||
|
||||
addKeyValue('Page Load Metrics', {
|
||||
'Total Load Time': (loadTime / 1000).toFixed(2) + ' seconds',
|
||||
'DOM Ready Time': (domReadyTime / 1000).toFixed(2) + ' seconds',
|
||||
'Request Time': (requestTime / 1000).toFixed(2) + ' seconds',
|
||||
});
|
||||
|
||||
// Network Information
|
||||
if (debugData.system?.network) {
|
||||
const network = debugData.system.network;
|
||||
addKeyValue('Network Information', {
|
||||
'Connection Type': network.type || 'Unknown',
|
||||
'Effective Type': network.effectiveType || 'Unknown',
|
||||
'Download Speed': (network.downlink || 0) + ' Mbps',
|
||||
'Latency (RTT)': (network.rtt || 0) + ' ms',
|
||||
'Data Saver': network.saveData ? 'Enabled' : 'Disabled',
|
||||
});
|
||||
}
|
||||
|
||||
addHorizontalLine();
|
||||
}
|
||||
|
||||
// Errors Section
|
||||
if (debugData.errors && debugData.errors.length > 0) {
|
||||
addSectionHeader('Error Log');
|
||||
|
||||
debugData.errors.forEach((error: LogEntry, index: number) => {
|
||||
doc.setTextColor('#DC2626');
|
||||
doc.setFontSize(10);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text(`Error ${index + 1}:`, margin, yPos);
|
||||
yPos += lineHeight;
|
||||
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setTextColor('#6B7280');
|
||||
addKeyValue('Message', error.message, 10);
|
||||
|
||||
if (error.stack) {
|
||||
addKeyValue('Stack', error.stack, 10);
|
||||
}
|
||||
|
||||
if (error.source) {
|
||||
addKeyValue('Source', error.source, 10);
|
||||
}
|
||||
|
||||
yPos += lineHeight;
|
||||
});
|
||||
}
|
||||
|
||||
// Add footers to all pages at the end
|
||||
addFooters();
|
||||
|
||||
// Save the PDF
|
||||
doc.save(`bolt-debug-info-${new Date().toISOString()}.pdf`);
|
||||
toast.success('Debug information exported as PDF');
|
||||
} catch (error) {
|
||||
console.error('Failed to export PDF:', error);
|
||||
toast.error('Failed to export debug information as PDF');
|
||||
}
|
||||
};
|
||||
|
||||
const exportAsText = () => {
|
||||
try {
|
||||
const debugData = {
|
||||
system: systemInfo,
|
||||
webApp: webAppInfo,
|
||||
errors: logStore.getLogs().filter((log: LogEntry) => log.level === 'error'),
|
||||
performance: {
|
||||
memory: (performance as any).memory || {},
|
||||
timing: performance.timing,
|
||||
navigation: performance.navigation,
|
||||
},
|
||||
};
|
||||
|
||||
const textContent = Object.entries(debugData)
|
||||
.map(([category, data]) => {
|
||||
return `${category.toUpperCase()}\n${'-'.repeat(30)}\n${JSON.stringify(data, null, 2)}\n\n`;
|
||||
})
|
||||
.join('\n');
|
||||
|
||||
const blob = new Blob([textContent], { type: 'text/plain' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-debug-info-${new Date().toISOString()}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
toast.success('Debug information exported as text file');
|
||||
} catch (error) {
|
||||
console.error('Failed to export text file:', error);
|
||||
toast.error('Failed to export debug information as text file');
|
||||
}
|
||||
};
|
||||
|
||||
const exportFormats: ExportFormat[] = [
|
||||
{
|
||||
id: 'json',
|
||||
label: 'Export as JSON',
|
||||
icon: 'i-ph:file-json',
|
||||
handler: exportDebugInfo,
|
||||
},
|
||||
{
|
||||
id: 'csv',
|
||||
label: 'Export as CSV',
|
||||
icon: 'i-ph:file-csv',
|
||||
handler: exportAsCSV,
|
||||
},
|
||||
{
|
||||
id: 'pdf',
|
||||
label: 'Export as PDF',
|
||||
icon: 'i-ph:file-pdf',
|
||||
handler: exportAsPDF,
|
||||
},
|
||||
{
|
||||
id: 'txt',
|
||||
label: 'Export as Text',
|
||||
icon: 'i-ph:file-text',
|
||||
handler: exportAsText,
|
||||
},
|
||||
];
|
||||
|
||||
// Add Ollama health check function
|
||||
const checkOllamaHealth = async () => {
|
||||
try {
|
||||
@@ -687,6 +1128,77 @@ export default function DebugTab() {
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
// Replace the existing export button with this new component
|
||||
const ExportButton = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleOpenChange = useCallback((open: boolean) => {
|
||||
setIsOpen(open);
|
||||
}, []);
|
||||
|
||||
const handleFormatClick = useCallback((handler: () => void) => {
|
||||
handler();
|
||||
setIsOpen(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<DialogRoot open={isOpen} onOpenChange={handleOpenChange}>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className={classNames(
|
||||
'group flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
Export
|
||||
</button>
|
||||
|
||||
<Dialog showCloseButton>
|
||||
<div className="p-6">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<div className="i-ph:download w-5 h-5" />
|
||||
Export Debug Information
|
||||
</DialogTitle>
|
||||
|
||||
<div className="mt-4 flex flex-col gap-2">
|
||||
{exportFormats.map((format) => (
|
||||
<button
|
||||
key={format.id}
|
||||
onClick={() => handleFormatClick(format.handler)}
|
||||
className={classNames(
|
||||
'flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors w-full text-left',
|
||||
'bg-white dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
|
||||
'hover:border-purple-200 dark:hover:border-purple-900/30',
|
||||
'text-bolt-elements-textPrimary',
|
||||
)}
|
||||
>
|
||||
<div className={classNames(format.icon, 'w-5 h-5')} />
|
||||
<div>
|
||||
<div className="font-medium">{format.label}</div>
|
||||
<div className="text-xs text-bolt-elements-textSecondary mt-0.5">
|
||||
{format.id === 'json' && 'Export as a structured JSON file'}
|
||||
{format.id === 'csv' && 'Export as a CSV spreadsheet'}
|
||||
{format.id === 'pdf' && 'Export as a formatted PDF document'}
|
||||
{format.id === 'txt' && 'Export as a formatted text file'}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</DialogRoot>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 max-w-7xl mx-auto p-4">
|
||||
{/* Quick Stats Banner */}
|
||||
@@ -830,20 +1342,7 @@ export default function DebugTab() {
|
||||
Fetch WebApp Info
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={exportDebugInfo}
|
||||
className={classNames(
|
||||
'flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-lg transition-colors',
|
||||
'bg-white dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
|
||||
'hover:border-purple-200 dark:hover:border-purple-900/30',
|
||||
'text-bolt-elements-textPrimary',
|
||||
)}
|
||||
>
|
||||
<div className="i-ph:download w-4 h-4" />
|
||||
Export Debug Info
|
||||
</button>
|
||||
<ExportButton />
|
||||
</div>
|
||||
|
||||
{/* System Information */}
|
||||
|
||||
@@ -5,6 +5,9 @@ import { logStore, type LogEntry } from '~/lib/stores/logs';
|
||||
import { useStore } from '@nanostores/react';
|
||||
import { classNames } from '~/utils/classNames';
|
||||
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
|
||||
import { Dialog, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
|
||||
import { jsPDF } from 'jspdf';
|
||||
import { toast } from 'react-toastify';
|
||||
|
||||
interface SelectOption {
|
||||
value: string;
|
||||
@@ -252,6 +255,13 @@ const LogEntryItem = ({ log, isExpanded: forceExpanded, use24Hour, showTimestamp
|
||||
);
|
||||
};
|
||||
|
||||
interface ExportFormat {
|
||||
id: string;
|
||||
label: string;
|
||||
icon: string;
|
||||
handler: () => void;
|
||||
}
|
||||
|
||||
export function EventLogsTab() {
|
||||
const logs = useStore(logStore.logs);
|
||||
const [selectedLevel, setSelectedLevel] = useState<'all' | string>('all');
|
||||
@@ -329,51 +339,6 @@ export function EventLogsTab() {
|
||||
return () => clearTimeout(timeoutId);
|
||||
}, [searchQuery, filteredLogs.length]);
|
||||
|
||||
// Enhanced export logs handler
|
||||
const handleExportLogs = useCallback(() => {
|
||||
const startTime = performance.now();
|
||||
|
||||
try {
|
||||
const exportData = {
|
||||
timestamp: new Date().toISOString(),
|
||||
logs: filteredLogs,
|
||||
filters: {
|
||||
level: selectedLevel,
|
||||
searchQuery,
|
||||
},
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-logs-${new Date().toISOString()}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
const duration = performance.now() - startTime;
|
||||
logStore.logSuccess('Logs exported successfully', {
|
||||
type: 'export',
|
||||
message: `Successfully exported ${filteredLogs.length} logs`,
|
||||
component: 'EventLogsTab',
|
||||
exportedCount: filteredLogs.length,
|
||||
filters: {
|
||||
level: selectedLevel,
|
||||
searchQuery,
|
||||
},
|
||||
duration,
|
||||
});
|
||||
} catch (error) {
|
||||
logStore.logError('Failed to export logs', error, {
|
||||
type: 'export_error',
|
||||
message: 'Failed to export logs',
|
||||
component: 'EventLogsTab',
|
||||
});
|
||||
}
|
||||
}, [filteredLogs, selectedLevel, searchQuery]);
|
||||
|
||||
// Enhanced refresh handler
|
||||
const handleRefresh = useCallback(async () => {
|
||||
const startTime = performance.now();
|
||||
@@ -442,6 +407,455 @@ export function EventLogsTab() {
|
||||
|
||||
const selectedLevelOption = logLevelOptions.find((opt) => opt.value === selectedLevel);
|
||||
|
||||
// Export functions
|
||||
const exportAsJSON = () => {
|
||||
try {
|
||||
const exportData = {
|
||||
timestamp: new Date().toISOString(),
|
||||
logs: filteredLogs,
|
||||
filters: {
|
||||
level: selectedLevel,
|
||||
searchQuery,
|
||||
},
|
||||
preferences: {
|
||||
use24Hour,
|
||||
showTimestamps,
|
||||
autoExpand,
|
||||
},
|
||||
};
|
||||
|
||||
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-event-logs-${new Date().toISOString()}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
toast.success('Event logs exported successfully as JSON');
|
||||
} catch (error) {
|
||||
console.error('Failed to export JSON:', error);
|
||||
toast.error('Failed to export event logs as JSON');
|
||||
}
|
||||
};
|
||||
|
||||
const exportAsCSV = () => {
|
||||
try {
|
||||
// Convert logs to CSV format
|
||||
const headers = ['Timestamp', 'Level', 'Category', 'Message', 'Details'];
|
||||
const csvData = [
|
||||
headers,
|
||||
...filteredLogs.map((log) => [
|
||||
new Date(log.timestamp).toISOString(),
|
||||
log.level,
|
||||
log.category || '',
|
||||
log.message,
|
||||
log.details ? JSON.stringify(log.details) : '',
|
||||
]),
|
||||
];
|
||||
|
||||
const csvContent = csvData
|
||||
.map((row) => row.map((cell) => `"${String(cell).replace(/"/g, '""')}"`).join(','))
|
||||
.join('\n');
|
||||
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-event-logs-${new Date().toISOString()}.csv`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
toast.success('Event logs exported successfully as CSV');
|
||||
} catch (error) {
|
||||
console.error('Failed to export CSV:', error);
|
||||
toast.error('Failed to export event logs as CSV');
|
||||
}
|
||||
};
|
||||
|
||||
const exportAsPDF = () => {
|
||||
try {
|
||||
// Create new PDF document
|
||||
const doc = new jsPDF();
|
||||
const lineHeight = 7;
|
||||
let yPos = 20;
|
||||
const margin = 20;
|
||||
const pageWidth = doc.internal.pageSize.getWidth();
|
||||
const maxLineWidth = pageWidth - 2 * margin;
|
||||
|
||||
// Helper function to add section header
|
||||
const addSectionHeader = (title: string) => {
|
||||
// Check if we need a new page
|
||||
if (yPos > doc.internal.pageSize.getHeight() - 30) {
|
||||
doc.addPage();
|
||||
yPos = margin;
|
||||
}
|
||||
|
||||
doc.setFillColor('#F3F4F6');
|
||||
doc.rect(margin - 2, yPos - 5, pageWidth - 2 * (margin - 2), lineHeight + 6, 'F');
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.setTextColor('#111827');
|
||||
doc.setFontSize(12);
|
||||
doc.text(title.toUpperCase(), margin, yPos);
|
||||
yPos += lineHeight * 2;
|
||||
};
|
||||
|
||||
// Add title and header
|
||||
doc.setFillColor('#6366F1');
|
||||
doc.rect(0, 0, pageWidth, 50, 'F');
|
||||
doc.setTextColor('#FFFFFF');
|
||||
doc.setFontSize(24);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text('Event Logs Report', margin, 35);
|
||||
|
||||
// Add subtitle with bolt.diy
|
||||
doc.setFontSize(12);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text('bolt.diy - AI Development Platform', margin, 45);
|
||||
yPos = 70;
|
||||
|
||||
// Add report summary section
|
||||
addSectionHeader('Report Summary');
|
||||
|
||||
doc.setFontSize(10);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setTextColor('#374151');
|
||||
|
||||
const summaryItems = [
|
||||
{ label: 'Generated', value: new Date().toLocaleString() },
|
||||
{ label: 'Total Logs', value: filteredLogs.length.toString() },
|
||||
{ label: 'Filter Applied', value: selectedLevel === 'all' ? 'All Types' : selectedLevel },
|
||||
{ label: 'Search Query', value: searchQuery || 'None' },
|
||||
{ label: 'Time Format', value: use24Hour ? '24-hour' : '12-hour' },
|
||||
];
|
||||
|
||||
summaryItems.forEach((item) => {
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text(`${item.label}:`, margin, yPos);
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text(item.value, margin + 60, yPos);
|
||||
yPos += lineHeight;
|
||||
});
|
||||
|
||||
yPos += lineHeight * 2;
|
||||
|
||||
// Add statistics section
|
||||
addSectionHeader('Log Statistics');
|
||||
|
||||
// Calculate statistics
|
||||
const stats = {
|
||||
error: filteredLogs.filter((log) => log.level === 'error').length,
|
||||
warning: filteredLogs.filter((log) => log.level === 'warning').length,
|
||||
info: filteredLogs.filter((log) => log.level === 'info').length,
|
||||
debug: filteredLogs.filter((log) => log.level === 'debug').length,
|
||||
provider: filteredLogs.filter((log) => log.category === 'provider').length,
|
||||
api: filteredLogs.filter((log) => log.category === 'api').length,
|
||||
};
|
||||
|
||||
// Create two columns for statistics
|
||||
const leftStats = [
|
||||
{ label: 'Error Logs', value: stats.error, color: '#DC2626' },
|
||||
{ label: 'Warning Logs', value: stats.warning, color: '#F59E0B' },
|
||||
{ label: 'Info Logs', value: stats.info, color: '#3B82F6' },
|
||||
];
|
||||
|
||||
const rightStats = [
|
||||
{ label: 'Debug Logs', value: stats.debug, color: '#6B7280' },
|
||||
{ label: 'LLM Logs', value: stats.provider, color: '#10B981' },
|
||||
{ label: 'API Logs', value: stats.api, color: '#3B82F6' },
|
||||
];
|
||||
|
||||
const colWidth = (pageWidth - 2 * margin) / 2;
|
||||
|
||||
// Draw statistics in two columns
|
||||
leftStats.forEach((stat, index) => {
|
||||
doc.setTextColor(stat.color);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text(stat.value.toString(), margin, yPos);
|
||||
doc.setTextColor('#374151');
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text(stat.label, margin + 20, yPos);
|
||||
|
||||
if (rightStats[index]) {
|
||||
doc.setTextColor(rightStats[index].color);
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.text(rightStats[index].value.toString(), margin + colWidth, yPos);
|
||||
doc.setTextColor('#374151');
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.text(rightStats[index].label, margin + colWidth + 20, yPos);
|
||||
}
|
||||
|
||||
yPos += lineHeight;
|
||||
});
|
||||
|
||||
yPos += lineHeight * 2;
|
||||
|
||||
// Add logs section
|
||||
addSectionHeader('Event Logs');
|
||||
|
||||
// Helper function to add a log entry with improved formatting
|
||||
const addLogEntry = (log: LogEntry) => {
|
||||
const entryHeight = 20 + (log.details ? 40 : 0); // Estimate entry height
|
||||
|
||||
// Check if we need a new page
|
||||
if (yPos + entryHeight > doc.internal.pageSize.getHeight() - 20) {
|
||||
doc.addPage();
|
||||
yPos = margin;
|
||||
}
|
||||
|
||||
// Add timestamp and level
|
||||
const timestamp = new Date(log.timestamp).toLocaleString(undefined, {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
hour12: !use24Hour,
|
||||
});
|
||||
|
||||
// Draw log level badge background
|
||||
const levelColors: Record<string, string> = {
|
||||
error: '#FEE2E2',
|
||||
warning: '#FEF3C7',
|
||||
info: '#DBEAFE',
|
||||
debug: '#F3F4F6',
|
||||
};
|
||||
|
||||
const textColors: Record<string, string> = {
|
||||
error: '#DC2626',
|
||||
warning: '#F59E0B',
|
||||
info: '#3B82F6',
|
||||
debug: '#6B7280',
|
||||
};
|
||||
|
||||
const levelWidth = doc.getTextWidth(log.level.toUpperCase()) + 10;
|
||||
doc.setFillColor(levelColors[log.level] || '#F3F4F6');
|
||||
doc.roundedRect(margin, yPos - 4, levelWidth, lineHeight + 4, 1, 1, 'F');
|
||||
|
||||
// Add log level text
|
||||
doc.setTextColor(textColors[log.level] || '#6B7280');
|
||||
doc.setFont('helvetica', 'bold');
|
||||
doc.setFontSize(8);
|
||||
doc.text(log.level.toUpperCase(), margin + 5, yPos);
|
||||
|
||||
// Add timestamp
|
||||
doc.setTextColor('#6B7280');
|
||||
doc.setFont('helvetica', 'normal');
|
||||
doc.setFontSize(9);
|
||||
doc.text(timestamp, margin + levelWidth + 10, yPos);
|
||||
|
||||
// Add category if present
|
||||
if (log.category) {
|
||||
const categoryX = margin + levelWidth + doc.getTextWidth(timestamp) + 20;
|
||||
doc.setFillColor('#F3F4F6');
|
||||
|
||||
const categoryWidth = doc.getTextWidth(log.category) + 10;
|
||||
doc.roundedRect(categoryX, yPos - 4, categoryWidth, lineHeight + 4, 2, 2, 'F');
|
||||
doc.setTextColor('#6B7280');
|
||||
doc.text(log.category, categoryX + 5, yPos);
|
||||
}
|
||||
|
||||
yPos += lineHeight * 1.5;
|
||||
|
||||
// Add message
|
||||
doc.setTextColor('#111827');
|
||||
doc.setFontSize(10);
|
||||
|
||||
const messageLines = doc.splitTextToSize(log.message, maxLineWidth - 10);
|
||||
doc.text(messageLines, margin + 5, yPos);
|
||||
yPos += messageLines.length * lineHeight;
|
||||
|
||||
// Add details if present
|
||||
if (log.details) {
|
||||
doc.setTextColor('#6B7280');
|
||||
doc.setFontSize(8);
|
||||
|
||||
const detailsStr = JSON.stringify(log.details, null, 2);
|
||||
const detailsLines = doc.splitTextToSize(detailsStr, maxLineWidth - 15);
|
||||
|
||||
// Add details background
|
||||
doc.setFillColor('#F9FAFB');
|
||||
doc.roundedRect(margin + 5, yPos - 2, maxLineWidth - 10, detailsLines.length * lineHeight + 8, 1, 1, 'F');
|
||||
|
||||
doc.text(detailsLines, margin + 10, yPos + 4);
|
||||
yPos += detailsLines.length * lineHeight + 10;
|
||||
}
|
||||
|
||||
// Add separator line
|
||||
doc.setDrawColor('#E5E7EB');
|
||||
doc.setLineWidth(0.1);
|
||||
doc.line(margin, yPos, pageWidth - margin, yPos);
|
||||
yPos += lineHeight * 1.5;
|
||||
};
|
||||
|
||||
// Add all logs
|
||||
filteredLogs.forEach((log) => {
|
||||
addLogEntry(log);
|
||||
});
|
||||
|
||||
// Add footer to all pages
|
||||
const totalPages = doc.internal.pages.length - 1;
|
||||
|
||||
for (let i = 1; i <= totalPages; i++) {
|
||||
doc.setPage(i);
|
||||
doc.setFontSize(8);
|
||||
doc.setTextColor('#9CA3AF');
|
||||
|
||||
// Add page numbers
|
||||
doc.text(`Page ${i} of ${totalPages}`, pageWidth / 2, doc.internal.pageSize.getHeight() - 10, {
|
||||
align: 'center',
|
||||
});
|
||||
|
||||
// Add footer text
|
||||
doc.text('Generated by bolt.diy', margin, doc.internal.pageSize.getHeight() - 10);
|
||||
|
||||
const dateStr = new Date().toLocaleDateString();
|
||||
doc.text(dateStr, pageWidth - margin, doc.internal.pageSize.getHeight() - 10, { align: 'right' });
|
||||
}
|
||||
|
||||
// Save the PDF
|
||||
doc.save(`bolt-event-logs-${new Date().toISOString()}.pdf`);
|
||||
toast.success('Event logs exported successfully as PDF');
|
||||
} catch (error) {
|
||||
console.error('Failed to export PDF:', error);
|
||||
toast.error('Failed to export event logs as PDF');
|
||||
}
|
||||
};
|
||||
|
||||
const exportAsText = () => {
|
||||
try {
|
||||
const textContent = filteredLogs
|
||||
.map((log) => {
|
||||
const timestamp = new Date(log.timestamp).toLocaleString();
|
||||
let content = `[${timestamp}] ${log.level.toUpperCase()}: ${log.message}\n`;
|
||||
|
||||
if (log.category) {
|
||||
content += `Category: ${log.category}\n`;
|
||||
}
|
||||
|
||||
if (log.details) {
|
||||
content += `Details:\n${JSON.stringify(log.details, null, 2)}\n`;
|
||||
}
|
||||
|
||||
return content + '-'.repeat(80) + '\n';
|
||||
})
|
||||
.join('\n');
|
||||
|
||||
const blob = new Blob([textContent], { type: 'text/plain' });
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bolt-event-logs-${new Date().toISOString()}.txt`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
window.URL.revokeObjectURL(url);
|
||||
document.body.removeChild(a);
|
||||
toast.success('Event logs exported successfully as text file');
|
||||
} catch (error) {
|
||||
console.error('Failed to export text file:', error);
|
||||
toast.error('Failed to export event logs as text file');
|
||||
}
|
||||
};
|
||||
|
||||
const exportFormats: ExportFormat[] = [
|
||||
{
|
||||
id: 'json',
|
||||
label: 'Export as JSON',
|
||||
icon: 'i-ph:file-json',
|
||||
handler: exportAsJSON,
|
||||
},
|
||||
{
|
||||
id: 'csv',
|
||||
label: 'Export as CSV',
|
||||
icon: 'i-ph:file-csv',
|
||||
handler: exportAsCSV,
|
||||
},
|
||||
{
|
||||
id: 'pdf',
|
||||
label: 'Export as PDF',
|
||||
icon: 'i-ph:file-pdf',
|
||||
handler: exportAsPDF,
|
||||
},
|
||||
{
|
||||
id: 'txt',
|
||||
label: 'Export as Text',
|
||||
icon: 'i-ph:file-text',
|
||||
handler: exportAsText,
|
||||
},
|
||||
];
|
||||
|
||||
const ExportButton = () => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
|
||||
const handleOpenChange = useCallback((open: boolean) => {
|
||||
setIsOpen(open);
|
||||
}, []);
|
||||
|
||||
const handleFormatClick = useCallback((handler: () => void) => {
|
||||
handler();
|
||||
setIsOpen(false);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<DialogRoot open={isOpen} onOpenChange={handleOpenChange}>
|
||||
<button
|
||||
onClick={() => setIsOpen(true)}
|
||||
className={classNames(
|
||||
'group flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
Export
|
||||
</button>
|
||||
|
||||
<Dialog showCloseButton>
|
||||
<div className="p-6">
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<div className="i-ph:download w-5 h-5" />
|
||||
Export Event Logs
|
||||
</DialogTitle>
|
||||
|
||||
<div className="mt-4 flex flex-col gap-2">
|
||||
{exportFormats.map((format) => (
|
||||
<button
|
||||
key={format.id}
|
||||
onClick={() => handleFormatClick(format.handler)}
|
||||
className={classNames(
|
||||
'flex items-center gap-3 px-4 py-3 text-sm rounded-lg transition-colors w-full text-left',
|
||||
'bg-white dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-50 dark:hover:bg-[#1a1a1a]',
|
||||
'hover:border-purple-200 dark:hover:border-purple-900/30',
|
||||
'text-bolt-elements-textPrimary',
|
||||
)}
|
||||
>
|
||||
<div className={classNames(format.icon, 'w-5 h-5')} />
|
||||
<div>
|
||||
<div className="font-medium">{format.label}</div>
|
||||
<div className="text-xs text-bolt-elements-textSecondary mt-0.5">
|
||||
{format.id === 'json' && 'Export as a structured JSON file'}
|
||||
{format.id === 'csv' && 'Export as a CSV spreadsheet'}
|
||||
{format.id === 'pdf' && 'Export as a formatted PDF document'}
|
||||
{format.id === 'txt' && 'Export as a formatted text file'}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
</DialogRoot>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -540,21 +954,7 @@ export function EventLogsTab() {
|
||||
Refresh
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleExportLogs}
|
||||
className={classNames(
|
||||
'group flex items-center gap-2',
|
||||
'rounded-lg px-3 py-1.5',
|
||||
'text-sm text-gray-900 dark:text-white',
|
||||
'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
|
||||
'border border-[#E5E5E5] dark:border-[#1A1A1A]',
|
||||
'hover:bg-purple-500/10 dark:hover:bg-purple-500/20',
|
||||
'transition-all duration-200',
|
||||
)}
|
||||
>
|
||||
<span className="i-ph:download text-lg text-gray-500 dark:text-gray-400 group-hover:text-purple-500 transition-colors" />
|
||||
Export
|
||||
</button>
|
||||
<ExportButton />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user