[MM-66839] (#9365)

* [MM-66839]

* i18n-extract

* Address feedback

* Fix lint

app/components/markdown/error_boundary.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import {Text} from 'react-native';
 
+import {logError} from '@utils/log';
 import {makeStyleSheetFromTheme} from '@utils/theme';
 import {typography} from '@utils/typography';
 
@@ -33,7 +34,8 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
         this.state = {hasError: false};
     }
 
-    componentDidCatch() {
+    componentDidCatch(error: unknown) {
+        logError('Error in ErrorBoundary:', error);
         this.setState({hasError: true});
     }
 

app/components/markdown/markdown.tsx

@@ -571,7 +571,7 @@ const Markdown = ({
         return (
             <FormattedText
                 id='markdown.max_nodes.error'
-                defaultMessage='This message is too long to by shown fully on a mobile device. Please view it on desktop or contact an admin to increase this limit.'
+                defaultMessage='This message is too long to be shown fully on a mobile device. Please view it on desktop or contact an admin to increase this limit.'
                 style={styles}
                 testID='max_nodes_warning'
             />

app/components/markdown/markdown_table/index.tsx

@@ -219,9 +219,15 @@ class MarkdownTable extends PureComponent<MarkdownTableProps, MarkdownTableState
         const tableStyle = this.getTableStyle(isFullView);
 
         let rows = React.Children.toArray(this.props.children) as React.ReactElement[];
+
+        if (!rows.length) {
+            return null;
+        }
+
         if (isPreview) {
             const {maxPreviewColumns} = this.state;
             const prevRowLength = rows.length;
+
             const prevColLength = React.Children.toArray(rows[0].props.children).length;
 
             rows = rows.slice(0, maxPreviewColumns).map((row) => {

app/components/post_list/post/body/index.tsx

@@ -2,11 +2,13 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback, useMemo, useState} from 'react';
+import {useIntl} from 'react-intl';
 import {type LayoutChangeEvent, type StyleProp, View, type ViewStyle} from 'react-native';
 
 import Files from '@components/files';
 import FormattedText from '@components/formatted_text';
 import JumboEmoji from '@components/jumbo_emoji';
+import ErrorBoundary from '@components/markdown/error_boundary';
 import {Screens} from '@constants';
 import {THREAD} from '@constants/screens';
 import StatusUpdatePost from '@playbooks/components/status_update_post';
@@ -91,6 +93,7 @@ const Body = ({
     isCRTEnabled, isEphemeral, isFirstReply, isJumboEmoji, isLastReply, isPendingOrFailed, isPostAcknowledgementEnabled, isPostAddChannelMember,
     location, post, searchPatterns, showAddReaction, theme,
 }: BodyProps) => {
+    const intl = useIntl();
     const style = getStyleSheet(theme);
     const isEdited = postEdited(post);
     const isFailed = isPostFailed(post);
@@ -229,19 +232,24 @@ const Body = ({
     }
 
     return (
-        <View
-            style={style.messageContainerWithReplyBar}
-            onLayout={onLayout}
+        <ErrorBoundary
+            error={intl.formatMessage({id: 'post.error', defaultMessage: 'There has been an error rendering this post.'})}
+            theme={theme}
         >
-            <View style={replyBarStyle}/>
-            {body}
-            {isFailed &&
-            <Failed
-                post={post}
-                theme={theme}
-            />
-            }
-        </View>
+            <View
+                style={style.messageContainerWithReplyBar}
+                onLayout={onLayout}
+            >
+                <View style={replyBarStyle}/>
+                {body}
+                {isFailed &&
+                <Failed
+                    post={post}
+                    theme={theme}
+                />
+                }
+            </View>
+        </ErrorBoundary>
     );
 };
 

app/screens/table/index.tsx

@@ -2,12 +2,16 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback} from 'react';
-import {Platform, ScrollView, StyleSheet, View} from 'react-native';
+import {useIntl} from 'react-intl';
+import {Platform, ScrollView, Text, View} from 'react-native';
 import {SafeAreaView} from 'react-native-safe-area-context';
 
+import {useTheme} from '@context/theme';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
 import SecurityManager from '@managers/security_manager';
 import {popTopScreen} from '@screens/navigation';
+import {makeStyleSheetFromTheme} from '@utils/theme';
+import {typography} from '@utils/typography';
 
 import type {AvailableScreens} from '@typings/screens/navigation';
 
@@ -18,7 +22,7 @@ type Props = {
     width: number;
 }
 
-const styles = StyleSheet.create({
+const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => ({
     container: {
         flex: 1,
     },
@@ -35,18 +39,40 @@ const styles = StyleSheet.create({
             },
         }),
     },
-});
+    noTableText: {
+        color: theme.dndIndicator,
+        ...typography('Body', 200, 'Regular'),
+    },
+    noTableContainer: {
+        padding: 24,
+    },
+}));
 
 const Table = ({componentId, renderAsFlex, renderRows, width}: Props) => {
+    const theme = useTheme();
+    const styles = getStyleSheet(theme);
     const content = renderRows(true);
     const viewStyle = renderAsFlex ? styles.displayFlex : {width};
 
+    const intl = useIntl();
+
     const close = useCallback(() => {
         popTopScreen(componentId);
     }, [componentId]);
 
     useAndroidHardwareBackHandler(componentId, close);
 
+    if (!content) {
+        return (
+            <View
+                style={styles.noTableContainer}
+                nativeID={SecurityManager.getShieldScreenId(componentId)}
+            >
+                <Text style={styles.noTableText}>{intl.formatMessage({id: 'table.cannot_display_table', defaultMessage: 'Cannot display table'})}</Text>
+            </View>
+        );
+    }
+
     if (Platform.OS === 'android') {
         return (
             <View

assets/base/i18n/en.json

@@ -522,7 +522,7 @@
   "magic_link.already_logged_in_error.ok": "OK",
   "magic_link.already_logged_in_error.title": "Already logged in",
   "markdown.latex.error": "Latex render error",
-  "markdown.max_nodes.error": "This message is too long to by shown fully on a mobile device. Please view it on desktop or contact an admin to increase this limit.",
+  "markdown.max_nodes.error": "This message is too long to be shown fully on a mobile device. Please view it on desktop or contact an admin to increase this limit.",
   "markdown.parse_error": "An error occurred while parsing this text",
   "markdown.render_error": "An error occurred while rendering this text",
   "mentions.empty.paragraph": "You'll see messages here when someone mentions you or uses terms you're monitoring.",
@@ -1207,6 +1207,7 @@
   "post_priority.picker.label.standard": "Standard",
   "post_priority.picker.label.urgent": "Urgent",
   "post_priority.picker.title": "Message priority",
+  "post.error": "There has been an error rendering this post.",
   "post.options.title": "Options",
   "post.reactions.title": "Reactions",
   "postList.scrollToBottom.newMessages": "New messages",
@@ -1470,6 +1471,7 @@
   "system_notice.remind_me": "Remind Me Later",
   "system_notice.title.gm_as_dm": "Updates to Group Messages",
   "system_noticy.body.gm_as_dm": "You will now be notified for all activity in your group messages along with a notification badge for every new message.\n\nYou can configure this in notification preferences for each group message.",
+  "table.cannot_display_table": "Cannot display table",
   "team_list.no_other_teams.description": "To join another team, ask a Team Admin for an invitation, or create your own team.",
   "team_list.no_other_teams.title": "No additional teams to join",
   "terms_of_service.acceptButton": "Accept",