What are the best methods for identifying and handling transient upload errors in Azure blob storage?

I have a functional code for uploading files to Azure blob storage from frontend TypeScript. I need to handle errors that may occur during the upload process, such as network issues. How can we effectively catch and manage these errors on the client side? For example, if an upload of a 1GB file is interrupted by a network problem, will it automatically resume once the connection is restored or will it start over?

const blobServiceClient = new BlobServiceClient(`https://${STORAGE_ACCOUNT_NAME}.blob.core.windows.net`,credentials);
const containerClient = blobServiceClient.getContainerClient(containerName);
const fileName = path.basename(localFilePath);
const blobClient = containerClient.getBlobClient("folder1/"+fileName);
//const blobClient = containerClient.getBlobClient(fileName);
const blockBlobClient = blobClient.getBlockBlobClient();
blockBlobClient.uploadFile(localFilePath);

Answer №1

To address errors related to upload failures due to network or other issues, we need to implement error handling on the front end. How can we efficiently capture and manage these errors?

One approach is to encapsulate the code within a try/catch block. When an error occurs during the storage process, an error object will be generated, containing a property called statusCode. By evaluating this status code, we can determine whether the operation should be retried. Typically, if the status code is between 400 and 500, the operation should not be repeated, while any status code equal to or greater than 500 may warrant a retry.

For instance, if a file with a size of 1GB encounters a network interruption mid-upload, will the process automatically resume when connectivity is restored, or will it restart from the beginning?

The SDK does not support resuming failed uploads; therefore, in the event of a network issue, the upload process will recommence from the start. It is essential for your application to handle and track the upload progress to avoid data loss.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Monitor the change in values upon pressing the submit button on Angular

I am currently working with an edit form that contains data in the input fields. <ng-form #infoForm="ngForm" novalidate> <div> <label for="firstName">First Name :</label> <input type=" ...

How can I ensure that TypeScript recognizes when I add a missing property back to an object in this scenario?

I recently came across an issue while using Typescript: Omit nested property and ended up encountering more complex errors. So my question remains - how can I replace multiple nested props on a TypeScript input in the convert function? P.S. On a side not ...

What could be causing the global npm package to not be utilized for module dependencies?

My typescript and ts-node are already installed globally. In my package.json file, I have the necessary configurations to run tests with npm test. Everything works fine since ts-node and typescript are installed as local modules. { "name": "two_sum", ...

Error in Webpack: "Module cannot be found: unable to resolve in tsx files"

Attempting to deploy my React projects to the development server has been successful on my local Macbook. However, issues arose when deploying the React project to PM2 in the development server. Here are some excerpts from the error messages: 2021-01-20 1 ...

Sending information from service.ts to component

I'm encountering a roadblock with this issue, hopefully I can find some assistance here. Essentially, I am attempting to make a simple get http request in http.service and then pass the json object to the filter.service. From there, I aim to transfer ...

Is there a way to show text as symbols in Primeng components?

Check out this helpful example that demonstrates what I am attempting to achieve. I have implemented p-menu from primeng. Is there a method to convert text into symbols like &trade to ™ and &#8482 to ®? ...

The array remains undefined even after being assigned within the subscribe function

I have encountered an issue in my Angular app where the array productLocations is being assigned in the ngOnInit method within a subscription, but it remains undefined when used in another method. Despite following advice on Stackoverflow to move the assig ...

What is the best way to trigger a useReducer dispatch function from a different file that is not a React component, without relying on Redux?

In my project, I have a function component that shows a game board named "EnemyBoardComponent.tsx" const enemyBoardReducer = (state:number[][], action:Action)=>{ switch(action.type){ case "update": { return EnemyBoard.getGrid(); ...

A step-by-step guide on setting the default selection for the initial ionic radio button using Angular

Could someone assist me in pre-selecting the initial radio button from a list of generated radio buttons that can be updated if the user selects a different radio button? I am encountering an error with my current implementation: TypeError: Cannot read pr ...

What are some ways to resolve this console error: "TS2307: Could not locate module '@components/common/ButtonBlock' or its corresponding type declarations."

While the project is running smoothly, I am noticing a multitude of errors appearing in the console of VS Code. How can I eliminate these error messages? It seems to be related to TypeScript. Additionally, I am encountering an error in the browser as well ...

The observable did not trigger the next() callback

I'm currently working on incorporating a global loading indicator that can be utilized throughout the entire application. I have created an injectable service with show and hide functions: import { Injectable } from '@angular/core'; import ...

Can we categorize various types by examining the characteristics of an object?

Is it feasible with TypeScript to deduce the result below from the given data: const data = { field1: {values: ['a', 'b', 'c']}, field2: {values: ['c', 'd', 'e'], multiple: true} } const fiel ...

Issue with Symbol Constructor in Typescript: [ts] The 'new' keyword can only be used with a void function

Just starting out with typescript and experimenting with the ES6 Symbol constructor. How can I address this ts lint problem without resorting to using any? const symbol = new Symbol(path); I'm trying to avoid doing this: const symbo ...

What is the best way to reorganize Discord channels based on numerical order when interacting with the application?

Whenever someone submits an application for the server, a designated channel is created at the top of the server (view example here). However, responding to these applications in a consistent order has proven challenging due to various factors. Once I resp ...

Svelte: The selection issue that's not updating [CSS glitch]

I am utilizing a Svelte Selection component to fetch and display data in a dropdown. Users have the ability to select different properties, which is functioning correctly. However, I am encountering an issue when attempting to preselect certain options des ...

The type 'BusinessParameter[]' does not share any properties with the specified type

Within my API function, the return type is specified as Promise<BusinessParameter[]> because the expected outcome is an array of BusinessParameters. Despite assigning the same type to the variable where this result is stored (returnOrderItemBusinessP ...

Decipher intricate JSON data using Typescript

When a request receives a response, it is delivered in JSON format. The specific structure of the JSON data is as follows: { "32": { "docKey": "32", "outletId": 32, "mdngOutlet": { "outletBasic": { "outletId": 32, } ...

Confirm the array of elements

Looking to validate an array of objects being sent through Postman, structured like this: { pit_fee: [ { range: [1,2] fee:25 }, { range: [3,4] fee:30 }, } Using the following validation schema with class-validators: export class ...

Leveraging RXJS for real-time response to keyboard and mouse click combinations in web

I am new to RXJS and looking for a way to drag an HtmlElement when the user presses the space key and then drags the element with the mouse. The dragging should be initiated by either pressing the SPACE key followed by a left click, or vice versa. The dra ...

A step-by-step guide to customizing the Material UI Chips delete SVG icon to appear in white color through

Using a Material UI component, I added a custom class to my chip. Attached is a screenshot showing what I mean. Currently, I am attempting to change the color of the cross button to white. After inspecting the element, I discovered that it is an SVG ico ...