[#367] Localize and refactor ErrorBoundary

kbss-cvut · Oct 16, 2024 · f1b7d2f · f1b7d2f
1 parent a3fd2a3
commit f1b7d2f
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 25 deletions.
diff --git a/src/components/ErrorBoundaries.jsx → src/components/ErrorBoundary.jsx b/src/components/ErrorBoundaries.jsx → src/components/ErrorBoundary.jsx
@@ -1,47 +1,51 @@
 import React from "react";
 import { Alert, Accordion, Card, Button } from "react-bootstrap";
+import { IntlContext } from "../contexts/IntlContextProvider";
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       hasError: false,
-      error: null,
-      errorInfo: null,
+      errorLabel: null,
+      errorDetails: null,
     };
   }
 
   static getDerivedStateFromError(error) {
     return { hasError: true, error: error };
   }
 
-  componentDidCatch(error, errorInfo) {
+  componentDidCatch(errorLabel, errorDetails) {
     this.setState({
-      error: error,
-      errorInfo: errorInfo,
+      errorLabel: errorLabel,
+      errorDetails: errorDetails,
     });
   }
 
   render() {
     if (this.state.hasError) {
+      const { lang } = this.context;
       return (
         <div style={{ padding: "20px" }}>
           <Alert variant="danger">
-            <Alert.Heading>Something went wrong.</Alert.Heading>
-            <p>{this.state.error && this.state.error.toString()}</p>
+            <Alert.Heading>
+              {lang["error.default_message"] || "Something went wrong."}
+            </Alert.Heading>
+            <p>{this.state.errorLabel && this.state.errorLabel.toString()}</p>
           </Alert>
           <Accordion>
             <Card>
               <Card.Header>
                 <Accordion.Toggle as={Button} variant="link" eventKey="0">
-                  View Error Details
+                  {lang["error.view_details"] || "View Error Details"}
                 </Accordion.Toggle>
               </Card.Header>
               <Accordion.Collapse eventKey="0">
                 <Card.Body>
                   <pre style={{ whiteSpace: "pre-wrap" }}>
-                    {this.state.errorInfo &&
-                      this.state.errorInfo.componentStack}
+                    {this.state.errorDetails &&
+                      this.state.errorDetails.componentStack}
                   </pre>
                 </Card.Body>
               </Accordion.Collapse>
@@ -55,4 +59,6 @@ class ErrorBoundary extends React.Component {
   }
 }
 
+ErrorBoundary.contextType = IntlContext;
+
 export default ErrorBoundary;
diff --git a/src/components/SForms.jsx b/src/components/SForms.jsx
@@ -8,9 +8,8 @@ import FormGenerator from "../model/FormGenerator";
 import FormManager from "./FormManager";
 import { Card } from "react-bootstrap";
 import FormUtils from "../util/FormUtils.js";
-
 import "../styles/s-forms.css";
-import ErrorBoundaries from "./ErrorBoundaries.jsx";
+import ErrorBoundaries from "./ErrorBoundary.jsx";
 
 const SForms = forwardRef((props, ref) => {
   const [loading, setLoading] = useState(true);
@@ -69,14 +68,14 @@ const SForms = forwardRef((props, ref) => {
   );
 
   return (
-    <ErrorBoundaries>
-      <ConfigurationContextProvider
-        components={props.components}
-        componentsOptions={props.componentsOptions}
-        mapComponent={_mapComponent}
-        options={props.options}
-      >
-        <IntlContextProvider locale={props.options.intl.locale}>
+    <ConfigurationContextProvider
+      components={props.components}
+      componentsOptions={props.componentsOptions}
+      mapComponent={_mapComponent}
+      options={props.options}
+    >
+      <IntlContextProvider locale={props.options.intl.locale}>
+        <ErrorBoundaries>
           <FormGenContextProvider
             fetchTypeAheadValues={props.fetchTypeAheadValues}
           >
@@ -92,9 +91,9 @@ const SForms = forwardRef((props, ref) => {
               />
             </FormQuestionsProvider>
           </FormGenContextProvider>
-        </IntlContextProvider>
-      </ConfigurationContextProvider>
-    </ErrorBoundaries>
+        </ErrorBoundaries>
+      </IntlContextProvider>
+    </ConfigurationContextProvider>
   );
 });
 

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
@@ -12,5 +12,8 @@
   "validation.invalid": "Toto pole je neplatné.",
   "validation.check": "Toto pole musí být zkontrolováno.",
   "validation.lower_or_equal": "Toto pole by mělo být číslo rovné nebo nižší než ",
-  "validation.greater_or_equal": "Toto pole musí být větší nebo rovno "
+  "validation.greater_or_equal": "Toto pole musí být větší nebo rovno ",
+
+  "error.default_message": "Něco se pokazilo.",
+  "error.view_details": "Zobrazit podrobnosti o chybě"
 }
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -12,5 +12,8 @@
   "validation.invalid": "This field is invalid.",
   "validation.check": "This field must be checked.",
   "validation.lower_or_equal": "This field should be a number equal or lower to ",
-  "validation.greater_or_equal": "This field must be greater or equal to "
+  "validation.greater_or_equal": "This field must be greater or equal to ",
+
+  "error.default_message": "Something went wrong.",
+  "error.view_details": "View Error Details"
 }