I found some strange behavior on rxjs and I want to know if it's the expected behavior or if I missed something (I use angular but I thing it's not related) :
public someFunction() {
// this woks as expected: log "test1"
return of(null).pipe(
switchMap(() => this.errorTest()),
catchError((e: Error) => {
console.log('test1');
return throwError(e);
})
);
// "test2" is never logged
return this.errorTest().pipe(
catchError((e: Error) => {
console.log('test2');
return throwError(e);
})
);
}
private errorTest(): Observable<any> {
throw Error('one error');
}
when I subscribe someFunction the first function logs "test1", but the second doesn't log anything, error is no catched...
private errorTest(): Observable<any> {
throw Error('one error');
}
Does not return an observable.
switchMap(() => this.errorTest())
Catches errors from the callback function.
switchMap(() => throw Error('one error'))
Is the same as your example, and this.errorTest().pipe() never returns so you don't get an error for trying to call .pipe() on undefined.
What you wanted to do was this.
private errorTest(): Observable<any> {
return throwError(new Error('one error'));
}
https://rxjs-dev.firebaseapp.com/api/index/function/throwError
Related
I have trouble with subcribe method. In vscode it says that subcribe is deprecated but I have no clue how to change it properly.
public getAccount(): void{
this.accountService.getAccounts().subscribe(
(response: Account[]) => {
this.accounts = response;
},
(error: HttpErrorResponse) => {
alert(error.message);
}
)
}
You should pass an observer object instead of multiple callbacks. All signatures that used multiple arguments were deprecated.
this.accountService.getAccounts().subscribe({
next: (response: Account[]) => {
this.accounts = response;
},
error: (error: HttpErrorResponse) => {
alert(error.message);
},
complete: () => {
// do something when the observable completes
}
});
If you don't need an error and complete callbacks, you can still use it like this: .subscribe((value) => console.log(value)).
You can read about why the signature you're using was deprecated here.
I have aproblem when test Apollo.When I try query with apollo and graphql, i want response return error and partical data, so I set property errorPolicy:'all'. But its not work. I don't no why? Help please!
Here my code:
query { animal {
name
age }, school {
name
numberfd } } `
const { loading,data,error} = useQuery(GET_DASHBOARD_DATA, {
errorPolicy:'all',
onCompleted: (res) => {console.log("complete",res)},
onError : (res,data) => {console.log("ERRRR",res,data)},
})
and i want to receive:
{
error:[...], data:[animal:[...]] }
but its only response error.Here is Apollo's doc: https://www.apollographql.com/docs/react/data/error-handling/
onError type is onError?: (error: ApolloError) => void;. You don't have data inside onError callback.
After useQuery you can add:
console.log('data', data)
console.log('error', error)
I faced the same issue with errorPolicy: 'all', I only received the partial result inside onCompleted callback of useQuery, but no errors.
I created an ErrorLink like this:
private createErrorLink = () => {
return new ApolloLink((operation, forward) => {
return forward(operation).map((response) => {
// filter out errors you don't want to display
const errors = filterSomeErrors(response.errors);
if (errors && response?.data) {
response.data.errors = errors;
}
return response;
});
});
};
Now inside my onCompleted callback I get my data as well as errors. You will have to tweak your types a bit, because seems there is no errors field on response.data by default.
Mind that if you use onError from Apollo and return something from the link, it will retry your request containing errors!
I'm implementing an interface that has a function that returns Observable.
I also need to pass some value to the Observable, but it may take some time to receive that value.
How can I still return the Observable and also make it wait for the needed value?
To be more specific, I'm implementing an HttpInterceptor and I want to set a token to the request header.
The token value could be unavailable, so need to wait a little (asynchronously) and try again, until the value is received.
Then set the token in the request header and continue.
How can I implement such mechanism?
#Injectable()
export class HttpXsrfInterceptor implements HttpInterceptor {
constructor(private tokenService: HttpXsrfTokenExtractor) { }
getToken(callback) {
let token = this.tokenService.getToken();
if (!token) {
// a valid token wasn't received. wait a little and try again
setTimeout(() => {
this.getToken(callback); //recursive call
}, 1000);
} else {
// found valid token
callback(token);
}
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
// this part should set req when a token is received, but it is asynchronous
this.getToken((token) => {
req = req.clone({headers: req.headers.set('X-XSRF-TOKEN', token)});
});
// this returns Observable. I must return Observable, but req is not ready at this point
return next.handle(req);
}
}
The easiest thing to do is use RxJs operators. Using switchMap should be a good solution here. Essentially in this case, switchMap allows you to chain dependent observables together and only return the inner observable. It should look something like this:
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return getToken.pipe(
switchMap(token => {
req = req.clone({headers: req.headers.set('X-XSRF-TOKEN', token)});
return next.handle(req);
}
);
}
Please note, You'll need to adjust your getToken to return an observable as well in order for this to work.
Looking at the code, it seems that we have callback from getToken and observable from intercept. It is better to always use observable if possible.
We could convert getToken(callback) to use observable. RxJS has retryWhen operator that we could use to handle retry.
getToken() {
const tokenFromService = of(this.tokenService.getToken()); // convert to observable
return tokenFromService
.pipe(
map(token => {
if (!token) {
throw new Error('token is not specified'); // it will be caught by retryWhen
}
return token;
}),
retryWhen(error => {
return error
.pipe(
tap(() => console.log('error happened, retry request token')),
delay(1000)
)
})
)
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return this.getToken()
.pipe(
switchMap(token => {
const modifiedReq = req.clone({headers: req.headers.set('X-XSRF-TOKEN', token)});
return next.handle(modifiedReq);
})
)
}
Hope it helps
Reference:
retryWhen
I have a network call where it's likely that api will throw an 400 error. I want to handle this gracefully.
Right now I do it like below -
private fetchStatus(objectId: string): Observable<string> {
return Observable.create((observer) => {
this.http.get('/api/data-one').subscribe(response => {
if (response.result === 'SUCCESS') {
observer.next('SUCCESS');
} else {
observer.next('DENIED');
}
observer.complete();
},
error => {
observer.next('DENIED');
observer.complete();
});
});
}
But I will prefer doing it with Observable.map operator. The problem with Observable.map is when api throws a 400 the entire observable goes in error mode.
I want to prevent this because this get call is being used in a forkJoin with other calls. Failure of this would mean failure of the entire forkJoin below
forkJoin([
this.http.get('/api/route-2'),
this.http.get('/api/route-1'),
this.fetchStatus('abc')
]).subscribe((responseCollection: any) => {
observer.next({
result1: responseCollection[0],
result2: responseCollection[1],
result3: responseCollection[2]
});
observer.complete();
}, error => observer.error(error));
You can do this with map and catchError.
catchError will catch any error thrown by the source and return a new Observable. This new Observable is what, in your case, will be passed to forkJoin in the case of a HTTP error.
private fetchStatus(objectId: string): Observable<string> {
return this.http.get('/api/data-one').pipe(
map(response => response.result === 'SUCCESS' ? 'SUCCESS' : 'DENIED'),
catchError(error => of('DENIED')),
);
}
I'm trying to create actions from updates from a RX Subject
It's working but I get the error below.
Here is my Epic
export function uploadSceneFile(action$, store) {
return action$.ofType(CREATE_SCENE_SUCCESS)
.mergeMap(({payload}) =>
UploadSceneWithFile(payload)
.subscribe(res => {
if (res.progress > 0)
store.dispatch(uploadSceneProgress(res))
else if(res.progress === -1){
store.dispatch(uploadSceneSuccess(res))
requestSceneProcessing(res).map(res => {
})
}
})
)
}
And here is the Subject
export function UploadSceneWithFile(scene){
const subject$ = new Subject()
const uploader = new S3Upload({
getSignedUrl: getSignedUrl,
uploadRequestHeaders: {'x-amz-acl': 'public-read'},
contentType: scene.file.type,
contentDisposition: 'auto',
s3path: 'assets/',
onError:()=>subject$.next('error'),
onProgress: (val)=> subject$.next({...scene,progress:val}),
onFinishS3Put: ()=>subject$.next({...scene,progress:-1}),
})
uploader.uploadFile(scene.file)
return subject$
}
I read from a previous post that I'm supposed to be using .map, not .subscribe but nothing happens if I don't subscribe (the upload doesn't happen)
What's the best way of doing this?
subscribeToResult.js:74 Uncaught TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
at Object.subscribeToResult (subscribeToResult.js:74)
at MergeMapSubscriber../node_modules/rxjs/operators/mergeMap.js.MergeMapSubscriber._innerSub (mergeMap.js:132)
at MergeMapSubscriber../node_modules/rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:129)
at MergeMapSubscriber../node_modules/rxjs/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:112)
at MergeMapSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at FilterSubscriber../node_modules/rxjs/operators/filter.js.FilterSubscriber._next (filter.js:89)
at FilterSubscriber../node_modules/rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
at Subject../node_modules/rxjs/Subject.js.Subject.next (Subject.js:55)
at createEpicMiddleware.js:60
at createEpicMiddleware.js:59
at SafeSubscriber.dispatch [as _next] (applyMiddleware.js:35)
at
The problem is that you subscribe inside mergeMap and return a Subscription which is invalid. The callback needs to return only Observable, Promise, Array, or Iterable.
I'm not sure what exactly you need to do but if you need to perform some side-effects you can use do() operator instead of subscribing.
export function uploadSceneFile(action$, store) {
return action$.ofType(CREATE_SCENE_SUCCESS)
.mergeMap(({ payload }) => UploadSceneWithFile(payload)
.do(res => {
...
})
)
}
Or it looks like you could put do after mergeMap as well:
export function uploadSceneFile(action$, store) {
return action$.ofType(CREATE_SCENE_SUCCESS)
.mergeMap(({ payload }) => UploadSceneWithFile(payload))
.do(res => {
...
});
}