1---
2category: '@RxJS'
3---
4 
5# useObservable
6 
7Use an RxJS [`Observable`](https://rxjs.dev/guide/observable), return a `ref`, and automatically unsubscribe from it when the component is unmounted.
8 
9## Usage
10 
11<!-- TODO: import rxjs error if enable twoslash -->
12 
13```ts no-twoslash
14import { useObservable } from '@vueuse/rxjs'
15import { interval } from 'rxjs'
16import { mapTo, scan, startWith } from 'rxjs/operators'
17 
18// setup()
19const count = useObservable(
20  interval(1000).pipe(
21    mapTo(1),
22    startWith(0),
23    scan((total, next) => next + total),
24  ),
25)
26```
27 
28### Initial Value
29 
30You can provide an initial value that will be used before the Observable emits its first value:
31 
32```ts no-twoslash
33import { useObservable } from '@vueuse/rxjs'
34import { interval } from 'rxjs'
35 
36const count = useObservable(
37  interval(1000),
38  { initialValue: 0 },
39)
40// count.value is 0 until the first emission
41```
42 
43### Error Handling
44 
45If you want to add custom error handling to an `Observable` that might error, you can supply an optional `onError` configuration. Without this, RxJS will treat any error in the supplied `Observable` as an "unhandled error" and it will be thrown in a new call stack and reported to `window.onerror` (or `process.on('error')` if you happen to be in Node).
46 
47```ts no-twoslash
48import { useObservable } from '@vueuse/rxjs'
49import { interval } from 'rxjs'
50import { map } from 'rxjs/operators'
51 
52// setup()
53const count = useObservable(
54  interval(1000).pipe(
55    map((n) => {
56      if (n === 10)
57        throw new Error('oops')
58 
59      return n + n
60    }),
61  ),
62  {
63    onError: (err) => {
64      console.log(err.message) // "oops"
65    },
66  },
67)
68```
69 
70### Options
71 
72| Option         | Type                 | Description                              |
73| -------------- | -------------------- | ---------------------------------------- |
74| `initialValue` | `T`                  | Value to use before the Observable emits |
75| `onError`      | `(err: any) => void` | Error handler for Observable errors      |
76 
77## Type Declarations
78 
79```ts
80export interface UseObservableOptions<I> {
81  onError?: (err: any) => void
82  /**
83   * The value that should be set if the observable has not emitted.
84   */
85  initialValue?: I | undefined
86}
87export declare function useObservable<H, I = undefined>(
88  observable: Observable<H>,
89  options?: UseObservableOptions<I | undefined>,
90): Readonly<Ref<H | I>>
91```
92