Seeing sudden High Bandwidth usage for a builder API

Hi,
We’re seeing unexpectedly high usage for a builder API, as reported under the “Bandwidth” section of our subscription dashboard. The API in question is

[https://cdn.builder.io/api/v3/content/news?apiKey=d18ddccf804e4ea8823e9313d4661fbc&limit=30&noTraverse=true&includeRefs=true&omit=meta.componentsUsed](https://API URL)

I’ve already checked for circular dependencies in the model and verified that caching is implemented wherever this API is used at the application level. However, the high bandwidth numbers still don’t add up, especially considering the API only returns a simple JSON response.
Could you help us with more detailed metrics or insights to better understand this usage and identify the root cause?
Thank you.

This is urgent please help me asap

Hi @manish-sharma,

Could you please help me with this?

Hi Sohail​,

Could you please check your codebase to see if there are any fetch calls being made to retrieve news data from Builder?

Let me know if you need any further assistance!

Thanks,

Hi Parth,

Thank you for your quick response.

We went through the CSV file, and this is the information that we saw earlier in our Builder.io dashboard, but unfortunately, we saw this sudden sharp rise in bandwidth consumption for the “…/news” api call.
Nothing has changed in our codebase so far related to this section, and no other section using this.

//builder sdk functions used to fetch news data

export async function fetchFilteredModelData(
modelName: string,
query: Record<string, any>,
): Promise<any> {
try {
return await builder.getAll(modelName, {
query,
cachebust: true,
noTraverse: false,
});
} catch (error) {
console.error(“Error fetching filtered data:”, error);

return [];

}
}

export async function fetchAllBuilderModelData(
modelName: string,
): Promise<any> {
try {
return await builder.getAll(modelName, { cachebust: true });
} catch (error) {
console.error(“Error fetching all model data:”, error);

return [];

}
}

export async function fetchBuilderDataById(
modelName: string,
id: string,
): Promise {
try {
return await builder.get(modelName, {
query: {
id: id,
},
cachebust: true,
});
} catch (error) {
console.error(“Error fetching data by ID:”, error);

return null;

}
}

export async function fetchNewsDetailsbyId(id: string) {
const newsDetails = await fetchBuilderDataById(“news”, id);
if (!newsDetails) {
return null;
}

return newsDetails;
}

export const fetchNewsData = async (
slug: string,
currentPage: number,
orderValue: 1 | -1,
): Promise<LatestNewsItem> => {
try {
const entry = await fetchFilteredModelData(“news”, {});

const newsList = entry.filter((eachNews) => {
  return eachNews.data.categories
    ? eachNews.data.categories.some((eachCategory) => {
        return slug === createNameSlug(eachCategory.category);
      })
    : false;
});

newsList.sort((a: any, b: any) => {
  const dateA = new Date(a.data.date).getTime();
  const dateB = new Date(b.data.date).getTime();
  return (dateB - dateA) * orderValue;
});

const endIndex = currentPage * 3;
const slicedData = newsList.slice(0, endIndex);

return slicedData.map((item: any) => ({
  ...item.data,
  id: item.id,
}));

} catch (error) {
console.error(“Error fetching and sorting news items by slug:”, error);
return ;
}
};

export const fetchAllNewsData = async (
currentPage: number,
orderValue: 1 | -1,
): Promise<LatestNewsItem> => {
try {
const entry = await fetchAllBuilderModelData(“news”);

entry.sort((a: any, b: any) => {
  const dateA = new Date(a.data.date).getTime();
  const dateB = new Date(b.data.date).getTime();
  return (dateB - dateA) * orderValue;
});

const endIndex = currentPage * 3;
const slicedData = entry.slice(0, endIndex);

return slicedData.map((item: any) => ({
  ...item.data,
  id: item.id,
}));

} catch (error) {
console.error(“Error fetching all news data:”, error);
return ;
}
};

//functions being used in nextjs unstable_cache to cache the data on server side

export const getCachedNewsBuilderDataById = unstable_cache(
async (id) => {
const data = await fetchNewsDetailsbyId(id);

return data;

},
[“news-details”],
{
tags: [“news-details”],
revalidate: SSG_REVALIDATE_INTERVAL,
},
);

export const getCachedAllNewsData = unstable_cache(
async (currentPage: number, orderValue: 1 | -1) => {
const data = await fetchAllNewsData(currentPage, orderValue);

return data;

},
[“all-news-details-key”],
{
tags: [“news-details”, “all-news-list”],
revalidate: SSG_REVALIDATE_INTERVAL,
},
);

//calling cached functions in page.tsx files

const newsItems = await getCachedAllNewsData(currentPage, orderValue);

const entry = await getCachedNewsBuilderDataById(id);

If you need more code snippets from me, I can share them, but currently our approach is that we are using cached data of the API from nextJS applicatio,n and this is invalidated after 4 hours. This logic remained intact right from the beginning and this spike we saw happened since end of last month. This is concerning.

Would be helpful if you could share more details on the requests made to this API, narrow it down and the root cause of this spike and then possible solution to avoid this.

Hi Sohail,

I reviewed the code you provided, along with the monthly views and bandwidth data. With only 233 views, it’s unlikely that the bandwidth usage would amount to 254GB.

Have there been any recent activities on your end such as automation, quality testing, bot traffic, or marketing campaigns that might explain the spike?

Additionally, could your development team check the server logs to identify if any APIs are being called repeatedly or excessively? This could help us pinpoint the source of the issue more accurately.

Let me know what you find — happy to assist further.

Thanks,

It could be a DDoS attack, and you can detect it using a cache buster monitor.

1 Like