Add extended diagnostics logging
- Electron crash handlers (render-process-gone, child-process-gone, unresponsive/responsive, process warnings) with a circuit-breaker auto-reload for renderer crashes - Renderer error capture (window.onerror, unhandledrejection, React ErrorBoundary) forwarded to the main log via a one-way IPC channel - Memory-pressure heartbeat measured against the V8 heap_size_limit - Gated DEBUG log level (RD_DEBUG) and an in-memory ring of recent WARN/ERROR lines, exposed via the /errors endpoint and support bundle - Disk-error classification (ENOSPC etc.) on download failures and integrity-check pass/fail logging
This commit is contained in:
@@ -0,0 +1,94 @@
|
||||
import React from "react";
|
||||
|
||||
interface ErrorBoundaryProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
interface ErrorBoundaryState {
|
||||
hasError: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
// Catches render-time errors in the component tree so a crash shows a minimal
|
||||
// recovery surface instead of a silent white screen, and forwards the error to
|
||||
// the main process log. Kept deliberately dead-simple and state-independent: an
|
||||
// error inside the error path is how you get a second white screen or a loop.
|
||||
export class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
|
||||
constructor(props: ErrorBoundaryProps) {
|
||||
super(props);
|
||||
this.state = { hasError: false, message: "" };
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: unknown): ErrorBoundaryState {
|
||||
return { hasError: true, message: error instanceof Error ? error.message : String(error) };
|
||||
}
|
||||
|
||||
componentDidCatch(error: unknown, info: React.ErrorInfo): void {
|
||||
try {
|
||||
window.rd?.reportRendererError({
|
||||
kind: "react",
|
||||
message: error instanceof Error ? error.message : String(error),
|
||||
stack: error instanceof Error ? error.stack : undefined,
|
||||
componentStack: info?.componentStack || undefined
|
||||
});
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
|
||||
private handleReload = (): void => {
|
||||
window.location.reload();
|
||||
};
|
||||
|
||||
render(): React.ReactNode {
|
||||
if (!this.state.hasError) {
|
||||
return this.props.children;
|
||||
}
|
||||
const overlay: React.CSSProperties = {
|
||||
position: "fixed",
|
||||
inset: 0,
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
gap: 16,
|
||||
padding: 32,
|
||||
background: "#070b14",
|
||||
color: "#e6edf6",
|
||||
fontFamily: "Segoe UI, system-ui, sans-serif",
|
||||
textAlign: "center"
|
||||
};
|
||||
const pre: React.CSSProperties = {
|
||||
maxWidth: 640,
|
||||
maxHeight: 200,
|
||||
overflow: "auto",
|
||||
padding: 12,
|
||||
background: "#0d1422",
|
||||
border: "1px solid #243049",
|
||||
borderRadius: 6,
|
||||
color: "#ff9a8c",
|
||||
fontSize: 12,
|
||||
whiteSpace: "pre-wrap",
|
||||
textAlign: "left"
|
||||
};
|
||||
const button: React.CSSProperties = {
|
||||
padding: "8px 20px",
|
||||
background: "#2d5cff",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: 6,
|
||||
cursor: "pointer",
|
||||
fontSize: 14
|
||||
};
|
||||
return (
|
||||
<div style={overlay}>
|
||||
<h1 style={{ margin: 0, fontSize: 20 }}>Die Oberfläche hat einen Fehler ausgelöst</h1>
|
||||
<p style={{ margin: 0, maxWidth: 560, color: "#9aa7bd" }}>
|
||||
Die Anzeige wurde gestoppt, um Datenverlust zu vermeiden. Die laufenden Downloads im
|
||||
Hintergrund sind nicht betroffen. Der Fehler wurde ins Log geschrieben.
|
||||
</p>
|
||||
<pre style={pre}>{this.state.message}</pre>
|
||||
<button type="button" style={button} onClick={this.handleReload}>Oberfläche neu laden</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
+34
-1
@@ -1,8 +1,39 @@
|
||||
import React from "react";
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { App } from "./App";
|
||||
import { ErrorBoundary } from "./error-boundary";
|
||||
import "./styles.css";
|
||||
|
||||
// Forward otherwise-silent renderer failures (uncaught errors, unhandled promise
|
||||
// rejections) to the main process log. Without this, a renderer crash leaves no
|
||||
// trace anywhere on an unattended server.
|
||||
function reportRendererError(report: Parameters<typeof window.rd.reportRendererError>[0]): void {
|
||||
try {
|
||||
window.rd?.reportRendererError(report);
|
||||
} catch {
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener("error", (event) => {
|
||||
reportRendererError({
|
||||
kind: "error",
|
||||
message: event.message || String(event.error || "Unbekannter Fehler"),
|
||||
stack: event.error instanceof Error ? event.error.stack : undefined,
|
||||
source: event.filename || undefined,
|
||||
line: typeof event.lineno === "number" ? event.lineno : undefined,
|
||||
column: typeof event.colno === "number" ? event.colno : undefined
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("unhandledrejection", (event) => {
|
||||
const reason = event.reason;
|
||||
reportRendererError({
|
||||
kind: "unhandledrejection",
|
||||
message: reason instanceof Error ? reason.message : String(reason),
|
||||
stack: reason instanceof Error ? reason.stack : undefined
|
||||
});
|
||||
});
|
||||
|
||||
const rootElement = document.getElementById("root");
|
||||
if (!rootElement) {
|
||||
throw new Error("Root element fehlt");
|
||||
@@ -10,6 +41,8 @@ if (!rootElement) {
|
||||
|
||||
createRoot(rootElement).render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
<ErrorBoundary>
|
||||
<App />
|
||||
</ErrorBoundary>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user