Error boundary integration (#490)

* added the error boundary UI

* added the docs link

* wording change

* changed the link

Author: kartikpersistent

frontend/src/App.tsx

@@ -2,22 +2,27 @@ import './App.css';
 import '@neo4j-ndl/base/lib/neo4j-ds-styles.css';
 import ThemeWrapper from './context/ThemeWrapper';
 import QuickStarter from './components/QuickStarter';
-
 import { GoogleOAuthProvider } from '@react-oauth/google';
 import { APP_SOURCES } from './utils/Constants';
+import ErrorBoundary from './components/UI/ErrroBoundary';
+
 const App: React.FC = () => {
   return (
     <>
       {APP_SOURCES != undefined && APP_SOURCES.includes('gcs') ? (
-        <GoogleOAuthProvider clientId={process.env.GOOGLE_CLIENT_ID as string}>
+        <ErrorBoundary>
+          <GoogleOAuthProvider clientId={process.env.GOOGLE_CLIENT_ID as string}>
+            <ThemeWrapper>
+              <QuickStarter />
+            </ThemeWrapper>
+          </GoogleOAuthProvider>
+        </ErrorBoundary>
+      ) : (
+        <ErrorBoundary>
           <ThemeWrapper>
             <QuickStarter />
           </ThemeWrapper>
-        </GoogleOAuthProvider>
-      ) : (
-        <ThemeWrapper>
-          <QuickStarter />
-        </ThemeWrapper>
+        </ErrorBoundary>
       )}
     </>
   );

frontend/src/components/ChatBot/Info/InfoModal.tsx

@@ -175,7 +175,6 @@ const InfoModal: React.FC<chatInfoMessage> = ({ sources, model, total_tokens, re
                                   </Typography>
                                 </HoverableLink>
                               </TextLink>
-
                             </div>
                           </>
                         )}

frontend/src/components/Content.tsx

@@ -228,7 +228,6 @@ const Content: React.FC<ContentProps> = ({
     }
   };
 
- 
   const handleGenerateGraph = (allowLargeFiles: boolean, selectedFilesFromAllfiles: CustomFile[]) => {
     setIsLargeFile(false);
     const data = [];
@@ -268,8 +267,9 @@ const Content: React.FC<ContentProps> = ({
   const handleOpenGraphClick = () => {
     const bloomUrl = process.env.BLOOM_URL;
     const uriCoded = userCredentials?.uri.replace(/:\d+$/, '');
-    const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${userCredentials?.port ?? '7687'
-      }`;
+    const connectURL = `${uriCoded?.split('//')[0]}//${userCredentials?.userName}@${uriCoded?.split('//')[1]}:${
+      userCredentials?.port ?? '7687'
+    }`;
     const encodedURL = encodeURIComponent(connectURL);
     const replacedUrl = bloomUrl?.replace('{CONNECT_URL}', encodedURL);
     window.open(replacedUrl, '_blank');
@@ -279,10 +279,10 @@ const Content: React.FC<ContentProps> = ({
     isLeftExpanded && isRightExpanded
       ? 'contentWithExpansion'
       : isRightExpanded
-        ? 'contentWithChatBot'
-        : !isLeftExpanded && !isRightExpanded
-          ? 'w-[calc(100%-128px)]'
-          : 'contentWithDropzoneExpansion';
+      ? 'contentWithChatBot'
+      : !isLeftExpanded && !isRightExpanded
+      ? 'w-[calc(100%-128px)]'
+      : 'contentWithDropzoneExpansion';
 
   const handleGraphView = () => {
     setOpenGraphView(true);
@@ -585,8 +585,9 @@ const Content: React.FC<ContentProps> = ({
           }}
         ></FileTable>
         <Flex
-          className={`${!isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
-            } p-2.5 absolute bottom-4 mt-1.5 self-start`}
+          className={`${
+            !isLeftExpanded && !isRightExpanded ? 'w-[calc(100%-128px)]' : 'w-full'
+          } p-2.5 absolute bottom-4 mt-1.5 self-start`}
           justifyContent='space-between'
           flexDirection='row'
         >

frontend/src/components/UI/ErrroBoundary.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Banner} from '@neo4j-ndl/react';
+
+export default class ErrorBoundary extends React.Component<any, any> {
+  state = { hasError: false, errorMessage: '' };
+
+  static getDerivedStateFromError(_error: unknown) {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    this.setState({ ...this.state, errorMessage: error.message });
+    console.log({ error });
+    console.log({ errorInfo });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className='n-size-full n-flex n-flex-col n-items-center n-justify-center n-rounded-md n-bg-palette-neutral-bg-weak n-box-border'>
+          <Banner
+            icon
+            type='info'
+            description={
+              this.state.errorMessage === 'Missing required parameter client_id.'
+                ? 'Please Provide The Google Client ID For GCS Source'
+                : 'Sorry there was a problem loading this page'
+            }
+            title='Something went wrong'
+            floating
+            className='mt-8'
+            actions={[
+              {
+                label: 'Documentation',
+                href: 'https://github.com/neo4j-labs/llm-graph-builder',
+                target: '_blank',
+              },
+            ]}
+          ></Banner>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}

frontend/src/utils/Constants.ts

@@ -39,8 +39,8 @@ export const llms =
 export const defaultLLM = llms?.includes('gpt-3.5')
   ? 'gpt-3.5'
   : llms?.includes('gemini-1.0-pro')
-    ? 'gemini-1.0-pro'
-    : 'diffbot';
+  ? 'gemini-1.0-pro'
+  : 'diffbot';
 
 export const chunkSize = process.env.CHUNK_SIZE ? parseInt(process.env.CHUNK_SIZE) : 1 * 1024 * 1024;
 export const timeperpage = process.env.TIME_PER_PAGE ? parseInt(process.env.TIME_PER_PAGE) : 50;
@@ -146,6 +146,4 @@ export const ChatModeOptions = [
   { Icon: 'abc', value: 'graph+vector' },
 ];
 
-
 export const taskParam: string[] = ['update_similarity_graph', 'create_fulltext_index'];
-

frontend/src/utils/Utils.ts

@@ -22,8 +22,7 @@ export const wikiValidation = (url: string) => {
 export const webLinkValidation = (url: string) => {
   return (
     url.trim() != '' &&
-    /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g.test(url) !=
-      false
+    /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_.~#?&//=]*)/g.test(url) != false
   );
 };
 export const youtubeLinkValidation = (url: string) => {