I am using NestJS to essentially proxy a request to another api using the HttpService (an observable wrapped Axios library). For example:
return this.httpService.post(...)
.pipe(
map(response => response.data),
);
This works properly when the call is successful; however, if there's an error (4xx), how do I properly return the status and error message?
I've figured out how to do it with promises, but if possible I would like to stay within an observable.
You can use catchError to rethrow the exception with the corresponding status code:
import { catchError } from 'rxjs/operators';
this.httpService.get(url)
.pipe(
catchError(e => {
throw new HttpException(e.response.data, e.response.status);
}),
);
Note that error.response might be null, see the axios docs for all error cases to check for.
Also, axios does not throw for 4xx errors as they might be expected and valid responses from the API. You can customize this behavior by setting validateStatus, see docs.
Hello you can try also like this to get value with rxjs from request
const { data } = await lastValueFrom(
this.httpService.get(`${process.env.URL}/users`, {
headers: {
Authorization: authorization,
},
}),
);
Related
I refactored my http layer to go from a promised-based implementation to observables using rxjs. The problem that I am facing is that the code crashes whenever server response is 400 or 500,
Axios.request(config).pipe(map(((response: AxiosResponse) => response), catchError(e => {
return new Observable(e);
})));
The problem I am facing is that the error is not being handled by the catchError callback. I am looking for a way in which the error is handled by the catchError callback so that the response can be handled gracefully.
I don't know your problem is this but you can do this:
import { EMPTY } from 'rxjs';
Axios.request(config).pipe(map(((response: AxiosResponse) => response),
catchError(() => EMPTY)));
EMPTY is an object that is imported from rxjs libaray.
It looks like you want to turn the error notification to next notification so you need to use return of(e) eventually EMPTY if you want to suppress the error.
new Observable(e) is probably what throws the error in your case because the parameter passed to Observable needs to be a function which e is not in this case.
This is more like question than resolve a problem.
I would like to know if there any scenario that both "Success" and Error" is not triggered.
The post call to "/logout" will result Http status return code 200
with empty respond body which is expected
import { httpClient } from angular/common/http;
private http: HttpClient;
this.http.post<any>('/logout', {})
.subscribe(
() => {
console.log("Logout");
}, error => {
console.log(error);
},
() => {
console.log("Finally");
});
It will output "Finally" 100% of time. That means success and error is not triggered at all.
Is there possibilities that either success and error not trigger. And clearly the http status code response is 200 OK.
Update:
The answer that #meriton provided work great.
Observable, in general, are not required to complete or error. They may remain live, and continue to emit values, forever.
However, Observable returned by HttpClient are guaranteed to terminate with either success or error (though the error may take a few minutes in case of a timeout) according to the HTTP status of the response. The presence of absence of a body does not affect this. If the request is successful, the observable will emit exactly one value: the response body (or null if the response body is absent).
I can not reproduce your claim that "success or error is not triggered at all". May you have misunderstood what the callbacks mean? When you provide three callbacks to subscribe, they are, in order:
the next callback, which receives emitted values
the error callback, which notifies that the Observable has aborted due to an error
the complete callback, which notifies that the Observable has completed successfully
The danger of mixing up callbacks is one reason why the RXJS team has deprecated passing several callbacks as separate arguments to subscribe in RXJS 8. The future proof way to write your code would be:
this.http.post<any>('/logout', {}).subscribe({
complete: () => {
console.log("Logout successful")
},
error: (error) => {
console.log(error);
}
});
BTW, none of these callbacks mean "finally", as in the finally clause of a try-statement, which is executed both in case of success and error. If you want to do something irrespective of whether the Observable completed successfully or failed with an error, you could use the finalize operator.
http library success depends on Status:200, it does not require message.body to be present
Example code of using RXJS pipe flow, where you can control the flow by capturing success & error, controlling timeout. It also demonstrates how you can use .subscribe() method as classic Finally
Example RXJS Flow:
this.http
.post<any>('/logout',{})
.pipe(
map(() => { // OK
return { success: true, err: null };
}),
timeout(10000), // CONTROL TIMEOUT
catchError((e) => { // IN CASE OF ERROR
return of({success: false, err:e});
})
)
.subscribe((result) => { // FINALLY here
if (result.success) {
console.log('Logged out successfully');
} else {
console.log('Logout failed', result.err);
}
});
I am using Axios in my React-Native app to communicate with a Nodejs backend, and am using react-redux dispatch to call the actions that will utilize Axios. However, no matter what I try I land up getting "Unhandled Promise Rejection" anytime there is an error of any sort. This is frustrating me so much I'm about to give up on Axios and just go back to using fetch. I've googled this problem (which seems to be very common indeed), but have not found any solid solution yet.
Here is an example of how I'm using Axios in my actions to send requests to my Nodejs backend server:
export const getAppointments = (userId) => {
return async (dispatch) => {
const request = axios
.get(`${SERVER_BOOKINGS}/upcoming_appointments/${userId}`)
.then((response) => {
let ourPayload = {};
ourPayload.success = response.data.success;
if (ourPayload.success) {
ourPayload.bookings = response.data.bookings;
dispatch({
type: GET_UPCOMING_APPOINTMENTS,
payload: ourPayload,
});
}
})
.catch((err) => {
console.log("caught an error, HERE:", err);
//throw err
});
};
};
And here is the code I'm using to call this action:
const getAppointments = async () => {
try {
await dispatch(
bookingActions.getAppointments(userObject.userData.userId)
);
} catch (error) {
console.log("we actually caught an axios error client side!");
}
}
If I leave the code exactly as above and I deliberately cause an error response from my Nodejs code , I get a console.log message saying "caught an error, HERE", but get nothing from the catch block where I actually dispatch the action (2nd block of code).
If I uncomment out the throw err line in the first catch block, I still get the console.log, still get nothing from the second catch block.... but now I get an Unhandled Promise Rejection warning.
Right now, this code works very well as long as there isn't an error, and is completely worthless anytime there is an one. In all honestly, I don't know whether the issue is one with axios, react-redux dispatch or just a failure on my part to understand the way Promises are meant to work, but I've wasted untold hours trying to figure out what should be a really simple matter of catching errors... and I'm falling behind schedule on this project because of it. Any advice/help would be greatly appreciated!
I think that the problem is caused since "bookingActions.getAppointments" is not a Promise function so there is no need to "try-catch" it.
try to change it like this:
const getAppointments = () => dispatch(bookingActions.getAppointments(userObject.userData.userId));
I am trying to do unit testing for a simple function which sends a get request, receives a response and then returns a promise object with the success or the failure message. Following is the function:
module.exports.hello = async (event, context) => {
return new Promise((resolve, reject) => {
fetch("https://httpstat.us/429", { headers: { 'Content-Type': 'application/json' } }).then(response => {
console.log(response);
if (response.status == 200) {
return response;
} else {
throw Error(response.status + ": " + response.statusText);
}
}).then(tokenData => {
resolve({ status: 200, body: JSON.stringify({ statusText: 'Success' }) });
}).catch(error => {
reject(error.message);
});
});
};
While unit testing, I am using fetch-mock to mock the call to the api and have a custom response. Following is the code:
it('hello returns failure message', (done) => {
fetchMock.get('*', {
status: 429,
statusText: "Too Many Nothings",
headers: { 'Content-type': 'application/json' }
});
edx.hello(null, null).catch(error => {
expect(error).to.equal('429: Too Many Requests');
}).then(() => {
done();
}).catch(error => {
done(error);
});
});
But this code is not mocking the fetch request as when I print the response text it is "Too Many Requests" which is being sent as a response by the API and not "Too Many Nothings" which is being mocked. I am new to NodeJS. Please tell me what am I doing wrong.
If you use node-fetch package, it's not available at the global scope in Node.js. In order to make fetch-mock work you either have to assign fetch to global object (e.g. by import "node-fetch"; instead of import fetch from "node-fetch";) or make fetch injectable to your tested method.
From http://www.wheresrhys.co.uk/fetch-mock/#usageglobal-non-global:
Global or non-global
fetch can be used by your code globally or locally. It’s important to
determine which one applies to your codebase as it will impact how you
use fetch-mock
Global fetch
In the following scenarios fetch will be a global
When using native fetch (or a polyfill) in the browser
When node-fetch has been assigned to global in your Node.js process (a pattern sometimes used in isomorphic codebases)
By default fetch-mock assumes fetch is a global so no more setup is
required once you’ve required fetch-mock. Non-global fetch library
In the following scenarios fetch will not be a global
Using node-fetch in Node.js without assigning to global
Using fetch-ponyfill in the browser
Using libraries which use fetch-ponyfill internally
Some build setups result in a non-global fetch, though it may not always be obvious that this is the case
The sandbox() method returns a function that can be used as a drop-in
replacement for fetch. Pass this into your mocking library of choice.
The function returned by sandbox() has all the methods of fetch-mock
exposed on it, e.g.
const fetchMock = require('fetch-mock');
const myMock = fetchMock.sandbox().mock('/home', 200); // pass myMock in to your application code, instead of fetch, run it, then...
expect(myMock.called('/home')).to.be.true;
How is fetch imported in your file used by your function?
I've got a really basic (almost) VanillaJs file that was using import fetch from "cross-fetch"; but that meant fetchMock from my test file was being ignored.
Switching to import "cross-fetch/polyfill"; allowed me to have tests that provided mocked fetch data and I could have tests that that accessed real data as well.
I'm learning React, along with pretty much all the necessary technology around it all at once - so I often get tripped up by things I should probably know already.
I've encountered a problem when it comes to error handling my async events. I've scoured the web and nothing really answers exactly what I'm looking for.
I'm currently using redux with redux-promise-middleware to handle the async actions, like this:
export function myFunc() {
return {
type: FETCH_FUNC,
payload: new Promise((resolve, reject) => {
fetch ('some/url/location/from/which/to/fetch')
.then( response => {
if (!response.ok){
throw new Error(response);
}
resolve(response.json());
}).catch(error => {
reject(error);
}),
})
};
}
There are two things here: first, the code works just fine when no errors are present. However, when I purposely create an error in the code the correct methods are firing but I still end up with the following error in my console:
Uncaught (in promise) Error: [object Response]
Should the .catch(...) block not be handling this? What am I missing? Should I be getting this anyway? If so, why?
Secondly, I've read that wrapping the fetch inside a new Promise is an anti-pattern, and there was an almost-hint that this may be what's causing problems here. All the examples I've come across use it in this fashion. What's the alternative? How do I fire the resolve/reject to dispatch the next actions without the wrapper?
Any help will be greatly appreciated. Thanks masters of the web.
-------------EDIT 1----------------
From the official redux-promise-middleware github examples, they have the following code:
export default function request(url, options) {
return new Promise((resolve, reject) => {
if (!url) reject(new Error('URL parameter required'));
if (!options) reject(new Error('Options parameter required'));
fetch(url, options)
.then(response => response.json())
.then(response => {
if (response.errors) reject(response.errors);
else resolve(response);
})
.catch(reject);
});
}
It seems to intention with the middleware is to wrap fetch inside a new Promise and catching any rejects. If anyone has a working alternative way of implementing this using redux-promise-middleware, or can elaborate on why its following this pattern that would be greatly appreciated.
-------------EDIT 2----------------
Not sure what the intended way of implementing this is or how to avoid the Uncaught error in the promise. Simply calling Promise.reject(...) results in an uncaught error unless you include error handling functions: Promise.reject(...).then(() =>{...}, error => {...}). Including this with the middleware results in the rejected action never being dispatched. I've moved away from redux-promise-middleware till I can find a suitable fix and/or implementation.
I guess what you are getting is the expected result and this is mentioned clearly in the middleware documentation:
The middleware dispatches rejected actions but does not catch rejected
promises. As a result, you may get an "uncaught" warning in the
console. This is expected behavior for an uncaught rejected promise.
It is your responsibility to catch the errors and not the
responsibility of redux-promise-middleware.
But if you ask about best practices this is what i ended up doing from long time ago and it's working perfectly with me:
1- For some promises you can do as mentioned in the documentation:
dispatch({
type: 'FOO_ACTION',
payload: new Promise(() => {
throw new Error('foo');
})
}).catch(error => {
// catch and handle error or do nothing
});
2- To catch all rejected promises globally add this middleware before the redux-promise-middleware as follow:
/**
* a utility to check if a value is a Promise or not
* #param value
*/
const isPromise = value => value !== null && typeof value === 'object' && typeof value.then === 'function';
export default () => {
const middleWares = [];
// global error middleware
middleWares.push(() => next => action => {
// If not a promise, continue on
if (!isPromise(action.payload)) {
return next(action);
}
/**
* include a property in `meta and evaluate that property to check if this error will be handled locally
*
* if (!action.meta.localError) {
* // handle error
* }
*
* The error middleware serves to dispatch the initial pending promise to
* the promise middleware, but adds a `catch`.
*/
if (!action.meta || !action.meta.localError) {
// Dispatch initial pending promise, but catch any errors
return next(action).catch(error => {
if (config.showErrors) { // here you can decide to show or hide errors
console.log(`${action.type} unhandled rejection caught at middleware with reason: ${JSON.stringify(error.message)}.`);
}
return error;
});
}
return next(action);
});
// middleware
middleWares.push(thunk);
middleWares.push(promise());
middleWares.push(logger());
return applyMiddleware(...middleWares);
}
i guess this is exactly what you are looking for ;)
Extra I highly recommend axios over fetch for the following reasons:
the axios module automatically reject the promise if the request has an error code which is something you need to keep manually handle in fetch
in axios you can create instance with default base-url,header,interceptors ...
in axios you can cancel any previous request using a token this is extremely useful specially for autocomplete and chat applications
also axios internally automatically switch between xhr and http modules to perform the ajax request based on the environment (NodeJs or Browser), i personally used the same redux actions in electron, nodejs, browser and react-native and it's all working fine
Following up on caisah 's comment, get rid of the indirection. You can resolve or reject a promise by simply resolving or rejecting with a new promise object
export function myFunc() {
return {
type: FETCH_FUNC,
payload: fetch ('some/url/location/from/which/to/fetch')
.then(response => {
if (!response.ok){
throw new Error(response);
}
return Promise.resolve(response.json());
}).catch(error => {
return Promise.reject(error)
}),
})
};
}
myFunc().payload.then(json => /* do stuff with json*/)
P.S the returns may be redundant.
I’ve used "Catching Errors Globally" presented in "Catching Errors Thrown by Rejected Promises", as shown, when calling applyMiddleware the errorMiddleware should be before the promiseMiddleware. To filter the action types where to apply this middleware i've preferred a regex:
This is the store creation:
import { createStore, combineReducers, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise-middleware';
import errorMiddleware from './errorMiddleware';
import adultosReducer from './adultosReducer';
const rootReducer = combineReducers({
adultosReducer
});
const composeStoreWithMiddleware = applyMiddleware(errorMiddleware, promiseMiddleware())(
createStore
);
export default composeStoreWithMiddleware(rootReducer);
This is the error middleware:
import isPromise from 'is-promise';
import _ from 'lodash';
const tiposAction = /^ADULTO/i;
export default function errorMiddleware() {
return next => action => {
// If not a promise, continue on
if (!isPromise(action.payload)) {
return next(action);
}
console.log('errorMiddleware: action.type', action.type);
if (action.type.match(tiposAction)) {
// Dispatch initial pending promise, but catch any errors
return next(action).catch(error => {
console.log('catching action', error);
return error;
});
}
return next(action);
};
}
That way you show gently to the user the error because the rejected action is dispatched without the Unhandled promise. And of course there is no need to add redux-thunk.