Fix: Handle Infinite loading of library detection section on 404 page.

packages/library-detection/src/components/libraryDetection/index.tsx

@@ -33,9 +33,10 @@ import type { LibraryData, AccordionProps } from '../../types';
 const LibraryDetection = memo(function LibraryDetection() {
   useLibraryDetection();
 
-  const { libraryMatches, showLoader, isCurrentTabLoading } =
+  const { libraryMatches, showLoader, isCurrentTabLoading, errorOccured } =
     useLibraryDetectionContext(({ state }) => ({
       libraryMatches: state.libraryMatches,
+      errorOccured: state.errorOccured,
       showLoader: state.showLoader,
       isCurrentTabLoading: state.isCurrentTabLoading,
     }));
@@ -57,7 +58,7 @@ const LibraryDetection = memo(function LibraryDetection() {
   ];
 
   const result =
-    detectedLibraryNames.length > 0 ? (
+    !errorOccured && detectedLibraryNames.length > 0 ? (
       <>
         {LIBRARIES.map((library) => {
           const Component = library.component as React.FC<AccordionProps>;
@@ -81,10 +82,15 @@ const LibraryDetection = memo(function LibraryDetection() {
           );
         })}
       </>
-    ) : (
+    ) : !errorOccured ? (
       <p className="text-center dark:text-bright-gray">
         No libraries with known breakages found yet!
       </p>
+    ) : (
+      <p className="text-center dark:text-bright-gray">
+        A library detection error occurred. Please reopen the DevTool on a valid
+        URL.
+      </p>
     );
 
   return (
@@ -93,7 +99,7 @@ const LibraryDetection = memo(function LibraryDetection() {
       testId="library-detection"
       description=""
     >
-      {showLoader ? (
+      {!errorOccured && showLoader ? (
         <>
           <ProgressBar additionalStyles="w-1/3 mx-auto h-full" />
           <p className="text-center dark:text-bright-gray">

packages/library-detection/src/core/stateProvider/index.tsx

@@ -42,13 +42,15 @@ export interface LibraryDetectionContext {
     loadedBefore: boolean;
     showLoader: boolean;
     tabId: number;
+    errorOccured: boolean;
   };
   actions: {
     setLibraryMatches: React.Dispatch<React.SetStateAction<LibraryData>>;
     setIsCurrentTabLoading: React.Dispatch<React.SetStateAction<boolean>>;
     setIsInitialDataUpdated: React.Dispatch<React.SetStateAction<boolean>>;
     setLoadedBeforeState: React.Dispatch<React.SetStateAction<boolean>>;
     setShowLoader: React.Dispatch<React.SetStateAction<boolean>>;
+    setErrorOccured: React.Dispatch<React.SetStateAction<boolean>>;
   };
 }
 
@@ -62,13 +64,15 @@ const initialState: LibraryDetectionContext = {
     loadedBefore: false,
     showLoader: true,
     tabId: -1,
+    errorOccured: false,
   },
   actions: {
     setLibraryMatches: noop,
     setIsCurrentTabLoading: noop,
     setIsInitialDataUpdated: noop,
     setLoadedBeforeState: noop,
     setShowLoader: noop,
+    setErrorOccured: noop,
   },
 };
 
@@ -83,13 +87,23 @@ export const LibraryDetectionProvider = ({ children }: PropsWithChildren) => {
     useState<boolean>(false); // TODO: Use first/current tab loaded state instead.
   const [isInitialDataUpdated, setIsInitialDataUpdated] = useState(false);
   const [loadedBefore, setLoadedBeforeState] = useState<boolean>(false);
+  const [errorOccured, setErrorOccured] = useState<boolean>(false);
   const [showLoader, setShowLoader] = useState<boolean>(true);
   const [tabId, setTabId] = useState(-1);
 
   useEffect(() => {
     setTabId(chrome.devtools.inspectedWindow.tabId);
   }, []);
 
+  const onErrorOccuredListener = useCallback(
+    ({ frameId }: chrome.webNavigation.WebNavigationFramedCallbackDetails) => {
+      if (frameId === 0) {
+        setErrorOccured(true);
+      }
+    },
+    []
+  );
+
   // It is attached, next time the tab is updated or reloaded.
   const onTabUpdate = useCallback(
     (changingTabId: number, changeInfo: chrome.tabs.TabChangeInfo) => {
@@ -105,23 +119,44 @@ export const LibraryDetectionProvider = ({ children }: PropsWithChildren) => {
         }
       }
     },
-    [
-      setIsCurrentTabLoading,
-      setLibraryMatches,
-      setShowLoader,
-      setLoadedBeforeState,
-      tabId,
-    ]
+    [tabId]
+  );
+
+  const onNavigatedListener = useCallback(
+    ({ frameId }: chrome.webNavigation.WebNavigationFramedCallbackDetails) => {
+      if (frameId === 0) {
+        setLibraryMatches(initialLibraryMatches);
+        setIsCurrentTabLoading(true);
+        setShowLoader(true);
+        setLoadedBeforeState(false);
+        setIsInitialDataUpdated(false);
+      }
+    },
+    []
+  );
+
+  const onCompleted = useCallback(
+    ({ frameId }: chrome.webNavigation.WebNavigationFramedCallbackDetails) => {
+      if (frameId === 0) {
+        setErrorOccured(false);
+      }
+    },
+    []
   );
 
   useEffect(() => {
     chrome.tabs.onUpdated.removeListener(onTabUpdate);
     chrome.tabs.onUpdated.addListener(onTabUpdate);
+    chrome.webNavigation.onErrorOccurred.addListener(onErrorOccuredListener);
+    chrome.webNavigation.onBeforeNavigate.addListener(onNavigatedListener);
+    chrome.webNavigation.onCompleted.addListener(onCompleted);
 
     return () => {
       chrome.tabs.onUpdated.removeListener(onTabUpdate);
+      chrome.webNavigation.onBeforeNavigate.removeListener(onNavigatedListener);
+      chrome.webNavigation.onCompleted.removeListener(onCompleted);
     };
-  }, [onTabUpdate]);
+  }, [onTabUpdate, onErrorOccuredListener, onNavigatedListener, onCompleted]);
 
   return (
     <Context.Provider
@@ -133,13 +168,15 @@ export const LibraryDetectionProvider = ({ children }: PropsWithChildren) => {
           loadedBefore,
           showLoader,
           tabId,
+          errorOccured,
         },
         actions: {
           setLibraryMatches,
           setIsCurrentTabLoading,
           setIsInitialDataUpdated,
           setLoadedBeforeState,
           setShowLoader,
+          setErrorOccured,
         },
       }}
     >