Extract a fetchJson helper for throw-on-error fetches (#193)

The data-fetching hooks/components repeated the same "await fetch, check
response.ok, otherwise throw `<label> failed (HTTP <status>)`, then parse
JSON" boilerplate. Extract it into `fetchJson<T>` in utils/api.ts and use
it at the five sites that share those exact semantics:

- ChartView: compound_svg POST and the chart-data GET (the AbortController
  signal is passed straight through; AbortError still propagates).
- MainDatasetView: dataset-metadata react-query queryFn.
- useSearchTask: the submit_query call.
- MainSelectedSet: the /reactions POST.

Sites that deliberately *swallow* errors are intentionally left alone:
MainReactionView, CompoundView, ReactionCard, and ModalKetcher return
null/'' (or warn) on a bad response so an HTML error body never reaches
dangerouslySetInnerHTML, and useSearchTask's poll branches on specific
200/202 status codes. Those don't fit a throw-on-error helper.

No behavior change at the migrated sites; `npm run build` (tsc + vite)
and `npm run lint` pass.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: skearnes

app/src/hooks/useSearchTask.ts

@@ -18,6 +18,7 @@ import { useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import reaction_pb from 'ord-schema';
 import { base64ToBytes } from '../utils/base64';
+import { fetchJson } from '../utils/api';
 import type { SearchResult } from '../types/search';
 
 const POLL_INTERVAL_MS = 1000;
@@ -85,13 +86,11 @@ export function useSearchTask(queryString: string | null, enabled: boolean) {
       if (taskRef.current.taskId === null) {
         if (!taskRef.current.submitPromise) {
           taskRef.current.startTime = Date.now();
-          taskRef.current.submitPromise = (async () => {
-            const submitRes = await fetch(`/api/submit_query${queryString}`);
-            if (!submitRes.ok) {
-              throw new Error(`submit_query failed (HTTP ${submitRes.status})`);
-            }
-            return (await submitRes.json()) as string;
-          })();
+          taskRef.current.submitPromise = fetchJson<string>(
+            `/api/submit_query${queryString}`,
+            undefined,
+            'submit_query',
+          );
         }
         try {
           taskRef.current.taskId = await taskRef.current.submitPromise;

app/src/utils/api.ts

@@ -0,0 +1,40 @@
+/**
+ * Copyright 2026 Open Reaction Database Project Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Fetches JSON from the API, throwing on a non-2xx response.
+ *
+ * Centralizes the "check response.ok, otherwise throw with the HTTP status"
+ * boilerplate shared by the data-fetching hooks and components. The thrown
+ * Error message is `${label} failed (HTTP ${status})`, where `label` defaults
+ * to the request URL.
+ *
+ * Note: callers that intentionally *swallow* fetch errors — e.g. to keep an
+ * HTML error body out of `dangerouslySetInnerHTML` — keep their own inline
+ * `response.ok` handling and do not use this helper.
+ */
+export async function fetchJson<T>(
+  input: RequestInfo | URL,
+  init?: RequestInit,
+  label?: string,
+): Promise<T> {
+  const response = await fetch(input, init);
+  if (!response.ok) {
+    const name = label ?? (typeof input === 'string' ? input : 'request');
+    throw new Error(`${name} failed (HTTP ${response.status})`);
+  }
+  return (await response.json()) as T;
+}

app/src/views/browse/selected-set/MainSelectedSet.tsx

@@ -22,6 +22,7 @@ import ReactionCard from '../../../components/ReactionCard';
 import DownloadResults from '../../../components/DownloadResults';
 import CopyButton from '../../../components/CopyButton';
 import { base64ToBytes } from '../../../utils/base64';
+import { fetchJson } from '../../../utils/api';
 import type { SearchResult } from '../../../types/search';
 import './MainSelectedSet.scss';
 
@@ -38,14 +39,15 @@ const MainSelectedSet: React.FC = () => {
   const getSelectedReactions = useCallback(async () => {
     setLoading(true);
     try {
-      const response = await fetch('/api/reactions', {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ reaction_ids: reactionIds }),
-      });
-
-      if (!response.ok) throw new Error('Failed to fetch reactions');
-      const fetched = (await response.json()) as Array<Omit<SearchResult, 'data'>>;
+      const fetched = await fetchJson<Array<Omit<SearchResult, 'data'>>>(
+        '/api/reactions',
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ reaction_ids: reactionIds }),
+        },
+        'reactions',
+      );
 
       const decoded: SearchResult[] = fetched.map(r => ({
         ...r,

app/src/views/dataset-view/ChartView.tsx

@@ -18,6 +18,7 @@ import React, { useEffect, useRef, useState, useCallback } from 'react';
 import * as d3 from 'd3';
 import LoadingSpinner from '../../components/LoadingSpinner';
 import reaction_pb from 'ord-schema';
+import { fetchJson } from '../../utils/api';
 import './ChartView.scss';
 
 interface ChartData {
@@ -63,20 +64,19 @@ const ChartView: React.FC<ChartViewProps> = ({
 
     const binary = compound.serializeBinary();
 
-    const response = await fetch('/api/compound_svg', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/x-protobuf',
+    // Throw on non-2xx (via fetchJson) so the caller's .catch sets molHtml to
+    // null instead of feeding an HTML error page to dangerouslySetInnerHTML.
+    return fetchJson<string>(
+      '/api/compound_svg',
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-protobuf',
+        },
+        body: binary as BodyInit,
       },
-      body: binary as BodyInit,
-    });
-
-    // Throw on non-2xx so the caller's .catch sets molHtml to null instead
-    // of feeding an HTML error page to dangerouslySetInnerHTML.
-    if (!response.ok) {
-      throw new Error(`compound_svg failed (HTTP ${response.status})`);
-    }
-    return response.json();
+      'compound_svg',
+    );
   }, []);
 
   const createChart = useCallback(
@@ -213,17 +213,12 @@ const ChartView: React.FC<ChartViewProps> = ({
     const controller = new AbortController();
     setLoading(true);
     setFetchError(null);
-    fetch(`/api/${apiCall}?dataset_id=${encodeURIComponent(datasetId)}`, {
-      method: 'GET',
-      signal: controller.signal,
-    })
-      .then(response => {
-        if (!response.ok) {
-          throw new Error(`${apiCall} failed (HTTP ${response.status})`);
-        }
-        return response.json();
-      })
-      .then((data: ChartData[]) => {
+    fetchJson<ChartData[]>(
+      `/api/${apiCall}?dataset_id=${encodeURIComponent(datasetId)}`,
+      { method: 'GET', signal: controller.signal },
+      apiCall,
+    )
+      .then(data => {
         setLoading(false);
         setInputsData(data);
       })

app/src/views/dataset-view/MainDatasetView.tsx

@@ -21,6 +21,7 @@ import LoadingSpinner from '../../components/LoadingSpinner';
 import ChartView from './ChartView';
 import SearchResults from './SearchResults';
 import { useSearchTask } from '../../hooks/useSearchTask';
+import { fetchJson } from '../../utils/api';
 import type { Dataset } from '../../types/search';
 import './MainDatasetView.scss';
 
@@ -40,15 +41,12 @@ const MainDatasetView: React.FC = () => {
   const { data: datasetData, error: datasetError } = useQuery<Dataset>({
     queryKey: ['dataset-metadata', datasetId],
     enabled: !!datasetId,
-    queryFn: async () => {
-      const res = await fetch(
+    queryFn: () =>
+      fetchJson<Dataset>(
         `/api/dataset?dataset_id=${encodeURIComponent(datasetId!)}`,
-      );
-      if (!res.ok) {
-        throw new Error(`Failed to load dataset metadata (HTTP ${res.status})`);
-      }
-      return (await res.json()) as Dataset;
-    },
+        undefined,
+        'dataset metadata',
+      ),
   });
 
   return (