fix: connectivity-related issues [LW 12346] (#1743)

* fix: skip logging sentry connectivity error * fix: add error boundary catching rendering errors
input-output-hk · Feb 27, 2025 · f5127ea · f5127ea
1 parent 6c507c8
commit f5127ea
Show file tree

Hide file tree

Showing 17 changed files with 168 additions and 108 deletions.
diff --git a/apps/browser-extension-wallet/src/components/Crash/index.ts b/apps/browser-extension-wallet/src/components/Crash/index.ts
diff --git a/...et/src/components/Crash/Crash.module.scss → ...omponents/ErrorBoundary/Crash.module.scss b/...et/src/components/Crash/Crash.module.scss → ...omponents/ErrorBoundary/Crash.module.scss
diff --git a/...ion-wallet/src/components/Crash/Crash.tsx → ...et/src/components/ErrorBoundary/Crash.tsx b/...ion-wallet/src/components/Crash/Crash.tsx → ...et/src/components/ErrorBoundary/Crash.tsx
diff --git a/apps/browser-extension-wallet/src/components/ErrorBoundary/ErrorBoundary.tsx b/apps/browser-extension-wallet/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,31 @@
+import React, { Component, ErrorInfo, ReactElement } from 'react';
+import { logger } from '@lace/common';
+import { removePreloaderIfExists } from '@utils/remove-reloader-if-exists';
+import { Crash } from './Crash';
+
+type ErrorBoundaryProps = {
+  children: ReactElement;
+};
+type ErrorBoundaryState = {
+  error?: Error;
+};
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { error };
+  }
+
+  state: ErrorBoundaryState = {};
+
+  componentDidCatch(error: Error, info: ErrorInfo): void {
+    removePreloaderIfExists();
+    logger.error('Caught by Error Boundary:', error, info.componentStack);
+  }
+
+  render(): ReactElement {
+    if (this.state.error) {
+      return <Crash />;
+    }
+    return this.props.children;
+  }
+}
diff --git a/apps/browser-extension-wallet/src/components/ErrorBoundary/index.ts b/apps/browser-extension-wallet/src/components/ErrorBoundary/index.ts
@@ -0,0 +1,2 @@
+export * from './Crash';
+export { ErrorBoundary } from './ErrorBoundary';
diff --git a/apps/browser-extension-wallet/src/dapp-connector.tsx b/apps/browser-extension-wallet/src/dapp-connector.tsx
@@ -19,6 +19,7 @@ import { getBackgroundStorage } from '@lib/scripts/background/storage';
 import { NamiDappConnector } from './views/nami-mode/indexInternal';
 import { storage } from 'webextension-polyfill';
 import { TxWitnessRequestProvider } from '@providers/TxWitnessRequestProvider';
