Getting Amplitude Logger [error] failed to fetch

Technical Questions CMS
1

Hi @manish-sharma,

I just registered my custom component on builder and got the following error.
The builder page in editor is flickering and the console shows the following error:

Screenshot 2024-04-29 at 3.55.56 PM
Screenshot 2024-04-29 at 3.55.56 PM1920×970 90.2 KB

Registry code:

Builder.registerComponent(TitleInfo, {
  name: "TitleInfo",
  inputs: [
    {
      name: "entryName",
      type: "string",
      defaultValue: "Incarnate",
      required: false,
    },
    {
      name: "suspense",
      type: "boolean",
      defaultValue: false,
      required: false,
    },
  ],
});

export async function fetchBuilderDataByEntryName(
  modelName: string,
  entryName: string,
): Promise<any> {
  try {
    return await builder.get(modelName, {
      query: {
        name: entryName,
      },
      fields: "data",
      cachebust: true,
      cache: false,
    });
  } catch (error) {
    console.error("Error fetching data by entry name:", error);

    return null;
  }
}

export const fetchCustomPromoTitleInfo = async (
  entryName: string = "Incarnate",
): Promise<CustomPromoTitleInfo> => {
  const builderResponse = await fetchBuilderDataByEntryName(
    "promo-title-info",
    entryName,
  ).then((res) => res.data);

  return builderResponse;
};

import TitleHeaderSection from "@/components/builder/title-info/title-header-section";
import styles from "@/components/builder/title-info/styles.module.css";
import { CustomDetailsType, DescriptionType } from "@/types/components";
import DetailsSection from "@/components/builder/title-info/details-section";
import { cn } from "@/utils/helper-function/utils";
import { ShadowAroundContainer } from "@/components/layout-designs/shadow-around-container";
import hexToRgb from "@/utils/helper-function/generateHexToRGB";
import { fetchCustomPromoTitleInfo } from "@/libs/actions/builder/builder.actions";

type TitleInfoProps = {
  suspense: boolean;
  entryName: string;
};

export const TitleInfo: React.FC<TitleInfoProps> = async (
  props: TitleInfoProps,
) => {
  const titleData = await fetchCustomPromoTitleInfo(props.entryName);

  const {
    description,
    authors,
    performedBy,
    duration,
    releasedOn,
    language,
    format,
    topGradientColor,
    bottomGradientColor,
    bgImageColor,
    bgImageOpacity,
    bgImageUrl,
  } = titleData;

  const titleDetails: CustomDetailsType = {
    authors,
    performedBy,
    releasedOn,
    language,
    duration,
    format,
  };

  const titleDescription: DescriptionType = description;
  const bgImageColorRgb = hexToRgb(bgImageColor ?? "#0a1523", bgImageOpacity);

  return (
    <div
      className={cn(
        styles.titleInfoContainer,
        "flex-col relative w-screen h-full bg-cover bg-no-repeat bg-promo-blue",
      )}
      style={{
        boxShadow: `0rem 25rem 15rem 0rem ${topGradientColor} inset`,
        backgroundImage: `linear-gradient(
            ${bgImageColorRgb},
            ${bgImageColorRgb}
        ), url(${bgImageUrl})`,
      }}
    >
      <div
        data-testid="titles-info"
        className="relative w-full flex-col items-center pt-10 gap-y-16 overflow-hidden"
      >
        <TitleHeaderSection suspense={props.suspense} data={titleData} />
      </div>
      <DetailsSection
        suspense={props.suspense}
        description={titleDescription}
        details={titleDetails}
      />
      <ShadowAroundContainer
        key="bottom-curved-shadow"
        insetShadow={[
          `${bottomGradientColor} 0rem -7rem 8rem -1.5rem inset`,
          `${bottomGradientColor} 0rem -7rem 3rem 0.5rem inset`,
          `${bottomGradientColor} 0rem -7rem 14rem -7.5rem inset`,
          `${bottomGradientColor} 0rem -12rem 14rem -1.5rem inset`,
          `${bottomGradientColor} 0rem -7rem 7rem -4.5rem inset`,
        ]}
        width="100%"
        height="100%"
        borderRadius="100% 100% 100% 100% / 0% 0% 0% 0%;"
      />
    </div>
  );
};

