diff --git a/CHANGELOG.md b/CHANGELOG.md index 9905856c53..11d1916f36 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,9 @@ the release. ([#1727](https://github.com/open-telemetry/opentelemetry-demo/pull/1727)) * [chore] Fix binding for host's volume mount ([#1728](https://github.com/open-telemetry/opentelemetry-demo/pull/1728)) +* [frontend] fix imageSlowLoad headers not applied + to 1.8.0 together with other dependencies + ([#1733](https://github.com/open-telemetry/opentelemetry-demo/pull/1733)) ## 1.11.1 diff --git a/src/frontend/components/ProductCard/ProductCard.tsx b/src/frontend/components/ProductCard/ProductCard.tsx index 1b051c7241..3205fb1872 100644 --- a/src/frontend/components/ProductCard/ProductCard.tsx +++ b/src/frontend/components/ProductCard/ProductCard.tsx @@ -12,8 +12,8 @@ interface IProps { product: Product; } -async function getImageWithHeaders(url: RequestInfo, headers: Record) { - const res = await fetch(url, { headers }); +async function getImageWithHeaders(requestInfo: Request) { + const res = await fetch(requestInfo); return await res.blob(); } @@ -33,9 +33,16 @@ const ProductCard = ({ const [imageSrc, setImageSrc] = useState(''); useEffect(() => { - const requestInfo = new Request('/images/products/' + picture); - const headers = { 'x-envoy-fault-delay-request': imageSlowLoad.toString(), 'Cache-Control': 'no-cache' }; - getImageWithHeaders(requestInfo, headers).then(blob => { + const headers = new Headers(); + headers.append('x-envoy-fault-delay-request', imageSlowLoad.toString()); + headers.append('Cache-Control', 'no-cache') + const requestInit = { + method: "GET", + headers: headers + }; + const image_url ='/images/products/' + picture + const requestInfo = new Request(image_url, requestInit); + getImageWithHeaders(requestInfo).then(blob => { setImageSrc(URL.createObjectURL(blob)); }); }, [imageSlowLoad, picture]);