Eğitim / Kodlama 29 Mart 2024

How to Extract an Error Object from a Blob API Response in JavaScript

How to Extract an Error Object from a Blob API Response in JavaScript

I encountered an issue when I made a GET request in my React project which was supposed to return a file I could download. For the file to download properly, I had to make the response type a blob.

But if an error occurred when the server returns a JSON object, I’d be unable to get that object because I had already defined the response type as a blob. And if I remove the blob definition, the file would just return as regular JSON and might not download properly.

So how do I get the blob to download it and retrieve the error object in case something didn’t go well from the server? Thankfully, there’s a way to achieve this.

This guide will show you how to retain a JSON object for error handling purposes, while being able to download a file from a server. We’ll be using Axios, a JavaScript library used for making HTTP requests, to make our API call.

Step 1: Define the Response Type in the API Call

First, define a function that makes the HTTP request to the server. In this case, we’re expecting a file, so the conventional HTTP verb would be GET.

The response type for Axios requests is JSON by default, but we want to change that to a blob like this:

import axios from "axios";

const getFileFromServer = () => {
    const res = await axios.get('https://api.some-server.com', {responseType: 'blob'})?.data;
    return res;
}

Step 2: Convert Blob To Text

In the previous step, we were able to get our file as a blob easily. But when it comes to showing the error, we need it to show as JSON.

First, we need to wrap the request in a try/catch statement to specify what should happen if an error is thrown while the request is being made.

import axios from "axios";

const getFileFromServer = async () => {
    try {
        const res = await axios.get('https://api.some-server.com', {responseType: 'blob'}).data;
    return res;
    }
    catch (error) {
        let errorResponse = await error.response.data.text();
        const errorObj = JSON.parse(response);
        console.log(errorObj) // log error to console
    }
}

The type conversion was done inside the catch block. First, we converted the response data to a JSON string using the text() method from JavaScript’s Fetch API.

Finally, we used the JSON.parse() method to convert that string to actual JSON. That way, we can access the object in its intended format while being able to retrieve the file from the server if there is no error.

Logging the error object to the console will result in something like this:

{
  "statusCode": 400,
  "message": "Some error occured"
}

Conclusion

This is one of the problems I faced in real life, so I thought I’d share it in case someone else encounters it.

Let me know your thoughts about the article, and feel free to make any suggestions you think could improve my solution.

Thanks for reading!

source

Spread the love <3

You may also like...

Mar
26
2024
0
ReactJS em 1h - Componentes - Iniciantes

ReactJS em 1h – Componentes – Iniciantes

Participe da próxima turma do Explorer – Programa de formação profissional em programação WEB – do zero até sua primeira...

Spread the love <3
Ağu
04
2024
0

Huawei Nova Flip’in performans testi yapıldı! İşte sonuçlar

Huawei’nin yeni katlanabilir ekranlı telefonu Nova Flip, Geekbench’te ortaya çıktı. Model numarası PSD-AL00 olan bu cihaz, 8 Ağustos’ta bizlerle olacak...

Spread the love <3
Eyl
27
2024
0

Ubisoft’ta kazan kaynadı: Hissedarlar ayağa kalktı

Ubisoft son günlerde büyük bir iç karışıklık yaşıyor. Yakın zaman önce çalışanlar, grev yapmak için bir araya gelmiş ve şirketin...

Spread the love <3
Nis
16
2024
0
Why &amp; When I Use React JS

Why & When I Use React JS

React JS is not always my go to choice. In this video I explain why its a great tool for...

Spread the love <3
Whatsapp İletişim
Merhaba,
Size nasıl yardımcı olabilirim ?