Add error boundary to Retention warnings

apps/meteor/client/components/InfoPanel/RetentionPolicyCallout.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 import { usePruneWarningMessage } from '../../hooks/usePruneWarningMessage';
+import { withErrorBoundary } from '../withErrorBoundary';
 
 const RetentionPolicyCallout = ({ room }: { room: IRoom }) => {
 	const message = usePruneWarningMessage(room);
@@ -18,4 +19,4 @@ const RetentionPolicyCallout = ({ room }: { room: IRoom }) => {
 	);
 };
 
-export default RetentionPolicyCallout;
+export default withErrorBoundary(RetentionPolicyCallout);

apps/meteor/client/components/withErrorBoundary.tsx

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode, ComponentProps } from 'react';
+import React from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+
+function withErrorBoundary<T extends object>(Component: ComponentType<T>, fallback: ReactNode = null) {
+	const WrappedComponent = function (props: ComponentProps<typeof Component>) {
+		return (
+			<ErrorBoundary fallback={<>{fallback}</>}>
+				<Component {...props} />
+			</ErrorBoundary>
+		);
+	};
+
+	WrappedComponent.displayName = `withErrorBoundary(${Component.displayName ?? Component.name ?? 'Component'})`;
+
+	return WrappedComponent;
+}
+
+export { withErrorBoundary };

apps/meteor/client/views/room/body/RetentionPolicyWarning.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from '@rocket.chat/ui-contexts';
 import type { ReactElement } from 'react';
 import React from 'react';
 
+import { withErrorBoundary } from '../../../components/withErrorBoundary';
 import { usePruneWarningMessage } from '../../../hooks/usePruneWarningMessage';
 
 const RetentionPolicyWarning = ({ room }: { room: IRoom }): ReactElement => {
@@ -23,4 +24,4 @@ const RetentionPolicyWarning = ({ room }: { room: IRoom }): ReactElement => {
 	);
 };
 
-export default RetentionPolicyWarning;
+export default withErrorBoundary(RetentionPolicyWarning);