[sitecore-jss-react] ErrorBoundary nested components fix

CHANGELOG.md

@@ -17,7 +17,7 @@ Our versioning strategy is as follows:
 
 ### 🎉 New Features & Improvements
 
-* `[sitecore-jss-react]`Introduce ErrorBoundary component. All rendered components are wrapped with it and it will catch client or server side errors from any of its children, display appropriate message and prevent the rest of the application from failing. It accepts and can display custom error component and loading message if it is passed as a prop to parent Placeholder. ([#1786](https://github.com/Sitecore/jss/pull/1786) [#1790](https://github.com/Sitecore/jss/pull/1790) [#1793](https://github.com/Sitecore/jss/pull/1793) [#1794](https://github.com/Sitecore/jss/pull/1794))
+* `[sitecore-jss-react]`Introduce ErrorBoundary component. All rendered components are wrapped with it and it will catch client or server side errors from any of its children, display appropriate message and prevent the rest of the application from failing. It accepts and can display custom error component and loading message if it is passed as a prop to parent Placeholder. ([#1786](https://github.com/Sitecore/jss/pull/1786) [#1790](https://github.com/Sitecore/jss/pull/1790) [#1793](https://github.com/Sitecore/jss/pull/1793) [#1794](https://github.com/Sitecore/jss/pull/1794) [#1799](https://github.com/Sitecore/jss/pull/1799))
 
 ## 22.0.0
 

packages/sitecore-jss-react/src/components/ErrorBoundary.test.tsx

@@ -32,7 +32,7 @@ describe('ErrorBoundary', () => {
 
       const rendered = mount(
         <SitecoreContextReactContext.Provider value={testComponentProps}>
-          <ErrorBoundary rendering={rendering} customErrorComponent={CustomErrorComponent}>
+          <ErrorBoundary rendering={rendering} errorComponent={CustomErrorComponent}>
             <TestErrorComponent />
           </ErrorBoundary>
         </SitecoreContextReactContext.Provider>
@@ -148,7 +148,7 @@ describe('ErrorBoundary', () => {
       };
 
       const rendered = mount(
-        <ErrorBoundary customErrorComponent={CustomErrorComponent}>
+        <ErrorBoundary errorComponent={CustomErrorComponent}>
           <TestErrorComponent />
         </ErrorBoundary>
       );
@@ -254,7 +254,7 @@ describe('ErrorBoundary', () => {
       };
 
       const rendered = mount(
-        <ErrorBoundary customErrorComponent={CustomErrorComponent}>
+        <ErrorBoundary errorComponent={CustomErrorComponent}>
           <TestErrorComponent />
         </ErrorBoundary>
       );

packages/sitecore-jss-react/src/components/ErrorBoundary.tsx

@@ -3,17 +3,15 @@ import { ComponentRendering, LayoutServicePageState } from '@sitecore-jss/siteco
 import { withSitecoreContext } from '../enhancers/withSitecoreContext';
 import { SitecoreContextValue } from './SitecoreContext';
 
-type CustomErrorComponentProps = {
+type ErrorComponentProps = {
   [prop: string]: unknown;
 };
 
 export type ErrorBoundaryProps = {
   children: ReactNode;
   sitecoreContext: SitecoreContextValue;
   type: string;
-  customErrorComponent?:
-    | React.ComponentClass<CustomErrorComponentProps>
-    | React.FC<CustomErrorComponentProps>;
+  errorComponent?: React.ComponentClass<ErrorComponentProps> | React.FC<ErrorComponentProps>;
   rendering?: ComponentRendering;
   componentLoadingMessage?: string;
 };
@@ -56,8 +54,8 @@ class ErrorBoundary extends React.Component<ErrorBoundaryProps> {
 
   render() {
     if (this.state.error) {
-      if (this.props.customErrorComponent) {
-        return <this.props.customErrorComponent error={this.state.error} />;
+      if (this.props.errorComponent) {
+        return <this.props.errorComponent error={this.state.error} />;
       } else {
         if (this.showErrorDetails()) {
           return (

packages/sitecore-jss-react/src/components/Placeholder.test.tsx

@@ -462,7 +462,7 @@ describe('<Placeholder />', () => {
       <Placeholder name={phKey} rendering={component} componentFactory={componentFactory} />
     );
 
-    const eeChrome = renderedComponent.find({ chrometype: 'placeholder', kind: 'open', id: phKey });
+    const eeChrome = renderedComponent.find(`code#${phKey}[chrometype="placeholder"][kind="open"]`);
     expect(eeChrome.length).to.eq(1);
     const keyAttribute = eeChrome.get(0).key;
     expect(keyAttribute).to.not.be.undefined;

packages/sitecore-jss-react/src/components/PlaceholderCommon.tsx

@@ -275,12 +275,14 @@ export class PlaceholderCommon<T extends PlaceholderProps> extends React.Compone
       // 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 (
+        // wrapping with error boundary could cause problems in case where parent component uses withPlaceholder HOC and tries to access its children props
+        // that's why we need to expose element's props here
         <ErrorBoundary
           key={element.type + '-' + id}
-          customErrorComponent={this.props.errorComponent}
-          rendering={element.props.rendering as ComponentRendering}
+          errorComponent={this.props.errorComponent}
           componentLoadingMessage={this.props.componentLoadingMessage}
           type={type}
+          {...element.props}
         >
           {element}
         </ErrorBoundary>