This is my public builder API key :
d18ddccf804e4ea8823e9313d4661fbc

I am also unable to see the state content

Screenshot 2024-04-29 at 3.53.29 PM
Screenshot 2024-04-29 at 3.53.29 PM2532×1436 270 KB

Please help me in resolving this issue.

2

Hello @sohail,

The warning you’re encountering is likely due to using async in the function declaration for a React functional component. React functional components cannot be declared as async , and you should handle asynchronous operations differently within them.

You can try out the below code

import { useState, useEffect } from 'react';
import TitleHeaderSection from "@/components/builder/title-info/title-header-section";
import styles from "@/components/builder/title-info/styles.module.css";
import { CustomDetailsType, DescriptionType } from "@/types/components";
import DetailsSection from "@/components/builder/title-info/details-section";
import { cn } from "@/utils/helper-function/utils";
import { ShadowAroundContainer } from "@/components/layout-designs/shadow-around-container";
import hexToRgb from "@/utils/helper-function/generateHexToRGB";
import { fetchCustomPromoTitleInfo } from "@/libs/actions/builder/builder.actions";

type TitleInfoProps = {
  suspense: boolean;
  entryName: string;
};

export const TitleInfo: React.FC<TitleInfoProps> = (props: TitleInfoProps) => {
  const [titleData, setTitleData] = useState<CustomDetailsType | null>(null);

  useEffect(() => {
    const fetchData = async () => {
      const data = await fetchCustomPromoTitleInfo(props.entryName);
      setTitleData(data);
    };

    fetchData();
  }, [props.entryName]);

  if (!titleData) {
    return <div>Loading...</div>;
  }

  const {
    description,
    authors,
    performedBy,
    duration,
    releasedOn,
    language,
    format,
    topGradientColor,
    bottomGradientColor,
    bgImageColor,
    bgImageOpacity,
    bgImageUrl,
  } = titleData;

  const titleDetails: CustomDetailsType = {
    authors,
    performedBy,
    releasedOn,
    language,
    duration,
    format,
  };

  const titleDescription: DescriptionType = description;
  const bgImageColorRgb = hexToRgb(bgImageColor ?? "#0a1523", bgImageOpacity);

  return (
    <div
      className={cn(
        styles.titleInfoContainer,
        "flex-col relative w-screen h-full bg-cover bg-no-repeat bg-promo-blue",
      )}
      style={{
        boxShadow: `0rem 25rem 15rem 0rem ${topGradientColor} inset`,
        backgroundImage: `linear-gradient(
            ${bgImageColorRgb},
            ${bgImageColorRgb}
        ), url(${bgImageUrl})`,
      }}
    >
      <div
        data-testid="titles-info"
        className="relative w-full flex-col items-center pt-10 gap-y-16 overflow-hidden"
      >
        <TitleHeaderSection suspense={props.suspense} data={titleData} />
      </div>
      <DetailsSection
        suspense={props.suspense}
        description={titleDescription}
        details={titleDetails}
      />
      <ShadowAroundContainer
        key="bottom-curved-shadow"
        insetShadow={[
          `${bottomGradientColor} 0rem -7rem 8rem -1.5rem inset`,
          `${bottomGradientColor} 0rem -7rem 3rem 0.5rem inset`,
          `${bottomGradientColor} 0rem -7rem 14rem -7.5rem inset`,
          `${bottomGradientColor} 0rem -12rem 14rem -1.5rem inset`,
          `${bottomGradientColor} 0rem -7rem 7rem -4.5rem inset`,
        ]}
        width="100%"
        height="100%"
        borderRadius="100% 100% 100% 100% / 0% 0% 0% 0%;"
      />
    </div>
  );
};
1 Like
3

This works. thanks a lot. :slight_smile: