bug-fix: Add fallback logic on template rendering error (#1017)

Fixes: [<TICKET_ID>](https://sendbird.atlassian.net/browse/<TICKET_ID>)

<img width="460" alt="Screenshot 2024-03-15 at 4 06 48 PM"
src="https://github.com/sendbird/sendbird-uikit-react/assets/16806397/b59d4560-2a2f-4ca4-a257-2af18d9e889f">
<img width="478" alt="Screenshot 2024-03-15 at 4 06 34 PM"
src="https://github.com/sendbird/sendbird-uikit-react/assets/16806397/63b3dc59-e333-4e2a-b93e-480ae1564d71">


### Changelogs
-

Author: chohongm

src/ui/MessageTemplate/messageTemplateErrorBoundary.tsx

@@ -0,0 +1,36 @@
+import { Component, ErrorInfo, ReactNode } from 'react';
+import { LoggerInterface } from '../../lib/Logger';
+
+interface ErrorBoundaryProps {
+  children: ReactNode;
+  fallbackMessage: ReactNode;
+  logger?: LoggerInterface;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+export class MessageTemplateErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError() {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.props.logger?.error('Error caught by ErrorBoundary:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallbackMessage;
+    }
+    return this.props.children;
+  }
+}
+
+export default MessageTemplateErrorBoundary;

src/ui/TemplateMessageItemBody/index.tsx

@@ -12,6 +12,7 @@ import useSendbirdStateContext from '../../hooks/useSendbirdStateContext';
 import { ProcessedMessageTemplate, WaitingTemplateKeyData } from '../../lib/dux/appInfo/initialState';
 import FallbackTemplateMessageItemBody from './FallbackTemplateMessageItemBody';
 import LoadingTemplateMessageItemBody from './LoadingTemplateMessageItemBody';
+import MessageTemplateErrorBoundary from '../MessageTemplate/messageTemplateErrorBoundary';
 
 const TEMPLATE_FETCH_RETRY_BUFFER_TIME_IN_MILLIES = 500; // It takes about 450ms for isError update
 
@@ -48,6 +49,9 @@ export function TemplateMessageItemBody({
   isByMe = false,
   theme = 'light',
 }: TemplateMessageItemBodyProps): ReactElement {
+  const store = useSendbirdStateContext();
+  const logger = store?.config?.logger;
+
   const templateData: MessageTemplateData | undefined = message.extendedMessagePayload?.['template'] as MessageTemplateData;
   if (!templateData?.key) {
     return <FallbackTemplateMessageItemBody className={className} message={message} isByMe={isByMe} />;
@@ -139,7 +143,12 @@ export function TemplateMessageItemBody({
       isByMe ? 'outgoing' : 'incoming',
       'sendbird-template-message-item-body',
     ])}>
-      <MessageTemplateWrapper message={message} templateItems={filledMessageTemplateItems} />
+      <MessageTemplateErrorBoundary
+        fallbackMessage={<FallbackTemplateMessageItemBody className={className} message={message} isByMe={isByMe}/>}
+        logger={logger}
+      >
+        <MessageTemplateWrapper message={message} templateItems={filledMessageTemplateItems}/>
+      </MessageTemplateErrorBoundary>
     </div>
   );
 }