net::ERR_INCOMPLETE_CHUNKED_ENCODING when rendering an image within the ImageResponse

[drewbietron]

I am using this to generate OG images for a web app and I am getting an incomplete response with an error message, net::ERR_INCOMPLETE_CHUNKED_ENCODING while trying to return an ImageResponse that contains an image.

I have tried manipulating the headers with no resolve. The issue is also intermittent and will occasionally return a full response. Within the image within the image response, the response is complete so it leads me to believe its something about waiting for the image src to fully download before returning it within the ImageResponse.

I can provide more context or actual code if its helpful, but wanted to start there. Any help is greatly appreciated.

[ascorbic]

Hey. Yes, some actual code would be a big help. Ideally a minimal reproduction repo

[drewbietron]

Here's the full implementation of how I'm using it. Sorry for the bits that aren't necessary to debug. You can spin this up and pass an image url and get into renderImage where the image and remaining content is cut off and an incomplete response it returned.

import React from "https://esm.sh/react@18.2.0";
import { corsHeaders } from "../_shared/cors.ts";
// export const corsHeaders = {
// "Access-Control-Allow-Origin": "*",
// "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
// };

import { ImageResponse } from "https://deno.land/x/og_edge@0.0.6/mod.ts";
import { graphQLClient } from "../_shared/clients/supabase.ts";

import {
  SocialShareQuery,
  SocialShareDocument,
  SocialShareQueryVariables,
  ProductShowFragment,
} from "../_shared/types/graphql.ts";

export const colors = (mode: "light" | "dark" = "light") => {
  const darkMode = mode === "dark";

  return {
    black: {
      hex: "#0A0A0A",
      rgb: "10, 10, 10",
    },
    white: {
      hex: "#EBEBEB",
      rgb: "251, 251, 251",
    },
    background: {
      primary: {
        hex: darkMode ? "#1F1F1F" : "#EEEEEE",
        rgb: darkMode ? "26, 26, 26" : "225, 225, 225",
      },
      secondary: {
        hex: darkMode ? "#0A0A0A" : "#F9F9F9",
        rgb: darkMode ? "10, 10, 10" : "235, 235, 235",
      },
    },
    text: {
      primary: {
        hex: darkMode ? "#EBEBEB" : "#0A0A0A",
        rgb: darkMode ? "251, 251, 251" : "10, 10, 10",
      },
      secondary: {
        hex: darkMode ? "#E2E2E2" : "#FBFBFB",
        rgb: darkMode ? "26, 26, 26" : "225, 225, 225",
      },
    },
    border: {
      hex: darkMode ? "#0F0F0F" : "#DFDFDF",
      rgb: darkMode ? "15, 15, 15" : "223, 223, 223",
    },
    boxShadow: {
      hex: darkMode ? "#EBEBEB" : "#0A0A0A",
      rgb: darkMode ? "251, 251, 251" : "10, 10, 10",
    },
    buttonText: { hex: "#F9F9F9", rgb: "235, 235, 235" },
    primary: { hex: "#2E85EB", rgb: "18, 52, 92" },
    disabled: { hex: "#868686", rgb: "134, 134, 134" },
    info: { hex: "#FFBC0F", rgb: "236, 228, 49" },
    error: { hex: "#FF4141", rgb: "255, 65, 65" },
    success: { hex: "#3BE36E", rgb: "59, 227, 110" },
    condition: {
      BRAND_NEW_IN_BOX: { hex: "#30C996" },
      OPEN_BOX: { hex: "#32B7EC" },
      EXCELLENT: { hex: "#7852D2" },
      GOOD: { hex: "#7852D2" },
      FAIR: { hex: "#6C6B6B" },
      POOR: { hex: "#DE5050" },
      NON_FUNCTIONING: { hex: "#F0E36A" },
    },
  };
};

const color = colors("dark");

interface SocialShareSizes {
  width: number;
  height: number;
  padding: number;
  headerFontSize: number;
  priceFontSize: number;
  copyFontSize: number;
  borderRadius: number;
}

const headingFont = fetch(
  "https://api.pbvault.com/storage/v1/object/public/marketing/social-share/fonts/Oswald-Regular.ttf?t=2023-06-30T14%3A11%3A03.627Z"
).then((res) => res.arrayBuffer());

const copyFont = fetch(
  "https://api.pbvault.com/storage/v1/object/public/marketing/social-share/fonts/Inconsolata-Regular.ttf?t=2023-06-30T14%3A10%3A57.668Z"
).then((res) => res.arrayBuffer());

