fix(app-headless-cms): improve error handling (#4572)

Pavel910 · web-flow · commit 63972fc42f1e · 2025-03-21T17:45:01.000+01:00
diff --git a/package.json b/package.json
@@ -189,6 +189,9 @@
     "**/*.{js,ts,tsx}": [
       "prettier --write",
       "eslint --max-warnings=0 --no-ignore"
+    ],
+    "**/package.json": [
+      "yarn webiny verify-dependencies"
     ]
   },
   "yargs": {
diff --git a/packages/app-headless-cms-common/package.json b/packages/app-headless-cms-common/package.json
@@ -14,6 +14,7 @@
   "license": "MIT",
   "dependencies": {
     "@emotion/react": "11.10.8",
+    "@emotion/styled": "11.10.6",
     "@fortawesome/fontawesome-svg-core": "^1.3.0",
     "@webiny/app": "0.0.0",
     "@webiny/app-admin": "0.0.0",
diff --git a/packages/app-headless-cms-common/src/Fields/ErrorBoundary.tsx b/packages/app-headless-cms-common/src/Fields/ErrorBoundary.tsx
@@ -0,0 +1,60 @@
+import React, { ErrorInfo } from "react";
+import type { CmsModelField } from "~/types";
+import { FieldElementError } from "./FieldElementError";
+
+type State =
+    | {
+          hasError: true;
+          error: Error;
+      }
+    | { hasError: false; error: undefined };
+
+interface Props {
+    field: CmsModelField;
+    [key: string]: any;
+}
+
+export class ErrorBoundary extends React.Component<Props, State> {
+    constructor(props: Props) {
+        super(props);
+        this.state = {
+            hasError: false,
+            error: undefined
+        };
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        return {
+            hasError: true,
+            error
+        };
+    }
+
+    public override componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        const { field } = this.props;
+        if (!field) {
+            return;
+        }
+        console.groupCollapsed(
+            `%cFIELD ERROR%c: An error occurred while rendering model field "${field.fieldId}" (${field.id}) of type "${field.type}".`,
+            "color:red",
+            "color:default"
+        );
+        console.log("Field definition", field);
+        console.error(error, errorInfo);
+        console.groupEnd();
+    }
+
+    public override render() {
+        if (this.state.hasError) {
+            return (
+                <FieldElementError
+                    title={`Error: ${this.state.error.message}`}
+                    description={"See developer console for more details."}
+                />
+            );
+        }
+
+        return this.props.children;
+    }
+}
diff --git a/packages/app-headless-cms-common/src/Fields/FieldElement.tsx b/packages/app-headless-cms-common/src/Fields/FieldElement.tsx
@@ -7,9 +7,24 @@ import { useBind } from "./useBind";
 import { useRenderPlugins } from "./useRenderPlugins";
 import { ModelFieldProvider, useModelField } from "../ModelFieldProvider";
 import { CmsModelField, CmsEditorContentModel, BindComponent } from "~/types";
+import { ErrorBoundary } from "./ErrorBoundary";
 
 const t = i18n.ns("app-headless-cms/admin/components/content-form");
 
+declare global {
+    // eslint-disable-next-line
+    namespace JSX {
+        interface IntrinsicElements {
+            "hcms-model-field": {
+                "data-id": string;
+                "data-type": string;
+                "data-field-id": string;
+                children: React.ReactNode;
+            };
+        }
+    }
+}
+
 type RenderFieldProps = Omit<FieldElementProps, "field">;
 
 const RenderField = (props: RenderFieldProps) => {
@@ -44,10 +59,22 @@ export interface FieldElementProps {
 export const FieldElement = makeDecoratable(
     "FieldElement",
     ({ field, ...props }: FieldElementProps) => {
+        if (!field) {
+            return null;
+        }
+
         return (
-            <ModelFieldProvider field={field}>
-                <RenderField {...props} />
-            </ModelFieldProvider>
+            <hcms-model-field
+                data-id={field.id}
+                data-field-id={field.fieldId}
+                data-type={field.type}
+            >
+                <ErrorBoundary field={field}>
+                    <ModelFieldProvider field={field}>
+                        <RenderField {...props} />
+                    </ModelFieldProvider>
+                </ErrorBoundary>
+            </hcms-model-field>
         );
     }
 );
diff --git a/packages/app-headless-cms-common/src/Fields/FieldElementError.tsx b/packages/app-headless-cms-common/src/Fields/FieldElementError.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import styled from "@emotion/styled";
+
+const StyledError = styled.div`
+    border: 2px solid red;
+    background-color: #f87e7e;
+    border-radius: 5px;
+    padding: 5px 10px;
+`;
+
+interface FieldElementErrorProps {
+    title: string;
+    description: string;
+}
+
+const showError = process.env.NODE_ENV === "development";
+
+export const FieldElementError = (props: FieldElementErrorProps) => {
+    if (!showError) {
+        return null;
+    }
+
+    return (
+        <StyledError>
+            <h5>{props.title}</h5>
+            <p>{props.description}</p>
+        </StyledError>
+    );
+};
diff --git a/packages/app-headless-cms-common/src/Fields/Fields.tsx b/packages/app-headless-cms-common/src/Fields/Fields.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 import { Cell, Grid } from "@webiny/ui/Grid";
 import { FieldElement } from "./FieldElement";
-import {
+import { FieldElementError } from "./FieldElementError";
+import type {
     CmsEditorContentModel,
     CmsModelField,
     CmsEditorFieldsLayout,
@@ -25,16 +26,25 @@ export const Fields = ({ Bind, fields, layout, contentModel, gridClassName }: Fi
         <Grid className={gridClassName}>
             {layout.map((row, rowIndex) => (
                 <React.Fragment key={rowIndex}>
-                    {row.map(fieldId => {
-                        const field = getFieldById(fields, fieldId) as CmsModelField;
+                    {row.map(id => {
+                        const field = getFieldById(fields, id) as CmsModelField;
 
                         return (
-                            <Cell span={Math.floor(12 / row.length)} key={fieldId}>
-                                <FieldElement
-                                    field={field}
-                                    Bind={Bind}
-                                    contentModel={contentModel}
-                                />
+                            <Cell span={Math.floor(12 / row.length)} key={id}>
+                                {field ? (
+                                    <FieldElement
+                                        field={field}
+                                        Bind={Bind}
+                                        contentModel={contentModel}
+                                    />
+                                ) : (
+                                    <FieldElementError
+                                        title={`Missing field with id "${id}"!`}
+                                        description={
+                                            "Make sure field layout contains the correct field ids (hint: check for typos)."
+                                        }
+                                    />
+                                )}
                             </Cell>
                         );
                     })}
diff --git a/packages/app-headless-cms-common/src/Fields/Label.tsx b/packages/app-headless-cms-common/src/Fields/Label.tsx
@@ -13,7 +13,7 @@ interface LabelProps {
     children?: React.ReactNode;
 }
 
-const Label = ({ children }: LabelProps) => (
+export const Label = ({ children }: LabelProps) => (
     <div
         className={classNames(
             "mdc-text-field-helper-text mdc-text-field-helper-text--persistent",
diff --git a/packages/cli/files/references.json b/packages/cli/files/references.json
diff --git a/packages/project-utils/bundling/app/config/webpackDevServer.config.js b/packages/project-utils/bundling/app/config/webpackDevServer.config.js
@@ -54,7 +54,7 @@ module.exports = function ({ host, port, https, allowedHost, proxy, paths }) {
         // Enable HTTPS if the HTTPS environment variable is set to 'true'
         ...server,
         client: {
-            overlay: true,
+            overlay: false,
             // Silence WebpackDevServer's own logs since they're generally not useful.
             // It will still show compile warnings and errors with this setting.
             logging: "warn",
diff --git a/yarn.lock b/yarn.lock
@@ -14287,6 +14287,7 @@ __metadata:
   dependencies:
     "@emotion/babel-plugin": "npm:^11.11.0"
     "@emotion/react": "npm:11.10.8"
+    "@emotion/styled": "npm:11.10.6"
     "@fortawesome/fontawesome-svg-core": "npm:^1.3.0"
     "@types/react": "npm:18.2.79"
     "@webiny/app": "npm:0.0.0"

Original file line number	Diff line number	Diff line change
`@@ -13,7 +13,7 @@ interface LabelProps {`
`13`	`13`	`children?: React.ReactNode;`
`14`	`14`	`}`
`15`	`15`
`16`		`-const Label = ({ children }: LabelProps) => (`
	`16`	`+export const Label = ({ children }: LabelProps) => (`
`17`	`17`	`<div`
`18`	`18`	`className={classNames(`
`19`	`19`	`"mdc-text-field-helper-text mdc-text-field-helper-text--persistent",`