fix: graceful HTTP shutdown, add ErrorBoundary, fix chart responsive height

- main.go: call server.Shutdown() on SIGTERM/SIGINT to drain in-flight requests
- Add React ErrorBoundary component (catches render crashes, shows retry UI)
- Wrap main content area and settings page with ErrorBoundary
- Fix ChartTabs.tsx: replace runtime window.innerWidth check with Tailwind responsive class (h-[500px] md:h-[600px])
- Restarted backend with latest build (health endpoint now returns proper timestamp)
This commit is contained in:
shinchan-zhai
2026-03-23 12:58:38 +08:00
parent e65093f35e
commit 8fbbaad670
4 changed files with 74 additions and 3 deletions

View File

@@ -181,6 +181,12 @@ func main() {
<-quit
logger.Info("📴 Shutdown signal received, closing system...")
// Gracefully shutdown HTTP server (drain in-flight requests)
if err := server.Shutdown(); err != nil {
logger.Warnf("⚠️ HTTP server shutdown error: %v", err)
}
logger.Info("✅ HTTP server stopped")
// Stop all traders
traderManager.StopAll()
logger.Info("✅ System shut down safely")

View File

@@ -18,6 +18,7 @@ import { StrategyMarketPage } from './pages/StrategyMarketPage'
import { DataPage } from './pages/DataPage'
import { LoginRequiredOverlay } from './components/auth/LoginRequiredOverlay'
import HeaderBar from './components/common/HeaderBar'
import { ErrorBoundary } from './components/common/ErrorBoundary'
import { LanguageProvider, useLanguage } from './contexts/LanguageContext'
import { AuthProvider, useAuth } from './contexts/AuthContext'
import { ConfirmDialogProvider } from './components/common/ConfirmDialog'
@@ -396,7 +397,9 @@ function App() {
onLoginRequired={handleLoginRequired}
onPageChange={navigateToPage}
/>
<SettingsPage />
<ErrorBoundary>
<SettingsPage />
</ErrorBoundary>
</div>
)
}
@@ -474,6 +477,7 @@ function App() {
{/* Main Content with Page Transitions */}
<main className="min-h-screen pt-16">
<ErrorBoundary>
<AnimatePresence mode="wait">
<motion.div
key={currentPage}
@@ -536,6 +540,7 @@ function App() {
)}
</motion.div>
</AnimatePresence>
</ErrorBoundary>
</main>
{/* Footer */}

View File

@@ -144,8 +144,7 @@ export function ChartTabs({ traderId, selectedSymbol, updateKey, exchangeId }: C
return (
<div className={`nofx-glass rounded-lg border border-white/5 relative z-10 w-full flex flex-col transition-all duration-300 ${typeof window !== 'undefined' && window.innerWidth < 768 ? 'h-[500px]' : 'h-[600px]'
}`}>
<div className="nofx-glass rounded-lg border border-white/5 relative z-10 w-full flex flex-col transition-all duration-300 h-[500px] md:h-[600px]">
{/*
Premium Professional Toolbar
Mobile: Single row, horizontal scroll with gradient mask

View File

@@ -0,0 +1,61 @@
import { Component, type ReactNode } from 'react'
import { AlertTriangle, RefreshCw } from 'lucide-react'
interface Props {
children: ReactNode
fallback?: ReactNode
}
interface State {
hasError: boolean
error: Error | null
}
export class ErrorBoundary extends Component<Props, State> {
constructor(props: Props) {
super(props)
this.state = { hasError: false, error: null }
}
static getDerivedStateFromError(error: Error): State {
return { hasError: true, error }
}
componentDidCatch(error: Error, info: React.ErrorInfo) {
console.error('[ErrorBoundary] Uncaught error:', error, info.componentStack)
}
handleReset = () => {
this.setState({ hasError: false, error: null })
}
render() {
if (this.state.hasError) {
if (this.props.fallback) return this.props.fallback
return (
<div className="flex flex-col items-center justify-center min-h-[300px] p-8 text-center">
<AlertTriangle className="w-12 h-12 text-amber-400 mb-4" />
<h2 className="text-xl font-semibold text-white mb-2">Something went wrong</h2>
<p className="text-white/60 mb-1 max-w-md text-sm">
An unexpected error occurred. You can try refreshing this section.
</p>
{this.state.error && (
<p className="text-red-400/80 text-xs font-mono mb-4 max-w-lg break-all">
{this.state.error.message}
</p>
)}
<button
onClick={this.handleReset}
className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/80 transition-colors text-sm"
>
<RefreshCw className="w-4 h-4" />
Try again
</button>
</div>
)
}
return this.props.children
}
}