Getting the Full Error Message in Axios with React Native Expo

I'm encountering a network error while using Axios with React Native.

Previously, when working with React JS on the web, I could console log the error or response and see all the details. However, in Expo, all I get is "Axios error: Network error" when logging the error. How can I view the complete response similar to React web?

I have looked online for a solution but haven't found anything helpful.

Answer №1

To enhance observability, the Axios Error object can be converted to JSON using its toJSON() method.

However, this process excludes valuable response data that may offer crucial insights. My preferred approach is to combine both methods. Here's an example:

try {
  const res = await axios({ /* ... */ });
} catch (err) {
  // Using a Typescript type guard for AxiosError
  if (axios.isAxiosError(err)) {
    console.error("Axios request failed", err.response?.data, err.toJSON());
  } else {
    console.error(err);
  }

  throw new Error("Request failed");
}

For further details, check out Handling Errors

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

Possibility for Automatic Type Inference in Generics

Is there a way to have a method infer the type of function parameter without specifying its generic? Currently it is 'GET' | 'POST', but I only need the literal 'GET' const func = <Params, Method extends "GET" | & ...

Having trouble retrieving a specific key from the state object in Redux using TypeScript

I have incorporated TypeScript into my Ionic project, using React hooks. I recently added an errorReducer to handle any errors that may arise from the server. Below is a snippet of my code: Action import { ERROR_OCCURRED } from "./types"; ...

What is the reason behind the TypeScript HttpClient attempting to interpret a plain text string as JSON data?

When utilizing Angular TypeScript, I have implemented the following approach to send a POST request. This request requires a string parameter and returns a string as the response. sendPostRequest(postData: string): Observable<string> { let header: ...

In React Native on Android, the permission to WRITE_EXTERNAL_STORAGE is consistently denied

Application Environment Information: "react": "18.2.0", "react-native": "0.71.7", "react-native-permissions": "^3.8.0", "react-native-webview": "^12.0.2" Testing Device Detail ...

Tips for specifying a custom type as the return value of a function and denote it as a promise

I encountered this code snippet: import * as Promise from 'bluebird'; import {Response} from '../commonInterfaces/httpService'; getCall(url: string, accessToken: string, extraHeaders: object): Promise<Response> { let headers ...

Using discord.js to conveniently set up a guild along with channels that are equipped with custom

When Discord devs introduced this feature, I can't seem to wrap my head around how they intended Discord.GuildManager#create to function. How could they possibly have expected it to work with Discord.GuildCreateOptions#channels[0], for instance, { ...

Destructuring objects with default values from two related interfaces

In my project, I have defined two interfaces called User and BankUser. The structure of the interface for BankUser looks like this: interface BankUser extends User { banks: { [bank_id: string]: string}; isSuper: boolean; } I am working on a function ...

Utilize Property Binding to Access the Map

I am struggling to extract a value from a Map and use it as the background color of a div element, but I can't seem to get it right. My syntax seems off. What mistake am I making? <div [style.background-color]="bgcolor" width="50px" height="50px"& ...

The error message "Type 'Observable<void>' cannot be assigned to type 'void | Action | Observable<Action>' when integrating an effect" is displayed

Encountering an error when trying to add effects using the 'run' method. Attempted to manually return a string, number, and other types, but nothing seems to work. Here is the effects code snippet: @Effect() getRoles$: Observable<Roles[]> ...

typescript Parameter type dependency based on value is not functioning

interface AddDataRequest{ data:any } interface AddDataResponse{ id:string } interface ITest{ addData(json:AddDataRequest):Promise<AddDataResponse> removeData(json:AddDataResponse):Promise<boolean> } function testInterface<A e ...

Error encountered: No matching overload found for MUI styled TypeScript

I am encountering an issue: No overload matches this call. Looking for a solution to fix this problem. I am attempting to design a customized button. While I have successfully created the button, I am facing the aforementioned error. Below is my code ...

What is the process of overriding a method from an abstract class that employs generics for typing?

In my quest to develop an abstract class with an abstract static method, I find myself wanting to override this method in a concrete class. The static nature of the method stems from its responsibility to create a 'copy' from a database model and ...

How can I access Excel files in Node.js for both web and mobile apps?

Currently venturing into the world of node js, I have embarked on a project to develop both a web application and a mobile app. My plan is to create a Node API first, followed by building a web app (potentially utilizing Angular) and an Android App. The pr ...

Sending nested JSON in Angular 2 Post Request

Are there any efficient ways to handle the task of importing raw JSON data and posting it to a server using an import function? For example, if a user copies and pastes the following JSON: { "name": "testing", "design": [ { "name": "test", ...

Using Typescript: invoking static functions within a constructor

This is an illustration of my class containing the relevant methods. class Example { constructor(info) { // calling validateInfo(info) } static validateInfo(info):void { // validation of info } I aim to invoke validateInfo ...

Issue with Vue 3 / Typescript: Unable to locate variable name in template

When working with Vue 3 and Typescript, I encountered an error that says "Cannot find name" when trying to reference a data variable in a certain area. How can I resolve this issue? Attached is a screenshot for reference: . Thank you in advance. ...

What is the best way to integrate Nextjs Link Component with framer motion in a Typescript environment?

Description I am trying to use Framer Motion to animate a Next.js Link component in a TypeScript environment, but I keep encountering a type error: Property 'Link' does not exist on type '(<Props extends {}>(Component: string | Compo ...

The subscribe method in Angular TS may be marked as deprecated, but worry not as it is still

I have developed a function that retrieves new data from a service file each time it is called. Here is how the function looks: onCarChange() { this.carService.getCarData(this.selectedCar).subscribe( async (response: CarData) => { if (response?.d ...

Comparing plain objects and class instances for modeling data objects

What is the recommended approach for creating model objects in Angular using TypeScript? Is it advisable to use type annotation with object notation (where objects are plain instances of Object)? For example, let m: MyModel = { name: 'foo' } ...

Effective strategies for managing form submissions with React and Typescript

As I dive into refactoring my code to TypeScript, especially as I am still getting accustomed to it, I find myself pondering about the HTML element types with React events. This has led me to rethink how I approach form creation and submission event handli ...