Tentei implementar o upload de imagens usando o recurso BlobStorage do Azure. Tenho um método no meu frontend Next.js que chama o backend para criar URLs de blob exclusivas para as imagens adicionadas pelo usuário após a edição do formulário. O problema é que usei Promise.all, que bombardeou meu backend com solicitações paralelas, resultando na execução destas duas linhas mais de 20 vezes:
var blobContainerClient = _blobServiceClient.GetBlobContainerClient(_imagesContainerName);
var blobClient = blobContainerClient.GetBlobClient(uniqueFileName);
Cheguei à conclusão de que este é o problema principal. Depois de chamar este método, não só meu VS travou, como mesmo após reiniciá-lo, não consigo acessar algumas páginas do meu aplicativo devido a inúmeras solicitações pendentes.
Estou realmente confuso com o problema e como corrigi-lo. Tentei verificar o BlobStorage no Azure em busca de conexões abertas, pensando que, mesmo depois de reiniciar o aplicativo, elas ainda persistiam de alguma forma. Não encontrei nada aqui. Verifiquei as métricas do backend implantado e encontrei apenas um pico enorme no uso da CPU e mais de 200 solicitações (a maioria provavelmente sendo uploads de imagens). Tenho quase certeza de que esgotei meu pool de conexões, mas não entendo por que meu programa consome tantos recursos mesmo após a reinicialização, e metade das chamadas ao banco de dados demoram uma eternidade para serem concluídas.
const processedChapters = await Promise.all(
chapters.map(async (chapter) => {
const search_language = getSearchLanguage(diplomaSettings.languages);
if (chapter.images && chapter.images.length > 0) {
const uploadedImages = await Promise.all(
chapter.images.map(async (imageDataUrl, index) => {
if (
typeof imageDataUrl === "string" &&
imageDataUrl.startsWith("data:")
) {
const imageUrl = await uploadImageToBlobStorage(
imageDataUrl,
chapter.id,
index
);
return imageUrl;
}
return imageDataUrl;
})
);
return {
...chapter,
search_language,
images: uploadedImages.filter((url) => url !== null),
};
}
return {
...chapter,
search_language,
};
})
);
Aqui está o código de backend que é chamado do frontend:
public string GetUploadUrl(string fileName)
{
var uniqueFileName = $"{Path.GetFileNameWithoutExtension(fileName)}-{Guid.NewGuid()}{Path.GetExtension(fileName)}";
var blobContainerClient = _blobServiceClient.GetBlobContainerClient(_imagesContainerName);
var blobClient = blobContainerClient.GetBlobClient(uniqueFileName);
var sasBuilder = new BlobSasBuilder
{
BlobContainerName = _imagesContainerName,
BlobName = uniqueFileName,
Resource = "b",
ExpiresOn = DateTime.UtcNow.AddMinutes(15)
};
sasBuilder.SetPermissions(BlobSasPermissions.Write | BlobSasPermissions.Create | BlobSasPermissions.Read);
var storageSharedKeyCredential = new StorageSharedKeyCredential(_accountName, _accountKey);
var sasQueryParameters = sasBuilder.ToSasQueryParameters(storageSharedKeyCredential);
var sasUrl = $"{blobClient.Uri}?{sasQueryParameters}";
return sasUrl;
}
O problema acima ocorre porque o uso
Promise.all
de uploads de imagens faz com que seu frontend bombardeie o backend com solicitações paralelas. Cada upload de imagem envolve a geração de uma URL SAS por meio da criação de umBlobClient
, o que pode sobrecarregar o backend e esgotar recursos (como pools de threads ou limites de soquetes de saída), resultando em instâncias VS congeladas e solicitações pendentes indefinidamente.Você pode corrigir isso limitando a simultaneidade no frontend usando a
p-map
biblioteca, o que permite o mapeamento de promessas com um número controlado de execuções simultâneas.Atualize o código no seu frontend:
O código acima evita a sobrecarga do backend permitindo apenas 5 uploads por vez, melhorando drasticamente a estabilidade e a capacidade de resposta do backend.