Add error handling to PR service

packages/ui/src/lib/github/pullrequest.ts

@@ -1,22 +1,29 @@
 import lscache from 'lscache';
-import { Observable, EMPTY, BehaviorSubject } from 'rxjs';
-import { shareReplay, switchMap, withLatestFrom } from 'rxjs/operators';
+import { Observable, EMPTY, BehaviorSubject, Subject, of } from 'rxjs';
+import { catchError, shareReplay, switchMap, tap, withLatestFrom } from 'rxjs/operators';
 
 import { PullRequest, type GitHubIntegrationContext } from '$lib/github/types';
 import { newClient } from '$lib/github/client';
 
 export class PrService {
-	pullRequests$: Observable<PullRequest[]>;
+	prs$: Observable<PullRequest[]>;
+	error$ = new BehaviorSubject<string | undefined>(undefined);
 	reload$ = new BehaviorSubject<void>(undefined);
 
 	constructor(ghContext$: Observable<GitHubIntegrationContext | undefined>) {
-		this.pullRequests$ = ghContext$.pipe(
+		this.prs$ = ghContext$.pipe(
 			withLatestFrom(this.reload$),
+			tap(() => this.error$.next(undefined)),
 			switchMap(([ctx, _]) => {
 				if (!ctx) return EMPTY;
 				return loadPrs(ctx);
 			}),
-			shareReplay(1)
+			shareReplay(1),
+			catchError((err) => {
+				console.log(err);
+				this.error$.next(err);
+				return of([]);
+			})
 		);
 	}
 
@@ -26,8 +33,8 @@ export class PrService {
 }
 
 function loadPrs(ctx: GitHubIntegrationContext): Observable<PullRequest[]> {
+	// throw 'An ad-hoc error';
 	return new Observable<PullRequest[]>((subscriber) => {
-		console.log(`loading prs for ${ctx.repo}`);
 		const key = ctx.owner + '/' + ctx.repo;
 
 		const cachedPrs = lscache.get(key);

packages/ui/src/lib/remotecontributions/store.ts

@@ -14,14 +14,14 @@ export function getRemoteContributionsStore(
 		switchMap(
 			([remoteBranches, pullRequests]) =>
 				new Observable<RemoteContribution[]>((observer) => {
-					const contributions = toRemoteContributions(pullRequests, remoteBranches || []);
+					const contributions = mergeBranchesAndPrs(pullRequests, remoteBranches || []);
 					observer.next(contributions);
 				})
 		)
 	);
 }
 
-function toRemoteContributions(
+function mergeBranchesAndPrs(
 	pullRequests: PullRequest[],
 	remoteBranches: RemoteBranch[]
 ): RemoteContribution[] {

packages/ui/src/routes/[projectId]/navigation/PullRequests.svelte

@@ -6,14 +6,15 @@
 	import type { PullRequest, GitHubIntegrationContext } from '$lib/github/types';
 	import { showMenu } from 'tauri-plugin-context-menu';
 	import { projectPullRequestListingFilter, ListPRsFilter } from '$lib/config/config';
-	import type { Observable } from 'rxjs';
 	import type { PrService } from '$lib/github/pullrequest';
 
 	export let projectId: string;
 	export let prService: PrService;
 	export let githubContext: GitHubIntegrationContext | undefined;
 
-	$: pullRequests$ = prService.pullRequests$;
+	$: prs = prService.prs$;
+	$: error$ = prService.error$;
+
 	let rbViewport: HTMLElement;
 	let rbContents: HTMLElement;
 	let rbSection: HTMLElement;
@@ -77,10 +78,12 @@
 		class="hide-native-scrollbar flex max-h-full flex-grow flex-col overflow-y-scroll overscroll-none"
 	>
 		<div bind:this={rbContents}>
-			{#await $pullRequests$}
-				<span>loading...</span>
-			{:then prs}
-				{#each filterPRs(prs, $filterChoice) as pr}
+			{#if $error$}
+				<p class="p-2">{$error$}</p>
+			{:else if !$prs}
+				<p class="p-2">loading...</p>
+			{:else}
+				{#each filterPRs($prs, $filterChoice) as pr}
 					<a
 						href="/{projectId}/pull/{pr.number}"
 						class="border-color-4 flex flex-col justify-between gap-1 border-b px-2 py-1 pt-2 -outline-offset-2 outline-blue-200 last:border-b-0 focus:outline-2"

packages/ui/src/routes/[projectId]/pull/[number]/+page.svelte

@@ -7,7 +7,7 @@
 	export let data: PageData;
 	let { branchController, prService } = data;
 
-	$: pr = prService.pullRequests$?.pipe(
+	$: pr = prService.prs$?.pipe(
 		map((prs) => prs.find((b) => b.number.toString() == $page.params.number))
 	);
 </script>