@contentful/experiences-visual-editor-react 1.14.0 → 1.14.1-dev-20240911T0616-ea0d046.0

package/dist/index.js

@@ -83,13 +83,15 @@ var PostMessageMethods$2;
 })(PostMessageMethods$2 || (PostMessageMethods$2 = {}));
 const SUPPORTED_IMAGE_FORMATS = ['jpg', 'png', 'webp', 'gif', 'avif'];
 
-const structureComponents = new Set([
+const structureComponentIds = new Set([
     CONTENTFUL_COMPONENTS$1.section.id,
     CONTENTFUL_COMPONENTS$1.columns.id,
     CONTENTFUL_COMPONENTS$1.container.id,
     CONTENTFUL_COMPONENTS$1.singleColumn.id,
 ]);
-const isContentfulStructureComponent = (componentId) => structureComponents.has(componentId ?? '');
+const allContentfulComponentIds = new Set(Object.values(CONTENTFUL_COMPONENTS$1).map((component) => component.id));
+const isContentfulStructureComponent = (componentId) => structureComponentIds.has(componentId ?? '');
+const isContentfulComponent = (componentId) => allContentfulComponentIds.has(componentId ?? '');
 const isComponentAllowedOnRoot = (componentId) => isContentfulStructureComponent(componentId) || componentId === CONTENTFUL_COMPONENTS$1.divider.id;
 const isStructureWithRelativeHeight = (componentId, height) => {
     return isContentfulStructureComponent(componentId) && !height?.toString().endsWith('px');
@@ -4039,9 +4041,25 @@ class ImportedComponentError extends Error {
         this.name = 'ImportedComponentError';
     }
 }
+class ExperienceSDKError extends Error {
+    constructor(message) {
+        super(message);
+        this.name = 'ExperienceSDKError';
+    }
+}
 class ImportedComponentErrorBoundary extends React.Component {
     componentDidCatch(error, _errorInfo) {
-        const err = new ImportedComponentError(error.message);
+        if (error.name === 'ImportedComponentError' || error.name === 'ExperienceSDKError') {
+            // This error was already handled by a nested error boundary and should be passed upwards
+            // We have to do this as we wrap every component on every layer with this error boundary and
+            // thus an error deep in the tree bubbles through many layers of error boundaries.
+            throw error;
+        }
+        // Differentiate between custom and SDK-provided components for error tracking
+        const ErrorClass = isContentfulComponent(this.props.componentId)
+            ? ExperienceSDKError
+            : ImportedComponentError;
+        const err = new ErrorClass(error.message);
         err.stack = error.stack;
         throw err;
     }
@@ -4106,7 +4124,7 @@ const useComponent = ({ node: rawNode, resolveDesignValue, renderDropzone, userI
         const isAssembly = node.type === 'assembly';
         const modifiedProps = isStructureComponent || isAssembly ? componentProps : customComponentProps;
         const requiresDragWrapper = !isStructureComponent && componentRegistration.options?.wrapComponent === false;
-        const element = React.createElement(ImportedComponentErrorBoundary, null, React.createElement(componentRegistration.component, {
+        const element = React.createElement(ImportedComponentErrorBoundary, { componentId: node.data.blockId }, React.createElement(componentRegistration.component, {
             ...modifiedProps,
             dragProps,
         }));