todo,todo-backend: use @backstage/errors

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

plugins/todo/package.json

@@ -28,6 +28,7 @@
   "dependencies": {
     "@backstage/catalog-model": "^0.7.3",
     "@backstage/core": "^0.7.0",
+    "@backstage/errors": "^0.1.1",
     "@backstage/plugin-catalog-react": "^0.1.1",
     "@backstage/theme": "^0.2.3",
     "@material-ui/core": "^4.11.0",

plugins/todo/src/api/TodoClient.ts

@@ -15,6 +15,7 @@
  */
 
 import { serializeEntityRef } from '@backstage/catalog-model';
+import { ResponseError } from '@backstage/errors';
 import { DiscoveryApi, IdentityApi } from '@backstage/core';
 import { TodoApi, TodoListOptions, TodoListResult } from './types';
 
@@ -64,39 +65,10 @@ export class TodoClient implements TodoApi {
     });
 
     if (!res.ok) {
-      const error = await this.readResponseError(res, 'list todos');
-      throw error;
+      throw await ResponseError.fromResponse(res);
     }
 
     const data: TodoListResult = await res.json();
     return data;
   }
-
-  private async readResponseError(res: Response, action: string) {
-    const error = new Error() as Error & { status: number };
-    error.status = res.status;
-
-    try {
-      const json = await res.clone().json();
-      if (typeof json?.error?.message !== 'string') {
-        throw new Error('invalid error');
-      }
-      error.message = json.error.message;
-      if (json.error.name) {
-        error.name = json.error.name;
-      }
-    } catch {
-      try {
-        const text = await res.text();
-        error.message = `Failed to ${action}, ${text}`;
-      } catch {
-        error.message = `Failed to ${action}, status ${res.status}`;
-      }
-      if (res.status === 404) {
-        error.name = 'NotFoundError';
-      }
-    }
-
-    throw error;
-  }
 }

plugins/todo/src/components/TodoList/TodoList.tsx

@@ -20,9 +20,9 @@ import {
   useApi,
   OverflowTooltip,
   Link,
+  ResponseErrorPanel,
 } from '@backstage/core';
 import { useEntity } from '@backstage/plugin-catalog-react';
-import Alert from '@material-ui/lab/Alert';
 import React, { useState } from 'react';
 import { todoApiRef } from '../../api';
 import { TodoItem, TodoListOptions } from '../../api/types';
@@ -64,7 +64,7 @@ export const TodoList = () => {
   const [error, setError] = useState<Error>();
 
   if (error) {
-    return <Alert severity="error">{error.message}</Alert>;
+    return <ResponseErrorPanel error={error} />;
   }
 
   return (