FE Vuln feature: Vuln feat error handling (#16847)

## Issue
Iteration of #16786

## Description
- [x] Add missed team param to OS version page Name links
- [x] Update error handling on details pages to use `useErrorHandling`
like other pages of UI

## Screen recording
- Missed team param added
- Error handling on pages


# Checklist for submitter

If some of the following don't apply, delete the relevant line.

<!-- Note that API documentation changes are now addressed by the
product design team. -->

- [ ] Manual QA for all new/changed functionality

frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystemsTableConfig.tsx

@@ -1,7 +1,13 @@
+/**
+ dashboard/:osname Dashboard > OS dropdown selected > Operating system table
+ software/os > OS tab > Operating system table
+*/
+
 import React from "react";
 import { Column } from "react-table";
 import { InjectedRouter } from "react-router";
 
+import { buildQueryStringFromParams } from "utilities/url";
 import PATHS from "router/paths";
 import {
   formatOperatingSystemDisplayName,
@@ -77,16 +83,24 @@ const generateDefaultTableHeaders = (
       }
 
       const { name, os_version_id } = cellProps.row.original;
+
+      const teamQueryParam = buildQueryStringFromParams({
+        team_id: teamId,
+      });
+      const softwareOsDetailsPath = `${PATHS.SOFTWARE_OS_DETAILS(
+        os_version_id
+      )}?${teamQueryParam}`;
+
       const onClickSoftware = (e: React.MouseEvent) => {
         // Allows for button to be clickable in a clickable row
         e.stopPropagation();
 
-        router?.push(PATHS.SOFTWARE_OS_DETAILS(os_version_id));
+        router?.push(softwareOsDetailsPath);
       };
 
       return (
         <LinkCell
-          path={PATHS.SOFTWARE_OS_DETAILS(os_version_id)}
+          path={softwareOsDetailsPath}
           customOnClick={onClickSoftware}
           value={
             <>

frontend/pages/SoftwarePage/SoftwareOSDetailsPage/SoftwareOSDetailsPage.tsx

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useContext } from "react";
 import { useQuery } from "react-query";
+import { useErrorHandler } from "react-error-boundary";
 import { RouteComponentProps } from "react-router";
 import { AxiosError } from "axios";
 
@@ -18,7 +19,6 @@ import { SUPPORT_LINK } from "utilities/constants";
 
 import Spinner from "components/Spinner";
 import TableDataError from "components/DataError";
-import Fleet404 from "pages/errors/Fleet404";
 import MainContent from "components/MainContent";
 import EmptyTable from "components/EmptyTable";
 import CustomLink from "components/CustomLink";
@@ -65,6 +65,7 @@ const SoftwareOSDetailsPage = ({
   location,
 }: ISoftwareOSDetailsPageProps) => {
   const { isPremiumTier, isOnGlobalTeam } = useContext(AppContext);
+  const handlePageError = useErrorHandler();
 
   const osVersionIdFromURL = parseInt(routeParams.id, 10);
 
@@ -84,7 +85,6 @@ const SoftwareOSDetailsPage = ({
     data: osVersionDetails,
     isLoading,
     isError: isOsVersionError,
-    error: osVersionError,
   } = useQuery<
     IOSVersionResponse,
     AxiosError,
@@ -102,6 +102,7 @@ const SoftwareOSDetailsPage = ({
     {
       enabled: !!osVersionIdFromURL,
       select: (data) => data.os_version,
+      onError: (error) => handlePageError(error),
     }
   );
 
@@ -141,10 +142,6 @@ const SoftwareOSDetailsPage = ({
     }
 
     if (isOsVersionError) {
-      // confirm okay to cast to AxiosError like this
-      if (osVersionError.status === 404) {
-        return <Fleet404 />;
-      }
       return <TableDataError className={`${baseClass}__table-error`} />;
     }
 

frontend/pages/SoftwarePage/SoftwareTitleDetailsPage/SoftwareTitleDetailsPage.tsx

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useContext } from "react";
 import { useQuery } from "react-query";
+import { useErrorHandler } from "react-error-boundary";
 import { RouteComponentProps } from "react-router";
 import { AxiosError } from "axios";
 
@@ -17,7 +18,6 @@ import softwareAPI, {
 
 import Spinner from "components/Spinner";
 import TableDataError from "components/DataError";
-import Fleet404 from "pages/errors/Fleet404";
 import MainContent from "components/MainContent";
 import TeamsHeader from "components/TeamsHeader";
 import Card from "components/Card";
@@ -43,6 +43,7 @@ const SoftwareTitleDetailsPage = ({
   location,
 }: ISoftwareTitleDetailsPageProps) => {
   const { isPremiumTier, isOnGlobalTeam } = useContext(AppContext);
+  const handlePageError = useErrorHandler();
 
   // TODO: handle non integer values
   const softwareId = parseInt(routeParams.id, 10);
@@ -63,7 +64,6 @@ const SoftwareTitleDetailsPage = ({
     data: softwareTitle,
     isLoading: isSoftwareTitleLoading,
     isError: isSoftwareTitleError,
-    error: softwareTitleError,
   } = useQuery<
     ISoftwareTitleResponse,
     AxiosError,
@@ -74,6 +74,7 @@ const SoftwareTitleDetailsPage = ({
     ({ queryKey }) => softwareAPI.getSoftwareTitle(queryKey[0]),
     {
       select: (data) => data.software_title,
+      onError: (error) => handlePageError(error),
     }
   );
 
@@ -90,10 +91,6 @@ const SoftwareTitleDetailsPage = ({
     }
 
     if (isSoftwareTitleError) {
-      // confirm okay to cast to AxiosError like this
-      if (softwareTitleError.status === 404) {
-        return <Fleet404 />;
-      }
       return <TableDataError className={`${baseClass}__table-error`} />;
     }
 

frontend/pages/SoftwarePage/SoftwareVersionDetailsPage/SoftwareVersionDetailsPage.tsx

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useContext } from "react";
 import { useQuery } from "react-query";
+import { useErrorHandler } from "react-error-boundary";
 import { RouteComponentProps } from "react-router";
 import { AxiosError } from "axios";
 
@@ -47,6 +48,7 @@ const SoftwareVersionDetailsPage = ({
   location,
 }: ISoftwareTitleDetailsPageProps) => {
   const { isPremiumTier, isOnGlobalTeam } = useContext(AppContext);
+  const handlePageError = useErrorHandler();
 
   const versionId = parseInt(routeParams.id, 10);
 
@@ -66,7 +68,6 @@ const SoftwareVersionDetailsPage = ({
     data: softwareVersion,
     isLoading: isSoftwareVersionLoading,
     isError: isSoftwareVersionError,
-    error: softwareVersionError,
   } = useQuery<
     ISoftwareVersionResponse,
     AxiosError,
@@ -77,6 +78,7 @@ const SoftwareVersionDetailsPage = ({
     ({ queryKey }) => softwareAPI.getSoftwareVersion(queryKey[0]),
     {
       select: (data) => data.software,
+      onError: (error) => handlePageError(error),
     }
   );
 
@@ -108,10 +110,6 @@ const SoftwareVersionDetailsPage = ({
     }
 
     if (isSoftwareVersionError) {
-      // confirm okay to cast to AxiosError like this
-      if (softwareVersionError.status === 404) {
-        return <Fleet404 />;
-      }
       return <TableDataError className={`${baseClass}__table-error`} />;
     }
 

frontend/pages/SoftwarePage/SoftwareVulnerabilityDetailsPage/SoftwareVulnerabilityDetailsPage.tsx

@@ -2,6 +2,7 @@
 
 import React, { useCallback, useContext } from "react";
 import { useQuery } from "react-query";
+import { useErrorHandler } from "react-error-boundary";
 import { RouteComponentProps } from "react-router";
 import { AxiosError } from "axios";
 
@@ -17,7 +18,6 @@ import softwareVulnAPI, {
 
 import Spinner from "components/Spinner";
 import DataError from "components/DataError";
-import Fleet404 from "pages/errors/Fleet404";
 import MainContent from "components/MainContent";
 import TeamsHeader from "components/TeamsHeader";
 import Card from "components/Card";
@@ -44,6 +44,7 @@ const SoftwareVulnerabilityDetailsPage = ({
   location,
 }: ISoftwareVulnerabilityDetailsPageProps) => {
   const { isPremiumTier, isOnGlobalTeam } = useContext(AppContext);
+  const handlePageError = useErrorHandler();
 
   const {
     currentTeamId,
@@ -61,7 +62,6 @@ const SoftwareVulnerabilityDetailsPage = ({
     data: vuln,
     isLoading: isVulnLoading,
     isError: isVulnError,
-    error: vulnError,
   } = useQuery<
     IVulnerabilityResponse,
     AxiosError,
@@ -80,6 +80,7 @@ const SoftwareVulnerabilityDetailsPage = ({
     },
     {
       select: (data) => data.vulnerability,
+      onError: (error) => handlePageError(error),
     }
   );
 
@@ -132,10 +133,6 @@ const SoftwareVulnerabilityDetailsPage = ({
       return <Spinner />;
     }
     if (isVulnError) {
-      // confirm okay to cast to AxiosError like this
-      if (vulnError.status === 404) {
-        return <Fleet404 />;
-      }
       return <DataError />;
     }
     return (