const copyBoldFont = fetch(
  "https://api.pbvault.com/storage/v1/object/public/marketing/social-share/fonts/Inconsolata-Black.ttf?t=2023-06-30T14%3A10%3A08.931Z"
).then((res) => res.arrayBuffer());

const backgroundImage =
  "https://api.pbvault.com/storage/v1/object/public/marketing/social-share/background.jpg?t=2023-06-30T14%3A22%3A16.952Z";

function parseURLParams(url: string): { [key: string]: string } {
  const params: { [key: string]: string } = {};
  const queryString = url.split("?")[1];

  if (queryString) {
    const keyValuePairs = queryString.split("&");

    for (const pair of keyValuePairs) {
      const [key, value] = pair.split("=");
      const decodedValue = decodeURIComponent(value.replace(/\+/g, " "));
      params[key] = decodedValue;
    }
  }

  return params;
}

function renderLogo(sizes: SocialShareSizes) {
  return (
    <div
      style={{
        display: "flex",
        position: "absolute",
        top: sizes.padding / 2,
        left: sizes.padding / 2,
        alignItems: "center",
        justifyContent: "center",
        justifyItems: "center",
      }}
    >
      <div
        style={{
          width: sizes.padding,
          height: sizes.padding,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: color.background.primary.hex,
          borderRadius: sizes.borderRadius,
        }}
      >
        <svg viewBox="0 0 381.56 419.21" width={sizes.padding * 0.6}>
          <path
            fill={color.text.primary.hex}
            d="M.15 325.03c0-27.64.33-55.29-.14-82.92-.23-13.61 5.57-22.51 17.27-28.67 21.48-11.32 42.78-22.97 64.16-34.49 46.73-25.17 93.47-50.33 140.2-75.5 4.18-2.25 8.36-4.49 12.51-6.79 5.24-2.9 7.09-8.32 4.55-13.16-2.61-4.97-8.21-6.48-13.68-3.53-45.17 24.34-90.32 48.71-135.49 73.06-26.99 14.54-53.99 29.05-80.99 43.57-.68.37-1.36.74-2.07 1.04-3.47 1.43-6.3-.31-6.34-4.02C.06 187.1.1 180.57.1 174.05c0-18.25.14-36.49-.08-54.73-.06-5.14 2.05-8.2 6.37-10.51C34.64 93.71 62.83 78.56 91 63.38c31.47-16.96 62.96-33.9 94.35-51.01C196.71 6.18 208.56 1.5 221.48.39c18.12-1.56 35.44 1.57 51.35 10.75 24.84 14.34 39.4 35.97 43.8 64.13 5.59 35.74-12.32 72.25-43.94 89.46-48.95 26.64-98.12 52.87-147.18 79.3-15.25 8.21-30.46 16.51-45.74 24.68-1.82.97-2.4 2.08-2.39 4.11.07 32.95-.07 65.9.14 98.85.04 6.31-2.12 10.21-7.76 13.16-20.23 10.6-40.27 21.58-60.39 32.41-.87.47-1.72 1.02-2.63 1.4-3.88 1.6-6.61-.19-6.62-4.37-.03-13.6-.01-27.2-.02-40.8v-48.43c.03-.01.04-.01.05-.01z"
          />
          <path
            fill={color.text.primary.hex}
            d="M150.99 251.53c15.9-7.99 31.82-15.94 47.69-24 3.2-1.63 6.34-2.12 9.89-1.43 16.7 3.25 33.43 6.27 50.11 9.59 2.81.56 4.11-.3 5.62-2.47 24.12-34.56 48.32-69.06 72.5-103.57 4.03-5.75 7.3-5.47 10.51.92 11.12 22.12 22.2 44.26 33.37 66.36 1.37 2.72 1.11 4.91-.61 7.35-18.28 25.99-36.49 52.02-54.72 78.05-5.57 7.95-11.2 15.85-16.67 23.87-7.46 10.94-17.55 15.12-30.58 12.64-58.27-11.07-116.54-22.09-174.83-33.06-2.89-.54-4.73-2.33-4.63-4.72.07-1.7 1.87-4.02 3.51-4.87 16.21-8.36 32.54-16.47 48.84-24.66z"
          />
        </svg>
      </div>
    </div>
  );
}

