Localize kanban, auth, backup, and admin utilities

job-tracker-ui/src/components/ErrorBoundary.tsx

@@ -1,16 +1,22 @@
 import React from "react";
+
 import { api } from "../api";
+import { useI18n } from "../i18n/I18nProvider";
 
 type Props = {
   children: React.ReactNode;
 };
 
+type ErrorBoundaryInnerProps = Props & {
+  t: (key: "errorBoundaryTitle" | "errorBoundaryBody" | "errorBoundaryUnknown" | "errorBoundaryRefresh") => string;
+};
+
 type State = {
   hasError: boolean;
   errorId?: string;
 };
 
-export default class ErrorBoundary extends React.Component<Props, State> {
+class ErrorBoundaryInner extends React.Component<ErrorBoundaryInnerProps, State> {
   state: State = { hasError: false };
 
   static getDerivedStateFromError(_: any) {
@@ -21,7 +27,6 @@ export default class ErrorBoundary extends React.Component<Props, State> {
     const errorId = `ui_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
     this.setState({ errorId });
 
-    // Best-effort: report to API. If offline/misconfigured, we still show fallback UI.
     void api.post("/client-errors", {
       errorId,
       message: String(error?.message ?? error),
@@ -38,16 +43,20 @@ export default class ErrorBoundary extends React.Component<Props, State> {
 
     return (
       <div style={{ padding: 24, maxWidth: 820, margin: "0 auto" }}>
-        <h2 style={{ margin: "0 0 8px 0" }}>Something crashed.</h2>
+        <h2 style={{ margin: "0 0 8px 0" }}>{this.props.t("errorBoundaryTitle")}</h2>
         <div style={{ opacity: 0.8, marginBottom: 16 }}>
-          Try refreshing. If it keeps happening, capture this ID:
+          {this.props.t("errorBoundaryBody")}
           <div style={{ fontFamily: "monospace", marginTop: 6 }}>
-            {this.state.errorId ?? "unknown"}
+            {this.state.errorId ?? this.props.t("errorBoundaryUnknown")}
           </div>
         </div>
-        <button onClick={() => window.location.reload()}>Refresh</button>
+        <button onClick={() => window.location.reload()}>{this.props.t("errorBoundaryRefresh")}</button>
       </div>
     );
   }
 }
 
+export default function ErrorBoundary(props: Props) {
+  const { t } = useI18n();
+  return <ErrorBoundaryInner {...props} t={t} />;
+}