--- title: How to Use RxJS catchError Without Unsubscribing from New Events description: Learn how to effectively handle errors using RxJS catchError operator, with code examples on catching errors without unsubscribing or missing new events. image: https://www.bitovi.com/hubfs/How%20to%20Use%20RxJS%20catchError%20Without%20Unsubscribing%20from%20New%20Events-1.png --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting) - ![Project Management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project Management](https://www.bitovi.com/services/agile-project-management-consulting) - ![Product Design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product Design](https://www.bitovi.com/services/product-design-consulting) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting) - [View more → ](https://www.bitovi.com/digital-consulting-services) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting) - [Design systems](https://www.bitovi.com/services/axure-figma-migration) - [React](https://www.bitovi.com/services/frontend/react-consulting) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp) - [View more → ](https://www.bitovi.com/our-software-consulting-work) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about delivering products and solving problems. ](https://www.bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships) - [![Academy](https://www.bitovi.com/hubfs/icon%20-%20academy%20(4).svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse or contribute to our community ](https://www.bitovi.com/open-source) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com [ Angular ](https://www.bitovi.com/blog/topic/angular) | March 29, 2023 # How to Use RxJS catchError Without Unsubscribing from New Events Learn how to effectively handle errors using RxJS catchError operator, with code examples on catching errors without unsubscribing or missing new events. ![Igor Ciric](https://www.bitovi.com/hubfs/Imported%20sitepage%20images/T02B04353-U03J6GF2X5X-1e11d31c0103-512.jpeg) Igor Ciric Share: [![Twitter](https://www.bitovi.com/hubfs/limbo-generated/_astro/twitter-white.os3xLc3C_Z2nW4or.svg) ](https://twitter.com/intent/tweet?text=) [![Reddit](https://www.bitovi.com/hubfs/limbo-generated/imgs/icons/reddit.png) ](http://reddit.com/submit?url=) Did you know you can use the `catchError` RxJS operator to catch errors **without** unsubscribing? It’s true! It all depends on where you plan to use the operator. Now you can use the `catchError` RxJS operator in two ways: - Catch the error without unsubscribing; continue getting new events - Catch the error and unsubscribe; stop getting new events In this post, learn how to tailor your use of `catchError` to fit the needs of your project! ## How to Catch Errors Without Unsubscribing In the example below, you can use the `catchError` operator and keep getting events from the other Observables once the error happens. ![catcherror1](https://www.bitovi.com/hs-fs/hubfs/catcherror1.png?width=694&height=224&name=catcherror1.png) Here you have two observables; the first will throw an error on the third event. After the error is emitted, you will emit the value of **-1** and continue getting new values from the second Observable. To achieve this, you need to apply the `catchError` operator specifically to that Observable. ``` import { interval, of, map, catchError, combineLatest, take } from 'rxjs'; const observable1 = interval(100).pipe( map((n) => { if (n === 3) { throw 'Some error happened'; } return n; }) ); const observable2 = interval(100).pipe(take(5)); combineLatest([ observable1.pipe( catchError((err) => { // 🟡 We used catchError specifically for this observable console.log('Error:', err); return of(-1); }) ), observable2, ]).subscribe((result) => { console.log(result); }); ``` The output results will be: ``` [0,0] [1,0] [1,1] [2,1] [2,2] 🔴 Error: Some error happened [-1,2] [-1,3] [-1,4] ``` After error happened, the value of the first Observable will be -1, and the second will be the current value that was emitted. Check out this [interactive example](https://stackblitz.com/edit/rxjs-dxcz3p?file=index.ts) to get a better idea of how it works. ## Catch the Error and Unsubscribe In the typical use of `catchError`, you will catch the error and unsubscribe after any of the Observables emits an error. To achieve this, apply the `catchError` operator inside the pipe before the `subscribe` callback. ![catcherror2](https://www.bitovi.com/hs-fs/hubfs/catcherror2.png?width=694&height=219&name=catcherror2.png)   After the first Observable throws an error, you will catch the error and unsubscribe. The last value that will be emitted will come from `catchError`. In this case, it will be `null`. ``` import { interval, of, map, catchError, combineLatest, take } from 'rxjs'; const observable1 = interval(100).pipe( map((n) => { if (n === 3) { throw 'Some error happened'; } return n; }) ); const observable2 = interval(100).pipe(take(5)); combineLatest([observable1, observable2]) .pipe( catchError((err) => { // 🟡 We used catchError inside the pipe before callback console.log('Error:', err); return of(null); }) ) .subscribe((result) => { console.log(result); }); ``` The output results will be: ``` [0,0] [1,0] [1,1] [2,1] [2,2] 🔴 Error: Some error happened null ``` After the Observable throw error, the last emitted value will be `null`. Try it yourself with this [interactive example](https://stackblitz.com/edit/rxjs-t5vtku?file=index.ts). ## Without catchError Operator If you don't use the `catchError` operator, the error will throw inside of `subscribe` callback, and you will be unsubscribed. It works similarly to using the `catchError` operator before subscribing callback, like in the second example. Approaches without `catchError` operator can work fine if you don't want to use Observable in the template, otherwise the application will throw the error and break for, e.g. in the Angular component template using Observable via `async` pipe. ![catcherror3](https://www.bitovi.com/hs-fs/hubfs/catcherror3.png?width=442&height=208&name=catcherror3.png) ``` import { interval, of, map, catchError, combineLatest, take } from 'rxjs'; const observable1 = interval(100).pipe( map((n) => { if (n === 3) { throw 'Some error happened'; } return n; }) ); const observable2 = interval(100).pipe(take(5)); combineLatest([observable1, observable2]).subscribe({ next: (result) => { console.log(result); }, error: (err) => { // 🟡 We are catching error inside subscribe callback console.log(err); }, }); ``` The output results will be: ``` [0,0] [1,0] [1,1] [2,1] [2,2] 🔴 Error: Some error happened ``` Try it yourself with another [interactive example](https://stackblitz.com/edit/rxjs-grgrvz?file=index.ts). ## Conclusion Understanding how to use the `catchError` operator in RxJS is essential for handling errors in your project. Whether you want to catch errors without unsubscribing or stop getting new events, knowing how to tailor its use is vital. By following the examples in this post and experimenting with the interactive examples, you can become proficient in using `catchError` and ensure your project runs smoothly. ### Do you have thoughts about catchError? We’d love to hear them! Join the [Bitovi Community Discord](https://discord.gg/J7ejFsZnJ4) to chat about Angular, RxJS, or anything you’re working on. 🥚   [![Tag for rxjs](https://www.bitovi.com/hubfs/limbo/icons/tag.svg) rxjs ](https://www.bitovi.com/blog/topic/rxjs) Previous Post ![Deploy StackStorm to AWS Using a GitHub Action](https://www.bitovi.com/hs-fs/hubfs/Deploy%20StackStorm%20to%20AWS%20Using%20a%20GitHub%20Action.png?height=117&name=Deploy%20StackStorm%20to%20AWS%20Using%20a%20GitHub%20Action.png) [ Deploy StackStorm to AWS Using a GitHub Action ](https://www.bitovi.com/blog/deploy-stackstorm-to-aws-using-a-github-action)   Next Post ![The Best Software Architectures to Use for Node.js Consulting](https://www.bitovi.com/hs-fs/hubfs/The%20Best%20Software%20Architectures%20to%20Use%20for%20Node.js%20Consulting-1.png?height=117&name=The%20Best%20Software%20Architectures%20to%20Use%20for%20Node.js%20Consulting-1.png) [ The Best Software Architectures to Use for Node.js Consulting ](https://www.bitovi.com/blog/the-best-software-architectures-to-use-for-node.js-consulting) ```json { "@context" : "http://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "United States", "addressLocality" : "Libertyville", "addressRegion" : "IL", "postalCode" : "60048", "streetAddress" : "1134 Pine Tree Lane " }, "alternateName" : "Bitovi", "areaServed" : { "@type" : "GeoCircle", "geoMidpoint" : { "@type" : "GeoCoordinates", "latitude" : "41.8781", "longitude" : "87.6298" }, "geoRadius" : "5000 km" }, "description" : "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "email" : "contact@bitovi.com", "image" : "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "logo" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "mainEntityOfPage" : { "@id" : "https://www.bitovi.com/blog/how-to-use-rxjs-catcherror-without-unsubscribing-from-new-events", "@type" : "WebPage", "description" : "Learn how to effectively handle errors using RxJS catchError operator, with code examples on catching errors without unsubscribing or missing new events." }, "naics" : "541511", "name" : "Bitovi Web App Consulting", "sameAs" : [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ], "telephone" : "312-620-0386", "url" : "http://bitovi.com" } ``` ```json { "@context" : "http://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "Igor Ciric" }, "dateModified" : "October 3, 2023, 8:16:01 PM", "datePublished" : "2023-03-29 16:31:39", "description" : "Learn how to effectively handle errors using RxJS catchError operator, with code examples on catching errors without unsubscribing or missing new events.", "headline" : "How to Use RxJS catchError Without Unsubscribing from New Events", "image" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/How%20to%20Use%20RxJS%20catchError%20Without%20Unsubscribing%20from%20New%20Events-1.png" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg" }, "name" : "Bitovi" } } ```