perf: optimize stats polling and add React ErrorBoundary for frontend crash fallback

client/src/App.jsx

@@ -453,6 +453,27 @@ export default function App() {
     }
   };
 
+  // Optimize polling based on page visibility (pause if tab is backgrounded)
+  useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState === 'hidden') {
+        stopPolling();
+      } else if (document.visibilityState === 'visible' && selectedStreamId && serverStatus === 'online') {
+        fetchAllStats(false);
+        const selectedStream = streams.find(s => s.id === parseInt(selectedStreamId));
+        const isLive = selectedStream && !selectedStream.end_time;
+        if (isLive || selectedStreamId === 'all') {
+          startPolling();
+        }
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [selectedStreamId, streams, serverStatus]);
+
   const fetchAuthStatus = async () => {
     try {
       const res = await fetch(`${API_BASE}/api/auth/status`, { credentials: 'include' });

client/src/main.jsx

@@ -1,10 +1,84 @@
+import React, { Component } from 'react'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
 
+class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("ErrorBoundary caught an error", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: 'center',
+          justifyContent: 'center',
+          height: '100vh',
+          backgroundColor: '#0b0b0f',
+          color: '#fff',
+          fontFamily: 'sans-serif',
+          textAlign: 'center',
+          padding: '20px'
+        }}>
+          <span style={{ fontSize: '3rem' }}>⚠️</span>
+          <h1 style={{ color: '#FF4949', fontSize: '1.5rem', marginTop: '10px' }}>Критическая ошибка интерфейса</h1>
+          <p style={{ color: '#ADADB8', maxWidth: '500px', margin: '15px 0', fontSize: '0.9rem', lineHeight: '1.5' }}>
+            Произошла критическая ошибка при отрисовке фронтенда. Пожалуйста, попробуйте обновить страницу.
+          </p>
+          <pre style={{
+            backgroundColor: '#16161c',
+            padding: '12px',
+            borderRadius: '6px',
+            maxWidth: '100%',
+            width: '450px',
+            overflowX: 'auto',
+            textAlign: 'left',
+            color: '#FF6B6B',
+            fontSize: '0.8rem',
+            border: '1px solid #2F2F35'
+          }}>
+            {this.state.error && this.state.error.toString()}
+          </pre>
+          <button
+            onClick={() => window.location.reload()}
+            style={{
+              padding: '10px 20px',
+              backgroundColor: '#9146FF',
+              color: '#white',
+              border: 'none',
+              borderRadius: '5px',
+              cursor: 'pointer',
+              fontWeight: 'bold',
+              marginTop: '15px',
+              color: '#fff'
+            }}
+          >
+            Обновить страницу
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 createRoot(document.getElementById('root')).render(
   <StrictMode>
-    <App />
+    <ErrorBoundary>
+      <App />
+    </ErrorBoundary>
   </StrictMode>,
 )