Detangle how we handle errors from the API

Author: shepmaster

ui/frontend/api.ts

@@ -1,4 +1,5 @@
 import fetch from 'isomorphic-fetch';
+import * as z from 'zod';
 
 export const routes = {
   compile: '/compile',
@@ -30,74 +31,24 @@ export function jsonPost(url: FetchArg, body: Record<string, any>): Promise<unkn
   });
 }
 
+const ErrorResponse = z.object({
+  error: z.string(),
+});
+type ErrorResponse = z.infer<typeof ErrorResponse>;
+
 async function fetchJson(url: FetchArg, args: RequestInit) {
   const headers = new Headers(args.headers);
   headers.set('Content-Type', 'application/json');
 
-  let response;
-  try {
-    response = await fetch(url, { ...args, headers });
-  } catch (networkError) {
-    // e.g. server unreachable
-    if (networkError instanceof Error) {
-      throw {
-        error: `Network error: ${networkError.toString()}`,
-      };
-    } else {
-      throw {
-        error: 'Unknown error while fetching JSON',
-      };
-    }
-  }
-
-  let body;
-  try {
-    body = await response.json();
-  } catch (convertError) {
-    if (convertError instanceof Error) {
-      throw {
-        error: `Response was not JSON: ${convertError.toString()}`,
-      };
-    } else {
-      throw {
-        error: 'Unknown error while converting JSON',
-      };
-    }
-  }
+  const response = await fetch(url, { ...args, headers });
+  const body = await response.json();
 
   if (response.ok) {
     // HTTP 2xx
     return body;
   } else {
     // HTTP 4xx, 5xx (e.g. malformed JSON request)
-    throw body;
+    const error = await ErrorResponse.parseAsync(body);
+    throw new Error(`The server reported an error: ${error.error}`);
   }
 }
-
-// We made some strange decisions with how the `fetchJson` function
-// communicates errors, so we untwist those here to fit better with
-// redux-toolkit's ideas.
-export const adaptFetchError = async <R>(cb: () => Promise<R>): Promise<R> => {
-  let result;
-
-  try {
-    result = await cb();
-  } catch (e) {
-    if (e && typeof e === 'object' && 'error' in e && typeof e.error === 'string') {
-      throw new Error(e.error);
-    } else {
-      throw new Error('An unknown error occurred');
-    }
-  }
-
-  if (
-    result &&
-    typeof result === 'object' &&
-    'error' in result &&
-    typeof result.error === 'string'
-  ) {
-    throw new Error(result.error);
-  }
-
-  return result;
-};

ui/frontend/compileActions.ts

@@ -2,7 +2,7 @@ import { AsyncThunk, createAsyncThunk } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
 import { SimpleThunkAction } from './actions';