+import { ErrorBoundary } from '@components/ErrorBoundary';
 
 const App = (): React.ReactElement => {
   const [mode, setMode] = useState<'lace' | 'nami' | undefined>();
@@ -44,33 +45,35 @@ const App = (): React.ReactElement => {
   }, []);
 
   return (
-    <BackgroundServiceAPIProvider>
-      <AppSettingsProvider>
-        <DatabaseProvider>
-          <StoreProvider appMode={APP_MODE_POPUP}>
-            <CurrencyStoreProvider>
-              <HashRouter>
-                <PostHogClientProvider>
-                  <AnalyticsProvider>
-                    <ThemeProvider>
-                      <ExternalLinkOpenerProvider>
-                        <AddressesDiscoveryOverlay>
-                          <UIThemeProvider>
-                            <TxWitnessRequestProvider>
-                              {!mode ? <></> : mode === 'nami' ? <NamiDappConnector /> : <DappConnectorView />}
-                            </TxWitnessRequestProvider>
-                          </UIThemeProvider>
-                        </AddressesDiscoveryOverlay>
-                      </ExternalLinkOpenerProvider>
-                    </ThemeProvider>
-                  </AnalyticsProvider>
-                </PostHogClientProvider>
-              </HashRouter>
-            </CurrencyStoreProvider>
-          </StoreProvider>
-        </DatabaseProvider>
-      </AppSettingsProvider>
-    </BackgroundServiceAPIProvider>
+    <ErrorBoundary>
+      <BackgroundServiceAPIProvider>
+        <AppSettingsProvider>
+          <DatabaseProvider>
+            <StoreProvider appMode={APP_MODE_POPUP}>
+              <CurrencyStoreProvider>
+                <HashRouter>
+                  <PostHogClientProvider>
+                    <AnalyticsProvider>
+                      <ThemeProvider>
+                        <ExternalLinkOpenerProvider>
+                          <AddressesDiscoveryOverlay>
+                            <UIThemeProvider>
+                              <TxWitnessRequestProvider>
+                                {!mode ? <></> : mode === 'nami' ? <NamiDappConnector /> : <DappConnectorView />}
+                              </TxWitnessRequestProvider>
+                            </UIThemeProvider>
+                          </AddressesDiscoveryOverlay>
+                        </ExternalLinkOpenerProvider>
+                      </ThemeProvider>
+                    </AnalyticsProvider>
+                  </PostHogClientProvider>
+                </HashRouter>
+              </CurrencyStoreProvider>
+            </StoreProvider>
+          </DatabaseProvider>
+        </AppSettingsProvider>
+      </BackgroundServiceAPIProvider>
+    </ErrorBoundary>
   );
 };
 

diff --git a/apps/browser-extension-wallet/src/features/nami-migration/NamiMigration.tsx b/apps/browser-extension-wallet/src/features/nami-migration/NamiMigration.tsx
@@ -10,7 +10,7 @@ import { Portal } from '@views/browser/features/wallet-setup/components/Portal';
 import { useAnalyticsContext } from '@providers';
 import { postHogNamiMigrationActions } from '@providers/AnalyticsProvider/analyticsTracker';
 import { useFatalError } from '@hooks/useFatalError';
-import { Crash } from '@components/Crash';
+import { Crash } from '@components/ErrorBoundary';
 
 const urlPath = walletRoutePaths.namiMigration;
 

diff --git a/apps/browser-extension-wallet/src/lib/scripts/background/onError.ts b/apps/browser-extension-wallet/src/lib/scripts/background/onError.ts
@@ -9,6 +9,15 @@ const GATEWAY_TIMEOUT_STATUS_CODE = 503;
 const UNAUTHORIZED_STATUS_CODE = 401;
 const NOT_FOUND_STATUS_CODE = 404;
 
