diff --git a/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx b/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx index 9247a3aed2..67ed9df57b 100644 --- a/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx +++ b/packages/sitecore-jss-react/src/components/ErrorBoundary.tsx @@ -14,6 +14,7 @@ export type ErrorBoundaryProps = { | React.FC; rendering?: ComponentRendering; sitecoreContext: SitecoreContextValue; + type: string; }; class ErrorBoundary extends React.Component { diff --git a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx index b4d6dd7467..0c249b52e0 100644 --- a/packages/sitecore-jss-react/src/components/Placeholder.test.tsx +++ b/packages/sitecore-jss-react/src/components/Placeholder.test.tsx @@ -534,6 +534,46 @@ describe('', () => { expect(renderedComponent.find('.sc-jss-placeholder-error').length).to.equal(1); }); + it('should render error message on error, only for the errored component', () => { + const componentFactory: ComponentFactory = (componentName: string) => { + const components = new Map(); + + const Home: React.FC<{ rendering?: RouteData }> = ({ rendering }) => ( +
+ +
+ ); + + components.set('Home', Home); + components.set('ThrowError', () => { + throw Error('an error occured'); + }); + components.set('Foo', () =>
foo
); + + return components.get(componentName) || null; + }; + + const route = ({ + placeholders: { + main: [ + { + componentName: 'ThrowError', + }, + { + componentName: 'Foo', + }, + ], + }, + } as unknown) as RouteData; + const phKey = 'main'; + + const renderedComponent = mount( + + ); + expect(renderedComponent.find('.sc-jss-placeholder-error').length).to.equal(1); + expect(renderedComponent.find('div.foo-class').length).to.equal(1); + }); + it('should render custom errorComponent on error, if provided', () => { const componentFactory: ComponentFactory = (componentName: string) => { const components = new Map>(); diff --git a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx index 1fc0e35ef1..5a124fe9e2 100644 --- a/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx +++ b/packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx @@ -258,15 +258,20 @@ export class PlaceholderCommon extends React.Compone ); }) .filter((element) => element) - .map((element, id) => ( - - {element} - - )); + .map((element, id) => { + // assign type based on passed element - type='text/sitecore' should be ignored when renderEach Placeholder prop function is being used + const type = element.props.type === 'text/sitecore' ? element.props.type : ''; + return ( + + {element} + + ); + }); } getComponentForRendering(renderingDefinition: ComponentRendering): ComponentType | null {