function renderProductPriceInfo(sizes: SocialShareSizes, product: ProductShowFragment) {
  const money = (
    amount: number,
    currency = "USD",
    style: "currency" | "unit" = "currency"
  ) => {
    if (!amount) return null;

    return new Intl.NumberFormat("en-US", {
      style,
      currency,
    }).format(amount / 100);
  };
  return (
    <div
      style={{
        marginTop: sizes.padding * 0.25,
        display: "flex",
        flexDirection: "row",
        alignItems: "center",
        gap: sizes.padding * 0.25,
      }}
    >
      {product.state === "SOLD" ? (
        <div
          style={{
            display: "flex",
            alignContent: "center",
            justifyContent: "center",
            backgroundColor: colors("dark").error.hex,
            paddingTop: sizes.padding * 0.2,
            paddingBottom: sizes.padding * 0.2,
            paddingLeft: sizes.padding * 0.25,
            paddingRight: sizes.padding * 0.25,
            borderRadius: sizes.borderRadius,
          }}
        >
          <div
            style={{
              fontSize: sizes.priceFontSize * 0.5,
              fontFamily: "CopyBold",
              lineHeight: 1,
              textTransform: "uppercase",
              color: colors("dark").white.hex,
            }}
          >
            Sold
          </div>
        </div>
      ) : product.price && product.forSale ? (
        <div
          style={{
            fontSize: sizes.priceFontSize,
            fontFamily: "Copy",
            lineHeight: 0.8,
            color: colors("dark").text.primary.hex,
          }}
        >
          {money(parseInt(product.price, 10))}
        </div>
      ) : undefined}
      {product.state !== "SOLD" ? (
        <div
          style={{
            display: "flex",
            flexDirection: "column",
          }}
        >
          {product.acceptsOffers ? (
            <div
              style={{
                fontSize: sizes.copyFontSize,
                fontFamily: "Copy",
                lineHeight: 1,
                letterSpacing: sizes.copyFontSize * 0.2,
                textTransform: "uppercase",
                color: colors("dark").text.primary.hex,
              }}
            >
              Accepts Offers
            </div>
          ) : null}
          <div
            style={{
              fontSize: sizes.copyFontSize,
              fontFamily: "Copy",
              lineHeight: 1,
              letterSpacing: sizes.copyFontSize * 0.2,
              textTransform: "uppercase",
              color: colors("dark").text.primary.hex,
            }}
          >
            0% Financing Available
          </div>
        </div>
      ) : undefined}
    </div>
  );
}

function imageUrl(path: string) {
  return `${Deno.env.get(
    "IMAGE_URL"
  )}/storage/v1/render/image/public/${path}?width=900&resize=contain`;
}

function renderBackgroundPattern() {
  return (
    <div
      style={{
        backgroundImage: `url(${backgroundImage})`,
        backgroundRepeat: "repeat",
        backgroundSize: "cover",
        width: "100%",
        height: "100%",
      }}
      tw="absolute w-full h-full"
    />
  );
}

function renderImage(image: string | undefined | null, sizes: SocialShareSizes) {
  if (!image) return undefined;

  return (
    <div
      style={{
        display: "flex",
        position: "absolute",
        top: 0,
        left: 0,
        overflow: "hidden",
        width: "100%",
        height: "100%",
      }}
    >
      <img
        style={{
          objectFit: "cover",
          display: "flex",
          width: sizes.width,
        }}
        tw="absolute inset-0 w-full h-full"
        src={image}
      />
    </div>
  );
}

function renderContent(
  sizes: SocialShareSizes,
  title: string,
  image: string | undefined | null,
  product?: ProductShowFragment | undefined
) {
  return (
    <div
      style={{
        position: "relative",
        backgroundColor: "#0a0a0a",
        width: sizes.width - sizes.padding,
        height: sizes.height - sizes.padding,
        margin: sizes.padding / 2,
        borderRadius: sizes.borderRadius,
        display: "flex",
        overflow: "hidden",
      }}
    >
      <div
        style={{
          position: "relative",
          backgroundColor: "#0a0a0a",
          width: sizes.width - sizes.padding,
          height: sizes.height - sizes.padding,
          borderRadius: sizes.borderRadius,
          display: "flex",
          overflow: "hidden",
        }}
      >
        {renderImage(image, sizes)}
        {renderLogo(sizes)}
        <div
          style={{
            display: "flex",
            position: "absolute",
            bottom: 0,
            left: 0,
            width: "100%",
          }}
        >
          <div
            style={{
              display: "flex",
              position: "relative",
              flexDirection: "column",
              padding: sizes.padding / 2,
              paddingTop: sizes.padding * 3,
              width: "100%",
              background: `linear-gradient(to top, rgba(${color.background.secondary.rgb},1), rgba(${color.background.secondary.rgb}, 0))`,
            }}
          >
            <div
              style={{
                fontSize: sizes.headerFontSize,
                fontFamily: "Header",
                lineHeight: 0.8,
                textTransform: "uppercase",
                color: color.text.primary.hex,
              }}
            >
              {title}
            </div>
            {product! ? renderProductPriceInfo(sizes, product) : null}
          </div>
        </div>
      </div>
    </div>
  );
}

