axios.post is returning error when used with redux-saga - react-native

I recently converted my redux-thunk middleware code to use redux-saga and it was working all these days fine and all of a sudden it is throwing an error. Not sure why!!
My Spring Boot REST Client is returning the proper response and no errors in the log. And if i make the same request using swagger i am getting the response back as expected so there is nothing wrong on the server side.
I have the following code
const LOGIN_URL = 'http://localhost:8888/api/a/login';
export function* loginUserAsync(action) {
console.log('.loginUserAsync() : action:', action);
yield put({ type: LoginConstants.LOGIN_USER_IN_PROGRESS });
const postParams = {
username: action.props.username,
password: action.props.password
};
const headerParams = {
headers: {
'Content-Type': 'application/json',
//'Content-Type': 'x-www-form-urlencoded'
}
};
console.log('headerParams', headerParams);
console.log('postParams', postParams);
try {
console.log('Before making async post call using axios');
const response = yield call(axios.post, LOGIN_URL, postParams, headerParams);
let token;
console.log('response', response);
if (response.headers) {
token = response.headers['x-auth-token'];
AsyncStorage.setItem('jwt', token);
}
// Login Succeeded fire Login Success Action
yield put({
type: LoginConstants.LOGIN_USER_SUCCESS,
token,
account: response.data
});
const navigatorUID = Store.getState().navigation.currentNavigatorUID;
Store.dispatch(NavigationActions.push(navigatorUID, Router.getRoute('home')));
} catch (error) {
// Login Failed fire Login Failure Action
console.log('loginUserAync() : error:[' + JSON.stringify(error) + ']');
yield put({
type: LoginConstants.LOGIN_USER_FAILURE,
error: error.data
});
}
}
export function* loginUser() {
console.log('.loginUser() :');
yield takeEvery(LoginConstants.LOGIN_USER, loginUserAsync);
}
In the console i am seeing the following:
I have no idea why it stopped working all of a sudden.
Thanks
Sateesh

For some reason localhost and 127.0.0.1 are not being recognized and i have to use the actual IP Address.
I had that Issue when i tried to run it in my mac book. It always worked with localhost in Ubuntu.

Related

React Native Axios Network Error but works fine on postman client

I'm trying to get axios working on a react native project to reach a backend but I am getting the Network Error issue that I just can't seem to debug.
const searchApi = async () => {
try {
let res = await axios.get('https://product.company.com/api/documents/invoices');
console.log(res);
} catch (err) {
console.log(err);
}
}
So if I was to do a get request to the example url provided via Thunder Client or Postman Client, I get the appropriate response of
{
"status": "401 error",
"message": "Token not found."
}
But when done through axios, I seem to get a network error. I'm a little unsure how I can debug this too to get more error logs.
Try with below code:
Replace with Your URL
var config = {
method: 'get',
url: 'https://reqres.in/api/users?page=1',
headers: {
'Content-Type': 'application/json'
}
};
axios(config).then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
It's not a network error but an unauthorized error. You need to pass some authenticated token in the header.

Axios does not catch any of the error responses in vue

I have a function created that makes an axios get API call. When the api responds successfully everything works fine, but when the API call has any kind of error it does not reach the catch block. For example:
public async getData() {
try {
const response = await axios.get('https://599d6a620a785b0011f4f6c8.mockapi.io/users');
console.log('success', response)
}catch( error) {
console.log('errr',error);
};
}
I get the following response in the console:
success {data: Array(100), status: 200, statusText: 'OK', headers: {…}, config: {…}, …}
Now, when i change the url of the above function (to mimic a 404) to:
public async getData() {
try {
const response = await axios.get('https://599d6a620a785b0011f4f6c8.mockapi.io/toReturn404');
console.log('success', response)
}catch( error) {
console.log('errr',error);
};
}
I get the following responses
Even though it should have been thrown to the catch block it stays in the try block.
I tried recreating it in the stackblitz but it works as expected there : Stackblitz
Axios version in both stackblitz and the project is : "axios": "^0.27.2",

'Unexpected end of JSON input' error while working with Shopify webhooks

I've created an app and try to register for webhooks, and then fetch the list of all webhooks.
I use this code for this (/server/middleware/auth.js):
const webhook = new Webhook({ session: session });
webhook.topic = "products/update";
webhook.address = "https://api.service.co/items/update";
webhook.format = "json";
console.log("registering products/update");
try {
await webhook.save({
update: true,
});
} catch (error) {
console.log(error);
}
const webhookSecond = new Webhook({ session: session });
webhookSecond.topic = "products/create";
webhookSecond.address = "https://api.service.co/items/webhooks";
webhookSecond.format = "json";
console.log("registering products/create");
try {
await webhookSecond.save({
update: true,
});
} catch (error) {
console.log(error);
}
console.log("getting all webhooks");
try {
let webhooks = await Webhook.all({
session: session,
});
console.log(webhooks);
} catch (error) {
console.log(error);
}
Everything works fine for a development store. However, when I try to launch this script on a third-party customer store, then I get this error:
HttpRequestError: Failed to make Shopify HTTP request: FetchError: invalid json response body at https://shopname.myshopify.com/admin/api/2022-04/webhooks.json reason: Unexpected end of JSON input
The app permissions/scopes are: read_checkouts, read_orders, read_inventory, read_products, read_customers
I got this error 3 times, even for Webhook.all.
Could you please tell me what can cause this error, and how could it be fixed?
This error was caused by the lack of access provided by the owner of the store to my collaborator developer account. Manage settings access was required.

