fix: add error handling for report fetching

Currently if fetching data fails, the UI just shows a spinner. These changes add some proper error reporting.

Author: crisbeto

report-app/src/app/app.html

@@ -32,8 +32,13 @@ <h1>Web Codegen Scorer</h1>
           alt="Loading Web Codegen Scorer Logo"
           class="loading-logo no-animation"
         />
-        <div>No reports available</div>
-        <div>Run <code>web-codegen-scorer eval</code> to generate a report</div>
+
+        @if (groupsError()) {
+          <pre class="callout error code">{{groupsError()}}</pre>
+        } @else {
+          <div>No reports available</div>
+          <div>Run <code>web-codegen-scorer eval</code> to generate a report</div>
+        }
       }
     </div>
   }

report-app/src/app/app.ts

@@ -18,6 +18,7 @@ export class App {
   protected isLoading = this.reportsFetcher.isLoadingReportsList;
   protected isServer = isPlatformServer(inject(PLATFORM_ID));
   protected colorMode = this.colorModeService.colorMode;
+  protected groupsError = this.reportsFetcher.reportGroupsError;
 
   protected toggleColorMode() {
     this.colorModeService.setColorMode(

report-app/src/app/pages/report-viewer/report-viewer.html

@@ -137,6 +137,8 @@ <h3>Usage Details</h3>
 
   @if (isLoading()) {
     <message-spinner message="Loading full report"/>
+  } @else if (error()) {
+    <pre class="callout error code">{{error()?.stack}}</pre>
   } @else if (report) {
     @let details = report.details;
 

report-app/src/app/pages/report-viewer/report-viewer.ts

@@ -75,6 +75,7 @@ export class ReportViewer {
   protected reportGroupId = input.required<string>({ alias: 'id' });
   protected formatted = signal<Map<LlmResponseFile, string>>(new Map());
   protected formatScore = formatScore;
+  protected error = computed(() => this.selectedReport.error());
 
   private selectedReport = resource({
     params: () => ({ groupId: this.reportGroupId() }),

report-app/src/app/services/reports-fetcher.ts

@@ -19,22 +19,28 @@ export class ReportsFetcher {
       if (!isPlatformBrowser(this.platformId)) {
         return [];
       }
-      return fetch('/api/reports')
-        .then((r) => r.json() as Promise<RunGroup[]>)
-        .then((groups) =>
-          groups.sort((a, b) => {
-            return (
-              new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
-            );
-          })
-        );
+
+      const response = await fetch('/api/reports');
+
+      if (!response.ok) {
+        throw new Error(`Response status: ${response.status}`);
+      }
+
+      const groups = (await response.json()) as RunGroup[];
+
+      return groups.sort(
+        (a, b) =>
+          new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+      );
     },
   });
 
   readonly reportGroups = computed(() => {
     return this.groupsResource.hasValue() ? this.groupsResource.value() : [];
   });
 
+  readonly reportGroupsError = computed(() => this.groupsResource.error());
+
   readonly isLoadingSingleReport = computed(() => this.pendingFetches() > 0);
   readonly isLoadingReportsList = computed(() =>
     this.groupsResource.isLoading()
@@ -44,19 +50,31 @@ export class ReportsFetcher {
     if (!this.runCache.has(groupId)) {
       this.pendingFetches.update((current) => current + 1);
 
-      const allRuns = await fetch(`/api/reports/${groupId}`).then(
-        (r) => r.json() as Promise<RunInfo[]>
-      );
-      const firstRun = allRuns[0];
-      const combined = {
-        id: firstRun.id,
-        group: firstRun.group,
-        details: firstRun.details,
-        results: allRuns.flatMap((run) => run.results),
-      } satisfies RunInfo;
-
-      this.runCache.set(groupId, combined);
-      this.pendingFetches.update((current) => current - 1);
+      try {
+        const response = await fetch(`/api/reports/${groupId}`);
+
+        if (!response.ok) {
+          throw new Error(`Response status: ${response.status}`);
+        }
+
+        const allRuns = (await response.json()) as RunInfo[];
+
+        if (!Array.isArray(allRuns) || allRuns.length === 0) {
+          throw new Error(`Could not find report with id: ${groupId}`);
+        }
+
+        const firstRun = allRuns[0];
+        const combined = {
+          id: firstRun.id,
+          group: firstRun.group,
+          details: firstRun.details,
+          results: allRuns.flatMap((run) => run.results),
+        } satisfies RunInfo;
+
+        this.runCache.set(groupId, combined);
+      } finally {
+        this.pendingFetches.update((current) => current - 1);
+      }
     }
 
     return this.runCache.get(groupId)!;

report-app/src/app/shared/styles/callouts.scss

@@ -24,5 +24,11 @@
       background-color: #fffbeb;
       border-color: #fef3c7;
     }
+
+    &.error {
+      color: #cd0000;
+      background-color: #ffe7e7;
+      border-color: #df9e9e;
+    }
   }
 }