function setupSizes(story: boolean, landscape: boolean): SocialShareSizes {
  let width = 1024;
  let height = 1024;

  if (landscape) {
    width = 1920;
    height = 1080;
  } else if (story) {
    width = 1080;
    height = 1920;
  }

  const padding = Math.round(Math.min(width, height) * 0.0725);
  const headerFontSize = Math.round(Math.min(width, height) * 0.1);
  const priceFontSize = Math.round(Math.min(width, height) * 0.08);
  const copyFontSize = Math.round(Math.min(width, height) * 0.025);
  const borderRadius = Math.round(Math.min(width, height) * 0.0075);

  return {
    width,
    height,
    padding,
    headerFontSize,
    priceFontSize,
    copyFontSize,
    borderRadius,
  };
}

export async function handler(req: Request) {
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }

  try {
    const urlParams = parseURLParams(req.url);
    const story = !!urlParams.story;
    const landscape = !!urlParams.landscape;
    const sizes = setupSizes(story, landscape);

    const headingFontData = await headingFont;
    const copyFontData = await copyFont;
    const copyBoldFontData = await copyBoldFont;

    let title = urlParams.title;
    let image: string | undefined | null = urlParams.image;
    let product: ProductShowFragment | undefined = undefined;

    const socialShareQuery = await graphQLClient<
      SocialShareQuery,
      SocialShareQueryVariables
    >({
      query: SocialShareDocument,
      variables: {
        productFilter: {
          id: { eq: urlParams.product },
        },
      },
      options: { serviceRole: true },
    });

    if (urlParams.product) {
      product = socialShareQuery.product?.edges[0].node!;
      title = product?.title.slice(0, 60);
      if (!image) {
        image = product?.images?.length ? imageUrl(product.images[0]!) : undefined;
      }
    }

    return new ImageResponse(
      (
        <div
          style={{
            display: "flex",
            position: "relative",
          }}
        >
          {renderBackgroundPattern()}
          {renderContent(sizes, title, image, product)}
        </div>
      ),
      {
        headers: {
          ...corsHeaders,
        },
        width: sizes.width,
        height: sizes.height,
        fonts: [
          {
            name: "Header",
            data: headingFontData,
          },
          {
            name: "Copy",
            data: copyFontData,
          },
          {
            name: "CopyBold",
            data: copyBoldFontData,
          },
        ],
      }
    );
  } catch (e) {
    console.log("here", `${e.message}`);
    return new Response(`Failed to generate the image`, {
      status: 500,
    });
  }
}

The response will return an image that looks like this and has the response net::ERR_INCOMPLETE_CHUNKED_ENCODING

[ascorbic]

Is it possible to make this more minimal, removing supabase for example?

[drewbietron]

Is it possible to make this more minimal, removing supabase for example?

import React from "https://esm.sh/react@18.2.0";
import { ImageResponse } from "https://deno.land/x/og_edge@0.0.6/mod.ts";

export const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

// All fetched via fetch and returning an arrayBuffer.  Fonts seem to work fine but dont get loaded with an incomplete response
const headingFontData = await headingFont;
const copyFontData = await copyFont;
const copyBoldFontData = await copyBoldFont;
const image = "image url";

return new ImageResponse(
      (<img src={image} />),
      {
        headers: {
          ...corsHeaders,
        },
        width: 1920,
        height: 1080,
        fonts: [
          {
            name: "Header",
            data: headingFontData,
          },
          {
            name: "Copy",
            data: copyFontData,
          },
          {
            name: "CopyBold",
            data: copyBoldFontData,
          },
        ],
      }
    );

Not returning the image will always result in a complete reponse. Its when adding the image that's within the response that the response gets cut

[ascorbic]

OK, can you reproduce it with a hard-coded image?

[drewbietron]

Yes I am able to reproduce the error with a hard coded image url. Here is one I'm testing https://api.pbvault.com/storage/v1/object/public/marketing/6.jpg