Add error boundary to segments/segments.jsx

[MAILPOET-4706]

mailpoet/assets/js/src/common/tabs/routed_tabs.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-router-dom';
 import { noop } from 'lodash';
 
-import { Tabs, Props as TabProps } from './tabs';
+import { Props as TabProps, Tabs } from './tabs';
 
 function RouterAwareTabs(
   props: TabProps & {
@@ -105,4 +105,6 @@ function RoutedTabs({
   );
 }
 
+RoutedTabs.displayName = 'RoutedTabs';
+
 export { RoutedTabs };

mailpoet/assets/js/src/notices/notice.tsx

@@ -1,13 +1,14 @@
 import {
-  useState,
-  useRef,
+  ReactNode,
   useCallback,
   useEffect,
   useLayoutEffect,
-  ReactNode,
+  useRef,
+  useState,
 } from 'react';
 import ReactDOM from 'react-dom';
 import { MailPoet } from 'mailpoet';
+import { withBoundary } from 'common';
 
 type Props = {
   type: 'success' | 'info' | 'warning' | 'error';
@@ -86,6 +87,7 @@ function Notice({
     document.getElementById('mailpoet_notices'),
   );
 }
+
 Notice.defaultProps = {
   timeout: 10000,
   scroll: false,
@@ -94,5 +96,6 @@ Notice.defaultProps = {
   onDisplay: undefined,
   onClose: undefined,
 };
-
-export { Notice };
+Notice.displayName = 'Notice';
+const NoticeWithBoundary = withBoundary(Notice);
+export { NoticeWithBoundary as Notice };

mailpoet/assets/js/src/segments/dynamic/editor.tsx

@@ -40,3 +40,4 @@ export function Editor(): JSX.Element {
     </>
   );
 }
+Editor.displayName = 'SegmentEditor';

mailpoet/assets/js/src/segments/dynamic/list.jsx

@@ -225,4 +225,6 @@ DynamicSegmentListComponent.propTypes = {
   }).isRequired,
 };
 
+DynamicSegmentListComponent.displayName = 'DynamicSegmentList';
+
 export const DynamicSegmentList = withRouter(DynamicSegmentListComponent);

mailpoet/assets/js/src/segments/form.jsx

@@ -78,4 +78,6 @@ SegmentForm.propTypes = {
   }).isRequired,
 };
 
+SegmentForm.displayName = 'SegmentForm';
+
 export { SegmentForm };

mailpoet/assets/js/src/segments/list.jsx

@@ -374,4 +374,6 @@ SegmentListComponent.propTypes = {
   }).isRequired,
 };
 
+SegmentListComponent.displayName = 'SegmentList';
+
 export const SegmentList = withRouter(SegmentListComponent);

mailpoet/assets/js/src/segments/segments.jsx

@@ -8,6 +8,7 @@ import { SegmentList } from 'segments/list.jsx';
 import { SegmentForm } from 'segments/form.jsx';
 import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
 import { Notices } from 'notices/notices.jsx';
+import { withBoundary } from 'common';
 import { Editor } from './dynamic/editor';
 import { DynamicSegmentList } from './dynamic/list.jsx';
 import { ListHeading } from './heading';
@@ -39,6 +40,8 @@ function Tabs() {
   );
 }
 
+Tabs.displayName = 'SegmentTabs';
+
 function App() {
   return (
     <GlobalContext.Provider value={useGlobalContextValue(window)}>
@@ -46,12 +49,12 @@ function App() {
         <Notices />
         <Switch>
           <Route exact path="/" render={() => <Redirect to="/lists" />} />
-          <Route path="/new" component={SegmentForm} />
-          <Route path="/edit/:id" component={SegmentForm} />
-          <Route path="/new-segment" component={Editor} />
-          <Route path="/edit-segment/:id" component={Editor} />
-          <Route path="/segments/(.*)?" component={Tabs} />
-          <Route path="/lists/(.*)?" component={Tabs} />
+          <Route path="/new" render={withBoundary(SegmentForm)} />
+          <Route path="/edit/:id" render={withBoundary(SegmentForm)} />
+          <Route path="/new-segment" render={withBoundary(Editor)} />
+          <Route path="/edit-segment/:id" render={withBoundary(Editor)} />
+          <Route path="/segments/(.*)?" render={withBoundary(Tabs)} />
+          <Route path="/lists/(.*)?" render={withBoundary(Tabs)} />
         </Switch>
       </HashRouter>
     </GlobalContext.Provider>