fixup! feat(web-fragments): add fragment fetch failing handling

address PR feedback

Author: dario-piotrowicz

e2e/pierced-react/functions/_middleware.ts

@@ -28,15 +28,15 @@ const getGatewayMiddleware: ((devMode: boolean) => PagesFunction) & {
     routePatterns: ["/", "/_fragment/remix/:_*"],
     // Note: make sure to run the pierced-react-remix-fragment (with remix-serve)
     upstream: "http://localhost:3000",
-    onFragmentFailedFetch: () => {
+    onSsrFetchError: () => {
       return new Response(
         "<p id='remix-fragment-not-found'><style>#remix-fragment-not-found { color: red; font-size: 2rem; }</style>Remix fragment not found</p>",
         { headers: [["content-type", "text/html"]] }
       );
     },
   });
 
-  getGatewayMiddleware._gatewayMiddleware = getPagesMiddleware(gateway, devMode);
+  getGatewayMiddleware._gatewayMiddleware = getPagesMiddleware(gateway, devMode ? 'development' : 'production');
   return getGatewayMiddleware._gatewayMiddleware;
 };
 

packages/web-fragments/src/gateway/fragment-gateway.ts

@@ -36,7 +36,7 @@ export interface FragmentConfig {
    * @param failedRes the failed response (with a 4xx or 5xx status) or the thrown error
    * @returns the response to use for the document's ssr
    */
-  onFragmentFailedFetch?: (req: RequestInfo, failedResOrError: Response|unknown) => Response|Promise<Response>;
+  onSsrFetchError?: (req: RequestInfo, failedResOrError: Response|unknown) => Response|Promise<Response>;
 }
 
 type FragmentGatewayConfig = {

packages/web-fragments/src/gateway/pagesMiddleware.ts

@@ -7,7 +7,7 @@ const fragmentHostInitialization = ({ content, classNames }: {content: string; c
 
 export function getPagesMiddleware(
   gateway: FragmentGateway,
-  devMode: boolean,
+  mode: "production" | "development" = "development"
 ): PagesFunction<unknown> {
   return async ({ request, next }) => {
     /**
@@ -74,23 +74,25 @@ export function getPagesMiddleware(
         let fragmentRes: Response;
         let fragmentFailedResOrError: Response | unknown | null = null;
         try {
-          fragmentRes = scriptRewriter.transform(await fetch(fragmentReq));
-          if (fragmentRes.status >= 400 && fragmentRes.status <= 500) {
-            fragmentFailedResOrError = fragmentRes;
+          const response = await fetch(fragmentReq);
+          if (response.status >= 400 && response.status <= 599) {
+            fragmentFailedResOrError = response;
+          } else {
+            fragmentRes = scriptRewriter.transform(response);
           }
         } catch (e) {
           fragmentFailedResOrError = e;
         }
 
         if (fragmentFailedResOrError) {
-          if (matchedFragment.onFragmentFailedFetch) {
-            fragmentRes = await matchedFragment.onFragmentFailedFetch(
+          if (matchedFragment.onSsrFetchError) {
+            fragmentRes = await matchedFragment.onSsrFetchError(
               fragmentReq,
               fragmentFailedResOrError
             );
           } else {
             fragmentRes = new Response(
-              devMode
+              mode === 'development'
                 ? `<p>Fetching fragment upstream failed: ${matchedFragment.upstream}</p>`
                 : "<p>There was a problem fulfilling your request.</p>",
               { headers: [["content-type", "text/html"]] }