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

When working with APIs, handling responses is a critical part of the development process. While successful responses are relatively straightforward to manage, dealing with errors can be more challenging. In this blog post, we’ll focus on extracting error information from a Blob API response in JavaScript. We’ll explore how to handle different error scenarios and provide practical examples to guide you through the process.

Understanding Blob API Responses

Before diving into error handling, let’s briefly discuss Blob API responses. A Blob (Binary Large Object) represents raw data, such as images, audio files, or other binary data. When an API returns an error, it often includes additional information in the response body. This information can be in various formats, including JSON, plain text, or HTML.

In our examples, we’ll assume that the API returns error details as a JSON object within a Blob. However, the principles apply to other formats as well.

Scenario: Fetching Data from an API

Let’s start with a common scenario: fetching data from an API using the Fetch API. We’ll assume that the API endpoint returns a Blob containing error information when something goes wrong (e.g., invalid token, server error, or missing data).

Here’s how you might structure your code:

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      const errorBlob = await response.blob();
      const errorData = await parseErrorBlob(errorBlob);
      console.error('API error:', errorData.message);
    } else {
      const data = await response.json();
      // Process the successful response
    }
  } catch (error) {
    console.error('Network error:', error.message);
  }
}

async function parseErrorBlob(blob) {
  // Implement your logic to extract error data from the Blob
  // For example, assuming the Blob contains a JSON object:
  const text = await blob.text();
  return JSON.parse(text);
}

fetchData();

Extracting Error Data from the Blob

The parseErrorBlob function is where we extract error data from the Blob. Depending on the API’s response format, you might need to adjust this function. Here are some common scenarios:

1. JSON Error Response

If the API returns a JSON object with error details, you can parse it directly:

async function parseErrorBlob(blob) {
  const text = await blob.text();
  return JSON.parse(text);
}

2. Plain Text Error Message

If the Blob contains a plain text error message, you can extract it as follows:

async function parseErrorBlob(blob) {
  const text = await blob.text();
  return { message: text };
}

3. Custom Error Format

In some cases, the API might use a custom error format. You’ll need to adapt the parseErrorBlob function accordingly. For example:

async function parseErrorBlob(blob) {
  // Custom logic to extract error data
  // Example: extracting error code and message
  const text = await blob.text();
  const [code, message] = text.split('|');
  return { code, message };
}

Handling Specific Error Scenarios

1. Unauthorized Access (401)

When the API returns a 401 status code (Unauthorized), you can handle it like this:

if (response.status === 401) {
  const errorBlob = await response.blob();
  const errorData = await parseErrorBlob(errorBlob);
  console.error('Unauthorized:', errorData.message);
  // Redirect to login page or show an error message
}

2. Server Error (5xx)

For server errors (e.g., 500 Internal Server Error), you can log the error and notify the user:

if (response.status >= 500) {
  const errorBlob = await response.blob();
  const errorData = await parseErrorBlob(errorBlob);
  console.error('Server error:', errorData.message);
  // Show a friendly error message to the user
}

Conclusion

Handling error responses from APIs is essential for building robust applications. By understanding Blob API responses and extracting error data, you can create better user experiences and improve debugging. Remember to adapt the parseErrorBlob function based on your specific API’s response format.

In this blog post, we explored how to extract error information from a Blob API response in JavaScript. We covered common scenarios, such as handling unauthorized access and server errors, and provided practical examples. By mastering error handling, you’ll be better equipped to build reliable and user-friendly applications.