Axios interceptors don't send data to API in production Heroku app

This is part 2 of me debugging my application in production
In part 1, I managed to at least see what was causing my problem and managed to solve that.
When I send a request to my API which is hosted on Heroku using axios interceptor, every single request object looks like this in the API
{ 'object Object': '' }
Before sending out data to the API, I console.log() the transformRequest in axios and I can see that the data I am sending is actually there.
Note: I have tested this process simply using
axios.<HTTP_METHOD>('my/path', myData)
// ACTUAL EXAMPLE
await axios.post(
`${process.env.VUE_APP_BASE_URL}/auth/login`,
userToLogin
);
and everything works and I get data back from the server.
While that is great and all, I would like to abstract my request implementation into a separate class like I did below.
Does anyone know why the interceptor is causing this issue? Am I misusing it?
request.ts
import axios from "axios";
import { Message } from "element-ui";
import logger from "#/plugins/logger";
import { UsersModule } from "#/store/modules/users";
const DEBUG = process.env.NODE_ENV === "development";
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: 5000,
transformRequest: [function (data) {
console.log('data', data)
return data;
}],
});
service.interceptors.request.use(
config => {
if (DEBUG) {
logger.request({
method: config.method,
url: config.url
});
}
return config;
},
error => {
return Promise.reject(error);
}
);
service.interceptors.response.use(
response => {
console.log('axios interception response', response)
return response.data;
},
error => {
const { response } = error;
console.error('axios interception error', error)
if (DEBUG) {
logger.error(response.data.message, response);
}
Message({
message: `Error: ${response.data.message}`,
type: "error",
duration: 5 * 1000
});
return Promise.reject({ ...error });
}
);
export default service;
Login.vue
/**
* Sign user in
*/
async onClickLogin() {
const userToLogin = {
username: this.loginForm.username,
password: this.loginForm.password
};
try {
const res = await UsersModule.LOGIN_USER(userToLogin);
console.log("res", res);
this.onClickLoginSuccess();
} catch (error) {
throw new Error(error);
}
}
UsersModule (VUEX Store)
#Action({ rawError: true })
async [LOGIN_USER](params: UserSubmitLogin) {
const response: any = await login(params);
console.log('response in VUEX', response)
if (typeof response !== "undefined") {
const { accessToken, username, name, uid } = response;
setToken(accessToken);
this.SET_UID(uid);
this.SET_TOKEN(accessToken);
this.SET_USERNAME(username);
this.SET_NAME(name);
}
}
users api class
export const login = async (data: UserSubmitLogin) => {
return await request({
url: "/auth/login",
method: "post",
data
});
};
I'm not sure what you're trying to do with transformRequest but that probably isn't what you want.
A quote from the documentation, https://github.com/axios/axios#request-config:
The last function in the array must return a string or an instance of Buffer, ArrayBuffer, FormData or Stream
If you just return a normal JavaScript object instead it will be mangled in the way you've observed.
transformRequest is responsible for taking the data value and converting it into something that can actually be sent over the wire. The default implementation does quite a lot of work manipulating the data and setting relevant headers, in particular Content-Type. See:
https://github.com/axios/axios/blob/885ada6d9b87801a57fe1d19f57304c315703079/lib/defaults.js#L31
If you specify your own transformRequest then you are replacing that default, so none of that stuff will happen automatically.
Without knowing what you're trying to do it's difficult to advise further but you should probably use a request interceptor rather than transformRequest for whatever it is you're trying to do.

React native redux-saga request only work with debugger

I'm using redux saga as middleware and call my request in this layer. When enable react-native debugger request works prefect, but without the debugger it seems request is not async anymore.
export function* userLoginSaga(action) {
yield put(actions.userLoginStart());
const response = yield GET(`${action.server}`, {
'Content-Type': 'application/json'
}, {
username: action.username,
password: action.password
});
if (response === 503) {
yield put(actions.serverErrorSuccess(response))
} else if (response.status === 200) {
yield put(actions.userLoginSuccess(response.data));
}
}
without react debugger, i get "undefined is not an object (response.status) ".
It's not waiting for response to get the result.
Please note that everything is working fine with debugger.