Handle invalid ssl cert in delivery preview

Author: synzen

services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/FeedLevelStateDisplay.tsx

@@ -1,10 +1,11 @@
 import { Badge, Box, Button, Flex, HStack, Icon, Stack, Text } from "@chakra-ui/react";
 import { WarningIcon } from "@chakra-ui/icons";
-import { Link } from "react-router-dom";
-import { pages } from "../../../../../constants";
-import { UserFeedTabSearchParam } from "../../../../../constants/userFeedTabSearchParam";
 import { getHttpStatusMessage, getGenericErrorMessage } from "./deliveryPreviewUtils";
 
+const scrollToRequestHistory = () => {
+  document.getElementById("request-history")?.scrollIntoView({ behavior: "smooth" });
+};
+
 export interface FeedState {
   state: string;
   errorType?: string;
@@ -13,15 +14,13 @@ export interface FeedState {
 
 interface FeedLevelStateDisplayProps {
   feedState: FeedState;
-  feedId: string;
 }
 
 interface HttpStatusErrorDisplayProps {
   statusCode: number;
-  feedId: string;
 }
 
-const HttpStatusErrorDisplay = ({ statusCode, feedId }: HttpStatusErrorDisplayProps) => {
+const HttpStatusErrorDisplay = ({ statusCode }: HttpStatusErrorDisplayProps) => {
   const statusInfo = getHttpStatusMessage(statusCode);
   const StatusIcon = statusInfo.icon;
 
@@ -67,8 +66,7 @@ const HttpStatusErrorDisplay = ({ statusCode, feedId }: HttpStatusErrorDisplayPr
         </Text>
       </Stack>
       <Button
-        as={Link}
-        to={pages.userFeed(feedId, { tab: UserFeedTabSearchParam.Logs })}
+        onClick={scrollToRequestHistory}
         size={{ base: "md", md: "sm" }}
         width={{ base: "100%", md: "auto" }}
         variant="outline"
@@ -84,10 +82,9 @@ const HttpStatusErrorDisplay = ({ statusCode, feedId }: HttpStatusErrorDisplayPr
 interface GenericErrorDisplayProps {
   feedState: string;
   errorType?: string;
-  feedId: string;
 }
 
-const GenericErrorDisplay = ({ feedState, errorType, feedId }: GenericErrorDisplayProps) => {
+const GenericErrorDisplay = ({ feedState, errorType }: GenericErrorDisplayProps) => {
   const errorInfo = getGenericErrorMessage(feedState, errorType);
 
   return (
@@ -100,8 +97,7 @@ const GenericErrorDisplay = ({ feedState, errorType, feedId }: GenericErrorDispl
       </HStack>
       <Text color="whiteAlpha.900">{errorInfo.explanation}</Text>
       <Button
-        as={Link}
-        to={pages.userFeed(feedId, { tab: UserFeedTabSearchParam.Logs })}
+        onClick={scrollToRequestHistory}
         size={{ base: "md", md: "sm" }}
         width={{ base: "100%", md: "auto" }}
         variant="outline"
@@ -114,7 +110,7 @@ const GenericErrorDisplay = ({ feedState, errorType, feedId }: GenericErrorDispl
   );
 };
 
-export const FeedLevelStateDisplay = ({ feedState, feedId }: FeedLevelStateDisplayProps) => {
+export const FeedLevelStateDisplay = ({ feedState }: FeedLevelStateDisplayProps) => {
   // Note: "unchanged" state is no longer a feed-level state.
   // When the feed is unchanged, the backend returns articles with FeedUnchanged outcome.
 
@@ -123,16 +119,12 @@ export const FeedLevelStateDisplay = ({ feedState, feedId }: FeedLevelStateDispl
     feedState.errorType === "bad-status-code" &&
     feedState.httpStatusCode
   ) {
-    return <HttpStatusErrorDisplay statusCode={feedState.httpStatusCode} feedId={feedId} />;
+    return <HttpStatusErrorDisplay statusCode={feedState.httpStatusCode} />;
   }
 
   if (feedState.state === "fetch-error" || feedState.state === "parse-error") {
     return (
-      <GenericErrorDisplay
-        feedState={feedState.state}
-        errorType={feedState.errorType}
-        feedId={feedId}
-      />
+      <GenericErrorDisplay feedState={feedState.state} errorType={feedState.errorType} />
     );
   }
 

services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/deliveryPreviewUtils.tsx

@@ -254,6 +254,12 @@ export function getGenericErrorMessage(feedState: string, errorType?: string): G
           title: "Failed to Fetch Feed",
           explanation: "An unexpected error occurred. Try refreshing in a few minutes.",
         };
+      case "invalid-ssl-certificate":
+        return {
+          title: "Invalid SSL Certificate",
+          explanation:
+            "The feed server's SSL certificate could not be verified. The certificate may be expired, self-signed, or misconfigured. Contact the feed provider or try an alternative feed URL.",
+        };
       default:
         return {
           title: "Failed to Fetch Feed",

services/backend-api/client/src/features/feed/components/UserFeedLogs/DeliveryPreview/index.tsx

@@ -212,7 +212,7 @@ export const DeliveryPreviewPresentational = ({
           </Box>
         )}
         {!isLoading && !error && !hasNoConnections && hasFeedLevelState && feedState && (
-          <FeedLevelStateDisplay feedState={feedState} feedId={feedId} />
+          <FeedLevelStateDisplay feedState={feedState} />
         )}
         {!isLoading && !error && !hasNoConnections && !hasNoData && !hasFeedLevelState && (
           <Stack spacing={4}>

services/backend-api/client/src/features/feed/components/UserFeedLogs/RequestHistory/index.tsx

@@ -180,7 +180,14 @@ export const RequestHistory = () => {
   );
 
   return (
-    <Stack spacing={4} mb={8} border="solid 1px" borderColor="gray.700" borderRadius="md">
+    <Stack
+      id="request-history"
+      spacing={4}
+      mb={8}
+      border="solid 1px"
+      borderColor="gray.700"
+      borderRadius="md"
+    >
       <Box>
         <Stack px={4} py={4}>
           <Heading size="sm" as="h3" m={0} id="request-history-table-title">

services/backend-api/client/src/stories/DeliveryPreview/FeedLevelStateDisplay.stories.tsx

@@ -1,6 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import React from "react";
-import { MemoryRouter } from "react-router-dom";
 import { FeedLevelStateDisplay } from "../../features/feed/components/UserFeedLogs/DeliveryPreview/FeedLevelStateDisplay";
 import {
   createFeedState404,
@@ -21,13 +19,6 @@ const meta = {
     layout: "padded",
   },
   tags: ["autodocs"],
-  decorators: [
-    (Story: React.ComponentType) => (
-      <MemoryRouter>
-        <Story />
-      </MemoryRouter>
-    ),
-  ],
 } satisfies Meta<typeof FeedLevelStateDisplay>;
 
 export default meta;
@@ -38,28 +29,24 @@ type Story = StoryObj<typeof meta>;
 export const Http404NotFound: Story = {
   args: {
     feedState: createFeedState404(),
-    feedId: "feed-123",
   },
 };
 
 export const Http403Forbidden: Story = {
   args: {
     feedState: createFeedState403(),
-    feedId: "feed-123",
   },
 };
 
 export const Http429RateLimited: Story = {
   args: {
     feedState: createFeedState429(),
-    feedId: "feed-123",
   },
 };
 
 export const Http5xxServerError: Story = {
   args: {
     feedState: createFeedState5xx(),
-    feedId: "feed-123",
   },
 };
 
@@ -68,21 +55,18 @@ export const Http5xxServerError: Story = {
 export const FetchTimeout: Story = {
   args: {
     feedState: createFetchTimeout(),
-    feedId: "feed-123",
   },
 };
 
 export const FetchFailed: Story = {
   args: {
     feedState: createFetchFailed(),
-    feedId: "feed-123",
   },
 };
 
 export const FetchInternalError: Story = {
   args: {
     feedState: createFetchInternalError(),
-    feedId: "feed-123",
   },
 };
 
@@ -91,13 +75,11 @@ export const FetchInternalError: Story = {
 export const ParseTimeout: Story = {
   args: {
     feedState: createParseTimeout(),
-    feedId: "feed-123",
   },
 };
 
 export const ParseInvalidFormat: Story = {
   args: {
     feedState: createParseInvalidFormat(),
-    feedId: "feed-123",
   },
 };

services/user-feeds-next/src/feed-fetcher/exceptions.ts

@@ -50,6 +50,13 @@ export class FeedRequestTimedOutException extends Error {
   }
 }
 
+export class FeedRequestInvalidSslCertificateException extends Error {
+  constructor(message: string) {
+    super(message);
+    this.name = "FeedRequestInvalidSslCertificateException";
+  }
+}
+
 export class FeedArticleNotFoundException extends Error {
   constructor(message: string) {
     super(message);

services/user-feeds-next/src/feed-fetcher/feed-fetcher.ts

@@ -1,9 +1,9 @@
-import { request } from "undici";
 import pRetry from "p-retry";
 import {
   FeedRequestBadStatusCodeException,
   FeedRequestFetchException,
   FeedRequestInternalException,
+  FeedRequestInvalidSslCertificateException,
   FeedRequestNetworkException,
   FeedRequestParseException,
   FeedRequestServerStatusException,
@@ -32,8 +32,7 @@ export async function fetchFeed(
   }
 ): Promise<FetchFeedResult> {
   const serviceHost = options.serviceHost;
-  let statusCode: number;
-  let body: { json: () => Promise<unknown> };
+  let response: Response;
 
   try {
     const requestBody = {
@@ -44,10 +43,10 @@ export async function fetchFeed(
       stalenessThresholdSeconds: options?.stalenessThresholdSeconds,
       hashToCompare: options?.hashToCompare || undefined,
       lookupDetails: options?.lookupDetails,
-    }
-    const response = await pRetry(
+    };
+    response = await pRetry(
       async () =>
-        request(serviceHost, {
+        fetch(serviceHost, {
           method: "POST",
           body: JSON.stringify(requestBody),
           headers: {
@@ -61,18 +60,15 @@ export async function fetchFeed(
         randomize: true,
       }
     );
-
-    statusCode = response.statusCode;
-    body = response.body;
   } catch (err) {
     throw new FeedRequestNetworkException(
       `Failed to execute request to feed requests API: ${(err as Error).message}`
     );
   }
 
   return handleFetchResponse({
-    statusCode,
-    json: body.json.bind(body),
+    statusCode: response.status,
+    json: response.json.bind(response),
   });
 }
 
@@ -123,6 +119,12 @@ async function handleFetchResponse({
     );
   }
 
+  if (requestStatus === FeedResponseRequestStatus.InvalidSslCertificate) {
+    throw new FeedRequestInvalidSslCertificateException(
+      "Feed server has an invalid SSL certificate"
+    );
+  }
+
   if (
     requestStatus === FeedResponseRequestStatus.MatchedHash
   ) {

services/user-feeds-next/src/feed-fetcher/types.ts

@@ -6,6 +6,7 @@ export enum FeedResponseRequestStatus {
   FetchError = "FETCH_ERROR",
   FetchTimeout = "FETCH_TIMEOUT",
   MatchedHash = "MATCHED_HASH",
+  InvalidSslCertificate = "INVALID_SSL_CERTIFICATE",
 }
 
 interface FeedResponseInternalError {
@@ -16,6 +17,10 @@ interface FeedResponseMatchedHash {
   requestStatus: FeedResponseRequestStatus.MatchedHash;
 }
 
+interface FeedResponseInvalidSslCertificate {
+  requestStatus: FeedResponseRequestStatus.InvalidSslCertificate;
+}
+
 interface FeedResponseFetchError {
   requestStatus: FeedResponseRequestStatus.FetchError;
 }
@@ -49,7 +54,8 @@ export type FeedResponse =
   | FeedResponseSuccess
   | FeedResponseFetchError
   | FeedResponseBadStatusCodeError
-  | FeedResponseMatchedHash;
+  | FeedResponseMatchedHash
+  | FeedResponseInvalidSslCertificate;
 
 export interface FeedRequestLookupDetails {
   key: string;

services/user-feeds-next/src/feeds/shared-processing.ts

@@ -10,6 +10,7 @@ import {
   FeedRequestBadStatusCodeException,
   FeedRequestFetchException,
   FeedRequestTimedOutException,
+  FeedRequestInvalidSslCertificateException,
 } from "../feed-fetcher/exceptions";
 import {
   FeedParseTimeoutException,
@@ -155,6 +156,13 @@ export async function fetchAndParseFeed(
         message: err.message,
       };
     }
+    if (err instanceof FeedRequestInvalidSslCertificateException) {
+      return {
+        status: "fetch-error",
+        errorType: "invalid-ssl-certificate",
+        message: err.message,
+      };
+    }
     throw err;
   }