+// eslint-disable-next-line unicorn/no-null
+let sentryUrl: string | null = '';
+const sentryUrlExtractionRegex = /https:\/\/[^@]+@([^/]+).*/;
+if (sentryUrlExtractionRegex.test(process.env.SENTRY_DSN)) {
+  sentryUrl = process.env.SENTRY_DSN.replace(sentryUrlExtractionRegex, 'https://$1');
+}
+
+const isSentryRequest = (url: string) => !!sentryUrl && url.startsWith(sentryUrl);
+
 const handleProviderServerErrors = (data: WebRequest.OnCompletedDetailsType) => {
   if (data?.type === 'xmlhttprequest' && runtime.getURL('').startsWith(data.initiator)) {
     const statusCodeQualifiedAsFailure =
@@ -46,7 +55,9 @@ const handleConnectionIssues = async (error: WebRequest.OnErrorOccurredDetailsTy
   )
     return;
 
-  logger.debug('xmlhttprequest:net::ERR_INTERNET_DISCONNECTED', error);
+  if (!isSentryRequest(error.url)) {
+    logger.error('xmlhttprequest:net::ERR_INTERNET_DISCONNECTED', error);
+  }
 
   requestMessage$.next({ type: MessageTypes.HTTP_CONNECTION, data: { connected: false } });
   if (!webRequest.onCompleted.hasListener(handleRequests)) {

diff --git a/apps/browser-extension-wallet/src/popup.tsx b/apps/browser-extension-wallet/src/popup.tsx
@@ -28,6 +28,7 @@ import { NamiMigrationGuard } from './features/nami-migration/NamiMigrationGuard
 import { createNonBackgroundMessenger } from '@cardano-sdk/web-extension';
 import { logger } from '@lace/common';
 import { AppVersionGuard } from './utils/AppVersionGuard';
+import { ErrorBoundary } from '@components/ErrorBoundary';
 
 const App = (): React.ReactElement => {
   const [mode, setMode] = useState<'lace' | 'nami'>();
@@ -51,37 +52,39 @@ const App = (): React.ReactElement => {
   }, [mode]);
 
   return (
-    <BackgroundServiceAPIProvider>
-      <AppSettingsProvider>
-        <DatabaseProvider>
-          <StoreProvider appMode={APP_MODE_POPUP}>
-            <CurrencyStoreProvider>
-              <HashRouter>
-                <PostHogClientProvider>
-                  <AnalyticsProvider>
-                    <ThemeProvider>
-                      <ExternalLinkOpenerProvider>
-                        <MigrationContainer appMode={APP_MODE_POPUP}>
-                          <DataCheckContainer appMode={APP_MODE_POPUP}>
-                            <AddressesDiscoveryOverlay>
-                              <NamiMigrationGuard>
-                                <BackgroundPageProvider>
-                                  <AppVersionGuard>{mode === 'nami' ? <NamiPopup /> : <PopupView />}</AppVersionGuard>
-                                </BackgroundPageProvider>
-                              </NamiMigrationGuard>
-                            </AddressesDiscoveryOverlay>
-                          </DataCheckContainer>
-                        </MigrationContainer>
-                      </ExternalLinkOpenerProvider>
-                    </ThemeProvider>
-                  </AnalyticsProvider>
-                </PostHogClientProvider>
-              </HashRouter>
-            </CurrencyStoreProvider>
-          </StoreProvider>
-        </DatabaseProvider>
-      </AppSettingsProvider>
-    </BackgroundServiceAPIProvider>
+    <ErrorBoundary>
+      <BackgroundServiceAPIProvider>
+        <AppSettingsProvider>
+          <DatabaseProvider>
+            <StoreProvider appMode={APP_MODE_POPUP}>
+              <CurrencyStoreProvider>
+                <HashRouter>
+                  <PostHogClientProvider>
+                    <AnalyticsProvider>
+                      <ThemeProvider>
+                        <ExternalLinkOpenerProvider>
+                          <MigrationContainer appMode={APP_MODE_POPUP}>
+                            <DataCheckContainer appMode={APP_MODE_POPUP}>
+                              <AddressesDiscoveryOverlay>
+                                <NamiMigrationGuard>
+                                  <BackgroundPageProvider>
+                                    <AppVersionGuard>{mode === 'nami' ? <NamiPopup /> : <PopupView />}</AppVersionGuard>
+                                  </BackgroundPageProvider>
+                                </NamiMigrationGuard>
+                              </AddressesDiscoveryOverlay>
+                            </DataCheckContainer>
+                          </MigrationContainer>
+                        </ExternalLinkOpenerProvider>
+                      </ThemeProvider>
+                    </AnalyticsProvider>
+                  </PostHogClientProvider>
+                </HashRouter>
+              </CurrencyStoreProvider>
+            </StoreProvider>
+          </DatabaseProvider>
+        </AppSettingsProvider>
+      </BackgroundServiceAPIProvider>
+    </ErrorBoundary>
   );
 };
 

diff --git a/apps/browser-extension-wallet/src/routes/DappConnectorView.tsx b/apps/browser-extension-wallet/src/routes/DappConnectorView.tsx
@@ -24,9 +24,10 @@ import { tabs } from 'webextension-polyfill';
 import { useTranslation } from 'react-i18next';
 import { DappSignDataSuccess } from '@src/features/dapp/components/DappSignDataSuccess';
 import { DappSignDataFail } from '@src/features/dapp/components/DappSignDataFail';
-import { Crash } from '@components/Crash';
+import { Crash } from '@components/ErrorBoundary';
 import { useFatalError } from '@hooks/useFatalError';
 import { POPUP_WINDOW } from '@src/utils/constants';
+import { removePreloaderIfExists } from '@utils/remove-reloader-if-exists';
 
 dayjs.extend(duration);
 
@@ -71,7 +72,7 @@ export const DappConnectorView = (): React.ReactElement => {
   const fatalError = useFatalError();
   useEffect(() => {
     if (!isLoading || fatalError) {
-      document.querySelector('#preloader')?.remove();
+      removePreloaderIfExists();
     }
   }, [isLoading, fatalError]);
 

diff --git a/apps/browser-extension-wallet/src/routes/PopupView.tsx b/apps/browser-extension-wallet/src/routes/PopupView.tsx
@@ -13,7 +13,8 @@ import { MainLoader } from '@components/MainLoader';
 import { useAppInit } from '@hooks';
 import { ILocalStorage } from '@src/types';
 import { useFatalError } from '@hooks/useFatalError';
-import { Crash } from '@components/Crash';
+import { Crash } from '@components/ErrorBoundary';
+import { removePreloaderIfExists } from '@utils/remove-reloader-if-exists';
 
 dayjs.extend(duration);
 
@@ -64,7 +65,7 @@ export const PopupView = (): React.ReactElement => {
   );
   useEffect(() => {
     if (isLoaded || fatalError) {
-      document.querySelector('#preloader')?.remove();
+      removePreloaderIfExists();
     }
   }, [isLoaded, fatalError]);
 

diff --git a/apps/browser-extension-wallet/src/utils/remove-reloader-if-exists.ts b/apps/browser-extension-wallet/src/utils/remove-reloader-if-exists.ts
@@ -0,0 +1,3 @@
+export const removePreloaderIfExists = (): void => {
+  document.querySelector('#preloader')?.remove();
+};
diff --git a/...r-extension-wallet/src/views/browser-view/features/activity/components/ActivityLayout.tsx b/...r-extension-wallet/src/views/browser-view/features/activity/components/ActivityLayout.tsx
@@ -18,7 +18,7 @@ import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
 import { useWalletActivitiesPaginated } from '@hooks/useWalletActivities';
 
-const loadMoreDebounce = 300;
+const loadMoreDebounceTime = 300;
 
 export const ActivityLayout = (): ReactElement => {
   const { t } = useTranslation();
@@ -72,7 +72,7 @@ export const ActivityLayout = (): ReactElement => {
 
   const isLoadingFirstTime = isNil(total);
 
-  const debouncedLoadMore = useMemo(() => debounce(loadMore, loadMoreDebounce), [loadMore]);
+  const debouncedLoadMore = useMemo(() => debounce(loadMore, loadMoreDebounceTime), [loadMore]);
 
   return (
     <Layout>

diff --git a/apps/browser-extension-wallet/src/views/browser-view/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/index.tsx
@@ -29,43 +29,46 @@ import { PostHogClientProvider } from '@providers/PostHogClientProvider';
 import { AddressesDiscoveryOverlay } from 'components/AddressesDiscoveryOverlay';
 import { NamiMigrationGuard } from '@src/features/nami-migration/NamiMigrationGuard';
 import { AppVersionGuard } from '@src/utils/AppVersionGuard';
+import { ErrorBoundary } from '@components/ErrorBoundary';
 
 const App = (): React.ReactElement => (
-  <BackgroundServiceAPIProvider>
-    <AppSettingsProvider>
-      <DatabaseProvider>
-        <StoreProvider appMode={APP_MODE_BROWSER}>
-          <CurrencyStoreProvider>
-            <HashRouter>
-              <BackgroundPageProvider>
-                <PostHogClientProvider>
-                  <AnalyticsProvider>
-                    <ThemeProvider>
-                      <UIThemeProvider>
-                        <ExternalLinkOpenerProvider>
-                          <MigrationContainer appMode={APP_MODE_BROWSER}>
-                            <DataCheckContainer appMode={APP_MODE_BROWSER}>
-                              <AddressesDiscoveryOverlay>
-                                <NamiMigrationGuard>
-                                  <AppVersionGuard>
-                                    <BrowserViewRoutes />
-                                  </AppVersionGuard>
-                                </NamiMigrationGuard>
-                              </AddressesDiscoveryOverlay>
-                            </DataCheckContainer>
-                          </MigrationContainer>
-                        </ExternalLinkOpenerProvider>
-                      </UIThemeProvider>
-                    </ThemeProvider>
-                  </AnalyticsProvider>
-                </PostHogClientProvider>
-              </BackgroundPageProvider>
-            </HashRouter>
-          </CurrencyStoreProvider>
-        </StoreProvider>
-      </DatabaseProvider>
-    </AppSettingsProvider>
-  </BackgroundServiceAPIProvider>
+  <ErrorBoundary>
+    <BackgroundServiceAPIProvider>
+      <AppSettingsProvider>
+        <DatabaseProvider>
+          <StoreProvider appMode={APP_MODE_BROWSER}>
+            <CurrencyStoreProvider>
+              <HashRouter>
+                <BackgroundPageProvider>
+                  <PostHogClientProvider>
+                    <AnalyticsProvider>
+                      <ThemeProvider>
+                        <UIThemeProvider>
+                          <ExternalLinkOpenerProvider>
+                            <MigrationContainer appMode={APP_MODE_BROWSER}>
+                              <DataCheckContainer appMode={APP_MODE_BROWSER}>
+                                <AddressesDiscoveryOverlay>
+                                  <NamiMigrationGuard>
+                                    <AppVersionGuard>
+                                      <BrowserViewRoutes />
+                                    </AppVersionGuard>
+                                  </NamiMigrationGuard>
+                                </AddressesDiscoveryOverlay>
+                              </DataCheckContainer>
+                            </MigrationContainer>
+                          </ExternalLinkOpenerProvider>
+                        </UIThemeProvider>
+                      </ThemeProvider>
+                    </AnalyticsProvider>
+                  </PostHogClientProvider>
+                </BackgroundPageProvider>
+              </HashRouter>
+            </CurrencyStoreProvider>
+          </StoreProvider>
+        </DatabaseProvider>
+      </AppSettingsProvider>
+    </BackgroundServiceAPIProvider>
+  </ErrorBoundary>
 );
 
 const mountNode = document.querySelector('#lace-app');

diff --git a/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx b/apps/browser-extension-wallet/src/views/browser-view/routes/index.tsx
@@ -38,11 +38,12 @@ import { Trans, useTranslation } from 'react-i18next';
 import { POPUP_WINDOW_NAMI_TITLE } from '@src/utils/constants';
 import { DAppExplorer } from '@views/browser/features/dapp/explorer/components/DAppExplorer';
 import { useFatalError } from '@hooks/useFatalError';
-import { Crash } from '@components/Crash';
+import { Crash } from '@components/ErrorBoundary';
 import { useIsPosthogClientInitialized } from '@providers/PostHogClientProvider/useIsPosthogClientInitialized';
 import { logger } from '@lace/common';
 import { VotingLayout } from '../features/voting-beta';
 import { catchAndBrandExtensionApiError } from '@utils/catch-and-brand-extension-api-error';
+import { removePreloaderIfExists } from '@utils/remove-reloader-if-exists';
 
 export const defaultRoutes: RouteMap = [
   {
@@ -241,7 +242,7 @@ export const BrowserViewRoutes = ({ routesMap = defaultRoutes }: { routesMap?: R
 
   useEffect(() => {
     if (isLoaded || isOnboarding || isInNamiMode || fatalError) {
-      document.querySelector('#preloader')?.remove();
+      removePreloaderIfExists();
     }
   }, [isLoaded, isOnboarding, isInNamiMode, fatalError]);
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './Crash';
		export { ErrorBoundary } from './ErrorBoundary';