slowload with flagd poc

docker-compose.minimal.yml

@@ -209,6 +209,8 @@ services:
       - PUBLIC_OTEL_EXPORTER_OTLP_TRACES_ENDPOINT
       - OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE
       - WEB_OTEL_SERVICE_NAME=frontend-web
+      - FLAGD_HOST
+      - FLAGD_PORT
     depends_on:
       adservice:
         condition: service_started

docker-compose.yml

@@ -223,7 +223,7 @@ services:
       "file:./etc/flagd/demo.flagd.json"
     ]
     ports:
-      - 8013
+      - "${FLAGD_PORT}"
     volumes:
       - ./src/flagd:/etc/flagd
     logging:
@@ -290,6 +290,8 @@ services:
       - OTEL_EXPORTER_OTLP_METRICS_TEMPORALITY_PREFERENCE
       - WEB_OTEL_SERVICE_NAME=frontend-web
       - OTEL_COLLECTOR_HOST
+      - FLAGD_HOST
+      - FLAGD_PORT
     depends_on:
       adservice:
         condition: service_started
@@ -311,6 +313,8 @@ services:
         condition: service_started
       imageprovider:
         condition: service_started
+      flagd:
+        condition: service_started 
     logging: *logging
 
   # Frontend Proxy (Envoy)
@@ -344,6 +348,8 @@ services:
       - OTEL_COLLECTOR_PORT_HTTP
       - OTEL_RESOURCE_ATTRIBUTES
       - ENVOY_PORT
+      - FLAGD_HOST
+      - FLAGD_PORT
     depends_on:
       frontend:
         condition: service_started

src/flagd/demo.flagd.json

@@ -69,6 +69,15 @@
         "off": false
       },
       "defaultVariant": "off"
+    },
+    "imageSlowLoad": {
+      "description": "slowLoading iamges in the frontend",
+      "state": "ENABLED",
+      "variants": {
+        "on": true,
+        "off": false
+      },
+      "defaultVariant": "on"
     }
   }
 }

src/frontend/components/ProductCard/ProductCard.tsx

@@ -7,18 +7,43 @@ import ProductPrice from '../ProductPrice';
 import * as S from './ProductCard.styled';
 import { useState, useEffect } from 'react';
 import { RequestInfo } from 'undici-types';
+import { useBooleanFlagValue, OpenFeature} from '@openfeature/react-sdk';
+import {FlagdWebProvider} from '@openfeature/flagd-web-provider'
 
 interface IProps {
   product: Product;
 }
 
-function getImageWithHeaders(url: RequestInfo, headers: {
-    'x-envoy-fault-delay-request': string
-    ;
-  }) {
-  return fetch(url, { headers }).then((res) => res.blob());
+async function getImageWithHeaders(url: RequestInfo, headers: Record<string,string>) {
+  const res = await fetch(url, { headers });
+  return await res.blob();
 }
 
+/**
+ * We connect to flagd through the envoy proxy, straight from the browser, for this we need to know the current hostname and port.
+ * During building and serverside rendering, these are undefined so we use some conditionals and default values.
+ */
+let hostname = "";
+let port = 80;
+let tls = false;
+
+if (typeof window !== "undefined" && window.location) {
+  hostname = window.location.hostname;
+  port = window.location.port ? parseInt(window.location.port, 10) : 80;
+  tls = window.location.protocol === "https:";
+}
+
+
+OpenFeature.setProvider(new FlagdWebProvider({
+  host: hostname,
+  pathPrefix: "flagservice",
+  port: port,
+  tls: tls,
+  maxRetries: 3,
+  maxDelay: 10000,
+}));
+
+
 const ProductCard = ({
   product: {
     id,
@@ -29,10 +54,13 @@ const ProductCard = ({
       units: 0,
       nanos: 0,
     },
-  },
+  }
 }: IProps) => {
-  const headers = {'x-envoy-fault-delay-request':"5000",
+
+  const imageSlowLoad = useBooleanFlagValue('imageSlowLoad', false);
+  const headers = {'x-envoy-fault-delay-request': imageSlowLoad ? "5000" : "1",
                   'Cache-Control': 'no-cache'}
+
   const [imageSrc, setImageSrc] =useState<string>("");
 
   useEffect(() => {

src/frontend/components/ProductList/ProductList.tsx

@@ -5,18 +5,22 @@ import { CypressFields } from '../../utils/Cypress';
 import { Product } from '../../protos/demo';
 import ProductCard from '../ProductCard';
 import * as S from './ProductList.styled';
+import { OpenFeatureProvider, OpenFeature } from '@openfeature/react-sdk';
 
 interface IProps {
   productList: Product[];
 }
 
 const ProductList = ({ productList }: IProps) => {
+  const client = OpenFeature.getClient();
   return (
-    <S.ProductList data-cy={CypressFields.ProductList}>
-      {productList.map(product => (
-        <ProductCard key={product.id} product={product} />
-      ))}
-    </S.ProductList>
+    <OpenFeatureProvider client={client}>
+      <S.ProductList data-cy={CypressFields.ProductList}>
+        {productList.map(product => (
+            <ProductCard key={product.id} product={product} />
+        ))}
+      </S.ProductList>
+    </OpenFeatureProvider>
   );
 };