Merge pull request #1011 from rust-lang/api-smoothing

Simplify API interactions from the frontend

Author: shepmaster

ui/frontend/.eslintrc.js

@@ -67,6 +67,7 @@ module.exports = {
         'Header.tsx',
         'PopButton.tsx',
         'Stdin.tsx',
+        'api.ts',
         'compileActions.ts',
         'editor/AceEditor.tsx',
         'editor/SimpleEditor.tsx',

ui/frontend/.prettierignore

@@ -18,6 +18,7 @@ node_modules
 !Header.tsx
 !PopButton.tsx
 !Stdin.tsx
+!api.ts
 !compileActions.ts
 !editor/AceEditor.tsx
 !editor/SimpleEditor.tsx

ui/frontend/actions.ts

@@ -1,4 +1,3 @@
-import fetch from 'isomorphic-fetch';
 import { ThunkAction as ReduxThunkAction, AnyAction } from '@reduxjs/toolkit';
 
 import {
@@ -35,21 +34,6 @@ import { performCompileToLlvmIrOnly } from './reducers/output/llvmIr';
 import { performCompileToMirOnly } from './reducers/output/mir';
 import { performCompileToWasmOnly } from './reducers/output/wasm';
 
-export const routes = {
-  compile: '/compile',
-  execute: '/execute',
-  format: '/format',
-  clippy: '/clippy',
-  miri: '/miri',
-  macroExpansion: '/macro-expansion',
-  meta: {
-    crates: '/meta/crates',
-    versions: '/meta/versions',
-    gistSave: '/meta/gist',
-    gistLoad: '/meta/gist/id',
-  },
-};
-
 export type ThunkAction<T = void> = ReduxThunkAction<T, State, {}, Action>;
 export type SimpleThunkAction<T = void> = ReduxThunkAction<T, State, {}, AnyAction>;
 
@@ -148,87 +132,6 @@ export const reExecuteWithBacktrace = (): ThunkAction => dispatch => {
   dispatch(performExecuteOnly());
 };
 
-type FetchArg = Parameters<typeof fetch>[0];
-
-export function jsonGet(url: FetchArg): Promise<unknown> {
-  return fetchJson(url, {
-    method: 'get',
-  });
-}
-
-export function jsonPost(url: FetchArg, body: Record<string, any>): Promise<unknown> {
-  return fetchJson(url, {
-    method: 'post',
-    body: JSON.stringify(body),
-  });
-}
-
-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',
-      });
-    }
-  }
-
-  if (response.ok) {
-    // HTTP 2xx
-    return body;
-  } else {
-    // HTTP 4xx, 5xx (e.g. malformed JSON request)
-    throw body;
-  }
-}
-
-// 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;
-}
 
 function performAutoOnly(): ThunkAction {
   return function(dispatch, getState) {

ui/frontend/api.ts

@@ -0,0 +1,53 @@
+import * as z from 'zod';
+
+export const routes = {
+  compile: '/compile',
+  execute: '/execute',
+  format: '/format',
+  clippy: '/clippy',
+  miri: '/miri',
+  macroExpansion: '/macro-expansion',
+  meta: {
+    crates: '/meta/crates',
+    versions: '/meta/versions',
+    gistSave: '/meta/gist',
+    gistLoad: '/meta/gist/id',
+  },
+};
+
+type FetchArg = Parameters<typeof fetch>[0];
+
+export function jsonGet(url: FetchArg): Promise<unknown> {
+  return fetchJson(url, {
+    method: 'get',
+  });
+}
+
+export function jsonPost(url: FetchArg, body: Record<string, any>): Promise<unknown> {
+  return fetchJson(url, {
+    method: 'post',
+    body: JSON.stringify(body),
+  });
+}
+
+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');
+
+  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)
+    const error = await ErrorResponse.parseAsync(body);
+    throw new Error(`The server reported an error: ${error.error}`);
+  }
+}

ui/frontend/compileActions.ts

@@ -1,7 +1,8 @@
 import { AsyncThunk, createAsyncThunk } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { SimpleThunkAction, adaptFetchError, jsonPost, routes } from './actions';
+import { SimpleThunkAction } from './actions';
+import { jsonPost, routes } from './api';
 import { compileRequestPayloadSelector } from './selectors';
 
 interface CompileRequestBody {
@@ -37,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/package.json

@@ -11,7 +11,6 @@
     "core-js": "^3.1.3",
     "history": "^5.3.0",
     "immer": "^9.0.0",
-    "isomorphic-fetch": "^3.0.0",
     "lodash-es": "^4.17.21",
     "monaco-editor": "^0.44.0",
     "prismjs": "^1.6.0",
@@ -37,7 +36,6 @@
     "@babel/preset-react": "^7.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.1.1",
     "@types/common-tags": "^1.8.1",
-    "@types/isomorphic-fetch": "^0.0.36",
     "@types/jest": "^29.2.5",
     "@types/lodash-es": "^4.17.6",
     "@types/prismjs": "^1.26.0",

ui/frontend/pnpm-lock.yaml

@@ -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 '../actions';
+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/crates.ts

@@ -1,7 +1,7 @@
 import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { adaptFetchError, jsonPost, routes } from '../../actions';
+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/clippy.ts

@@ -1,7 +1,8 @@
 import { AnyAction, Draft, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
 import * as z from 'zod';
 
-import { SimpleThunkAction, adaptFetchError, jsonPost, routes } from '../../actions';
+import { SimpleThunkAction } from '../../actions';
+import { jsonPost, routes } from '../../api';
 import { executeRequestPayloadSelector, executeViaWebsocketSelector } from '../../selectors';
 import { Channel, Edition, Mode } from '../../types';
 import {
@@ -76,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);
 });