-import { adaptFetchError, jsonPost, routes } from './api';
+import { jsonPost, routes } from './api';
 import { compileRequestPayloadSelector } from './selectors';
 
 interface CompileRequestBody {
@@ -38,7 +38,7 @@ interface CompileActions {
 
 export const makeCompileActions = ({ sliceName, target }: Props): CompileActions => {
   const action = createAsyncThunk(sliceName, async (payload: CompileRequestBody) => {
-    const d = await adaptFetchError(() => jsonPost(routes.compile, payload));
+    const d = await jsonPost(routes.compile, payload);
     return CompileResponseBody.parseAsync(d);
   });
 

ui/frontend/reducers/crates.ts

@@ -2,7 +2,7 @@ import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import { sortBy } from 'lodash-es';
 import * as z from 'zod';
 
-import { adaptFetchError, jsonGet, routes } from '../api';
+import { jsonGet, routes } from '../api';
 import { Crate } from '../types';
 
 const sliceName = 'crates';
@@ -17,7 +17,7 @@ const CratesResponse = z.object({
 type CratesResponse = z.infer<typeof CratesResponse>;
 
 export const performCratesLoad = createAsyncThunk(sliceName, async () => {
-  const d = await adaptFetchError(() => jsonGet(routes.meta.crates));
+  const d = await jsonGet(routes.meta.crates);
   const crates = await CratesResponse.parseAsync(d);
   return sortBy(crates.crates, (c) => c.name);
 });

ui/frontend/reducers/output/clippy.ts

@@ -1,7 +1,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { adaptFetchError, jsonPost, routes } from '../../api';
+import { jsonPost, routes } from '../../api';
 import { clippyRequestSelector } from '../../selectors';
 import RootState from '../../state';
 
@@ -38,7 +38,7 @@ export const performClippy = createAsyncThunk<ClippyResponseBody, void, { state:
   async (_arg: void, { getState }) => {
     const body: ClippyRequestBody = clippyRequestSelector(getState());
 
-    const d = await adaptFetchError(() => jsonPost(routes.clippy, body));
+    const d = await jsonPost(routes.clippy, body);
     return ClippyResponseBody.parseAsync(d);
   },
 );

ui/frontend/reducers/output/execute.ts

@@ -2,7 +2,7 @@ import { AnyAction, Draft, createAsyncThunk, createSlice } from '@reduxjs/toolki
 import * as z from 'zod';
 
 import { SimpleThunkAction } from '../../actions';
-import { adaptFetchError, jsonPost, routes } from '../../api';
+import { jsonPost, routes } from '../../api';
 import { executeRequestPayloadSelector, executeViaWebsocketSelector } from '../../selectors';
 import { Channel, Edition, Mode } from '../../types';
 import {
@@ -77,7 +77,7 @@ const ExecuteResponseBody = z.object({
 type ExecuteResponseBody = z.infer<typeof ExecuteResponseBody>;
 
 export const performExecute = createAsyncThunk(sliceName, async (payload: ExecuteRequestBody) => {
-  const d = await adaptFetchError(() => jsonPost(routes.execute, payload));
+  const d = await jsonPost(routes.execute, payload);
   return ExecuteResponseBody.parseAsync(d);
 });
 

ui/frontend/reducers/output/format.ts

@@ -1,7 +1,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { adaptFetchError, jsonPost, routes } from '../../api';
+import { jsonPost, routes } from '../../api';
 import { formatRequestSelector } from '../../selectors';
 import RootState from '../../state';
 
@@ -37,7 +37,7 @@ export const performFormat = createAsyncThunk<FormatResponseBody, void, { state:
   async (_arg: void, { getState }) => {
     const body: FormatRequestBody = formatRequestSelector(getState());
 
-    const d = await adaptFetchError(() => jsonPost(routes.format, body));
+    const d = await jsonPost(routes.format, body);
     return FormatResponseBody.parseAsync(d);
   },
 );

ui/frontend/reducers/output/gist.ts

@@ -1,7 +1,7 @@
 import { Draft, PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { adaptFetchError, jsonGet, jsonPost, routes } from '../../api';
+import { jsonGet, jsonPost, routes } from '../../api';
 import { baseUrlSelector, codeSelector } from '../../selectors';
 import RootState from '../../state';
 import { Channel, Edition, Mode } from '../../types';
@@ -57,7 +57,7 @@ export const performGistLoad = createAsyncThunk<
   const gistUrl = new URL(routes.meta.gistLoad, baseUrl);
   const u = new URL(id, gistUrl);
 
-  const d = await adaptFetchError(() => jsonGet(u));
+  const d = await jsonGet(u);
   const gist = await GistResponseBody.parseAsync(d);
   return { ...gist, channel, mode, edition, stdout: '', stderr: '' };
 });
@@ -74,7 +74,7 @@ export const performGistSave = createAsyncThunk<SuccessProps, void, { state: Roo
       },
     } = state;
 
-    const d = await adaptFetchError(() => jsonPost(routes.meta.gistSave, { code }));
+    const d = await jsonPost(routes.meta.gistSave, { code });
     const gist = await GistResponseBody.parseAsync(d);
     return { ...gist, code, stdout, stderr, channel, mode, edition };
   },

ui/frontend/reducers/output/macroExpansion.ts

@@ -1,7 +1,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { adaptFetchError, jsonPost, routes } from '../../api';
+import { jsonPost, routes } from '../../api';
 import { macroExpansionRequestSelector } from '../../selectors';
 import RootState from '../../state';
 
@@ -38,7 +38,7 @@ export const performMacroExpansion = createAsyncThunk<
 >(sliceName, async (_arg: void, { getState }) => {
   const body: MacroExpansionRequestBody = macroExpansionRequestSelector(getState());
 
-  const d = await adaptFetchError(() => jsonPost(routes.macroExpansion, body));
+  const d = await jsonPost(routes.macroExpansion, body);
   return MacroExpansionResponseBody.parseAsync(d);
 });
 

ui/frontend/reducers/output/miri.ts

@@ -1,7 +1,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { adaptFetchError, jsonPost, routes } from '../../api';
+import { jsonPost, routes } from '../../api';
 import { miriRequestSelector } from '../../selectors';
 import RootState from '../../state';
 
@@ -36,7 +36,7 @@ export const performMiri = createAsyncThunk<MiriResponseBody, void, { state: Roo
   async (_arg: void, { getState }) => {
     const body: MiriRequestBody = miriRequestSelector(getState());
 
-    const d = await adaptFetchError(() => jsonPost(routes.miri, body));
+    const d = await jsonPost(routes.miri, body);
     return MiriResponseBody.parseAsync(d);
   },
 );

ui/frontend/reducers/versions.ts

@@ -1,7 +1,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { adaptFetchError, jsonGet, routes } from '../api';
+import { jsonGet, routes } from '../api';
 import { ChannelVersion } from '../types';
 
 const sliceName = 'versions';
@@ -19,7 +19,7 @@ const Response = z.object({
 type Response = z.infer<typeof Response>;
 
 export const performVersionsLoad = createAsyncThunk(sliceName, async () => {
-  const d = await adaptFetchError(() => jsonGet(routes.meta.versions));
+  const d = await jsonGet(routes.meta.versions);
   return Response.parseAsync(d);
 });