From d27c56af88d2c30f68a0f5b6fa3f1d272c2c6826 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Espino=20Garc=C3=ADa?= <larkox@gmail.com>
Date: Tue, 6 May 2025 09:48:36 +0200
Subject: [PATCH] Add error boundary to latex code (#8822)

* Add error boundary to latex code

* Add test
---
 app/screens/latex/index.tsx      | 38 +++++++++++++++++----------
 app/screens/latex/latex.test.tsx | 44 ++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 14 deletions(-)
 create mode 100644 app/screens/latex/latex.test.tsx

diff --git a/app/screens/latex/index.tsx b/app/screens/latex/index.tsx
index b4e8fe730..002ef95a4 100644
--- a/app/screens/latex/index.tsx
+++ b/app/screens/latex/index.tsx
@@ -2,9 +2,11 @@
 // See LICENSE.txt for license information.
 
 import React, {useCallback} from 'react';
+import {useIntl} from 'react-intl';
 import {Platform, ScrollView, Text, View} from 'react-native';
 import {SafeAreaView, type Edge} from 'react-native-safe-area-context';
 
+import ErrorBoundary from '@components/markdown/error_boundary';
 import MathView from '@components/math_view';
 import {useTheme} from '@context/theme';
 import useAndroidHardwareBackHandler from '@hooks/android_back_handler';
@@ -60,6 +62,7 @@ const getStyleSheet = makeStyleSheetFromTheme((theme: Theme) => {
 });
 
 const Latex = ({componentId, content}: Props) => {
+    const intl = useIntl();
     const theme = useTheme();
     const style = getStyleSheet(theme);
     const lines = splitLatexCodeInLines(content);
@@ -93,20 +96,27 @@ const Latex = ({componentId, content}: Props) => {
                     contentContainerStyle={style.scrollCode}
                     horizontal={true}
                 >
-                    {lines.map((latexCode) => (
-                        <View
-                            style={style.code}
-                            key={latexCode}
-                        >
-                            <MathView
-                                math={latexCode}
-                                onError={onErrorMessage}
-                                renderError={onRenderErrorMessage}
-                                resizeMode={'cover'}
-                                style={style.mathStyle}
-                            />
-                        </View>
-                    ))}
+                    <ErrorBoundary
+                        error={intl.formatMessage({id: 'markdown.latex.error', defaultMessage: 'Latex render error'})}
+                        theme={theme}
+                    >
+                        <>
+                            {lines.map((latexCode) => (
+                                <View
+                                    style={style.code}
+                                    key={latexCode}
+                                >
+                                    <MathView
+                                        math={latexCode}
+                                        onError={onErrorMessage}
+                                        renderError={onRenderErrorMessage}
+                                        resizeMode={'cover'}
+                                        style={style.mathStyle}
+                                    />
+                                </View>
+                            ))}
+                        </>
+                    </ErrorBoundary>
                 </ScrollView>
             </ScrollView>
         </SafeAreaView>
diff --git a/app/screens/latex/latex.test.tsx b/app/screens/latex/latex.test.tsx
new file mode 100644
index 000000000..9f6aa049e
--- /dev/null
+++ b/app/screens/latex/latex.test.tsx
@@ -0,0 +1,44 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import {screen} from '@testing-library/react-native';
+import React from 'react';
+
+import MathView from '@components/math_view';
+import {renderWithIntl} from '@test/intl-test-helper';
+
+import Latex from './index';
+
+import type {AvailableScreens} from '@typings/screens/navigation';
+
+// Mock the MathView component to simulate errors
+jest.mock('@components/math_view', () => {
+    return {
+        __esModule: true,
+        default: jest.fn(() => null),
+    };
+});
+
+describe('Latex', () => {
+    const baseProps = {
+        componentId: 'test-screen' as AvailableScreens,
+        content: '\\frac{1}{2}',
+    };
+
+    const renderComponent = (props = {}) => {
+        return renderWithIntl(
+            <Latex
+                {...baseProps}
+                {...props}
+            />,
+        );
+    };
+
+    it('should render error message when MathView throws an error', () => {
+        jest.mocked(MathView).mockImplementation(() => {
+            throw new Error('Test error');
+        });
+        renderComponent();
+        expect(screen.getByText('Latex render error')).toBeTruthy();
+    });
+});