fix: improve handling of API errors (#454)

Author: rchl

lib/routes.ts

@@ -154,22 +154,17 @@ export function setupRoutes(app: Express, ddbApi: DynamoDbApi): void {
                 }
             }
 
-            try {
-                await ddbApi.createTable({
-                    TableName,
-                    ProvisionedThroughput: {
-                        ReadCapacityUnits,
-                        WriteCapacityUnits,
-                    },
-                    GlobalSecondaryIndexes: globalSecondaryIndexes.length ? globalSecondaryIndexes : undefined,
-                    LocalSecondaryIndexes: localSecondaryIndexes.length ? localSecondaryIndexes : undefined,
-                    KeySchema: keySchema,
-                    AttributeDefinitions: attributeDefinitions,
-                });
-            } catch (error) {
-                res.status(400).send(error);
-                return;
-            }
+            await ddbApi.createTable({
+                TableName,
+                ProvisionedThroughput: {
+                    ReadCapacityUnits,
+                    WriteCapacityUnits,
+                },
+                GlobalSecondaryIndexes: globalSecondaryIndexes.length ? globalSecondaryIndexes : undefined,
+                LocalSecondaryIndexes: localSecondaryIndexes.length ? localSecondaryIndexes : undefined,
+                KeySchema: keySchema,
+                AttributeDefinitions: attributeDefinitions,
+            });
 
             res.status(204).end();
         }),
@@ -327,39 +322,34 @@ export function setupRoutes(app: Express, ddbApi: DynamoDbApi): void {
         };
         const pageSize = typeof req.query.pageSize === 'string' ? Number.parseInt(req.query.pageSize) : 25;
 
-        try {
-            const results = await getPage(ddbApi, tableDescription.KeySchema!, TableName, params, pageSize, operationType);
-            const { pageItems, nextKey } = results;
+        const results = await getPage(ddbApi, tableDescription.KeySchema!, TableName, params, pageSize, operationType);
+        const { pageItems, nextKey } = results;
 
-            const primaryKeys = tableDescription.KeySchema!.map(schema => schema.AttributeName);
-            // Primary keys are listed first.
-            const uniqueKeys = [
-                ...primaryKeys,
-                ...extractKeysForItems(pageItems).filter(key => !primaryKeys.includes(key)),
-            ];
+        const primaryKeys = tableDescription.KeySchema!.map(schema => schema.AttributeName);
+        // Primary keys are listed first.
+        const uniqueKeys = [
+            ...primaryKeys,
+            ...extractKeysForItems(pageItems).filter(key => !primaryKeys.includes(key)),
+        ];
 
-            // Append the item key.
-            for (const item of pageItems) {
-                item.__key = extractKey(item, tableDescription.KeySchema!);
-            }
+        // Append the item key.
+        for (const item of pageItems) {
+            item.__key = extractKey(item, tableDescription.KeySchema!);
+        }
 
-            const data = {
-                query: req.query,
-                pageNum,
-                prevKey: encodeURIComponent(typeof req.query.prevKey === 'string' ? req.query.prevKey : ''),
-                startKey: encodeURIComponent(typeof req.query.startKey === 'string' ? req.query.startKey : ''),
-                nextKey: nextKey ? encodeURIComponent(JSON.stringify(nextKey)) : null,
-                filterQueryString: encodeURIComponent(typeof req.query.filters === 'string' ? req.query.filters : ''),
-                Table: tableDescription,
-                Items: pageItems,
-                uniqueKeys,
-            };
+        const data = {
+            query: req.query,
+            pageNum,
+            prevKey: encodeURIComponent(typeof req.query.prevKey === 'string' ? req.query.prevKey : ''),
+            startKey: encodeURIComponent(typeof req.query.startKey === 'string' ? req.query.startKey : ''),
+            nextKey: nextKey ? encodeURIComponent(JSON.stringify(nextKey)) : null,
+            filterQueryString: encodeURIComponent(typeof req.query.filters === 'string' ? req.query.filters : ''),
+            Table: tableDescription,
+            Items: pageItems,
+            uniqueKeys,
+        };
 
-            res.json(data);
-        } catch (error: any) {
-            const typedError: Error & { code?: number } = error;
-            res.status(400).send((typedError.code ? '[' + typedError.code + '] ' : '') + typedError.message);
-        }
+        res.json(data);
     }));
 
     app.get('/tables/:TableName/meta', asyncMiddleware(async(req, res) => {
@@ -453,8 +443,7 @@ export function setupRoutes(app: Express, ddbApi: DynamoDbApi): void {
         res.json(response.Item);
     }));
 
-    app.use(((err, _req, _res, next) => {
-        console.error(err);
-        next(err);
+    app.use(((error, _req, res, _next) => {
+        res.status(500).send(error);
     }) as ErrorRequestHandler);
 }

views/create-table.ejs

@@ -63,8 +63,8 @@
                 if (response.ok) {
                     window.location = '/'
                 } else {
-                    const value = await response.text()
-                    $('#error-wrapper').html('<div class="alert alert-danger" role="alert">' + JSON.parse(value).message + '</div>')
+                    const error = await response.text()
+                    handleError(JSON.parse(error).message)
                 }
             })
 
@@ -182,16 +182,12 @@
           ]
         %>
         <%- include('partials/breadcrumb', { breadcrumb }) %>
+        <%- include('partials/error-container') %>
     </header>
     <main>
         <form id="form" method="post">
             <div class="container">
                 <h1>Create Table</h1>
-                <div class="row">
-                    <div class="col">
-                        <span id="error-wrapper"></span>
-                    </div>
-                </div>
                 <div class="row">
                     <div class="col-md-12">
                         <div class="form-group">

views/item.ejs

@@ -28,6 +28,7 @@
       }
     %>
     <%- include('partials/breadcrumb', { breadcrumb }) %>
+    <%- include('partials/error-container') %>
   </header>
 
   <main class='flex-fill d-flex flex-column'>
@@ -42,11 +43,12 @@
             'Content-Type': 'application/json'
           },
           body: editor.getValue()
-        }).then((response) => {
+        }).then(async (response) => {
           if (response.ok) {
             return response.json()
           } else {
-            throw new Error()
+            const responseText = await response.text()
+            throw new Error(JSON.parse(responseText).message)
           }
         }).then((json) => {
           if (document.location.pathname.endsWith('/add-item')) {
@@ -72,7 +74,7 @@
             saveButton.classList.add('btn-primary')
             saveButton.classList.remove('btn-warning')
           }, 2000)
-          console.error(error)
+          handleError(error.message)
         })
       }
       </script>
@@ -90,13 +92,15 @@
         event.preventDefault()
         fetch(document.location.pathname, {
           method: 'delete'
-        }).then((response) => {
+        }).then(async (response) => {
           if (response.ok) {
             window.location = `/tables/<%= encodeURIComponent(TableName) %>`
+          } else {
+            const responseText = await response.text()
+            throw new Error(JSON.parse(responseText).message)
           }
         }).catch((error) => {
-          console.error(error)
-          alert('There was an error.')
+          handleError(error.message)
         })
       }
       </script>

views/meta.ejs

@@ -38,6 +38,8 @@
         <a class='nav-link active' href='/tables/<%= encodeURIComponent(Table.TableName) %>/meta'>Meta</a>
       </li>
     </ul>
+
+    <%- include('partials/error-container') %>
   </header>
 
   <main class="flex-fill d-flex flex-column">
@@ -55,13 +57,14 @@
       document.querySelector('#deleteTable').addEventListener('click', () => {
           fetch('/tables/<%= encodeURIComponent(Table.TableName) %>', {
               method: 'delete'
-          }).then((response) => {
+          }).then(async (response) => {
               if (!response.ok) {
-                  throw new Error
+                  const responseText = await response.text()
+                  throw new Error(JSON.parse(responseText).message)
               }
               window.location.href = '/'
-          }).catch(() => {
-              window.alert('There was an error when attempting to delete the table.')
+          }).catch((error) => {
+              handleError(error.message)
           })
       });
 

views/partials/bootstrap-deps.ejs

@@ -7,5 +7,16 @@
 <script>
   $(function () {
     $('[data-toggle="tooltip"]').tooltip()
-  })
+  });
+
+  function handleError(errorText) {
+    const errorEl = $('#error-wrapper')
+    if (errorEl.length) {
+      $('#error-wrapper').html('<div class="alert alert-danger" role="alert">' + errorText + '</div>')[0].scrollIntoView({
+        behavior: 'smooth',
+      });
+    } else {
+      window.alert(errorText)
+    }
+  }
 </script>

views/partials/error-container.ejs

@@ -0,0 +1,5 @@
+<div class="row">
+    <div class="col">
+        <div id="error-wrapper"></div>
+    </div>
+</div>

views/scan.ejs

@@ -105,6 +105,8 @@
         <a href="/tables/<%= encodeURIComponent(Table.TableName) %>/add-item" class="nav-link">Create item</a>
       </li>
     </ul>
+
+    <%- include('partials/error-container') %>
   </header>
 
   <main>
@@ -501,18 +503,19 @@
       }
 
       fetch(document.location.pathname + '/items' + document.location.search)
-        .then(response => {
+        .then(async (response) => {
           if (response.ok) {
             return response.json()
           }
 
-          return response.text().then(text => Promise.reject(new Error(text)))
+          const responseText = await response.text()
+          throw new Error(JSON.parse(responseText).message)
         })
         .then(json => {
           renderItems(json)
         })
         .catch(error => {
-          alert('Error loading data: ' + error)
+          handleError(error.message)
         })
     })
     </script>

views/tables.ejs

@@ -19,6 +19,7 @@
       ]
     %>
     <%- include('partials/breadcrumb', { breadcrumb }) %>
+    <%- include('partials/error-container') %>
   </header>
   <main>
     <script>
@@ -60,14 +61,15 @@
       fetch(`/tables/${TableName}`, {
         method: 'delete'
       })
-        .then((response) => {
+        .then(async (response) => {
           if (!response.ok) {
-            throw new Error
+            const responseText = await response.text()
+            throw new Error(JSON.parse(responseText).message)
           }
           location.reload()
         })
         .catch((err) => {
-          window.alert(`There was an error when attempting to delete the table:\n\n${err}`)
+          handleError(error.message)
         })
     }
 
@@ -78,13 +80,14 @@
 
       fetch(`/tables/${TableName}/all`, {
         method: 'delete'
-      }).then((response) => {
+      }).then(async (response) => {
         if (!response.ok) {
-          throw new Error
+          const responseText = await response.text()
+          throw new Error(JSON.parse(responseText).message)
         }
         location.reload()
-      }).catch(() => {
-        window.alert('There was an error when attempting to purge the table.')
+      }).catch((error) => {
+        handleError(error.message)
       })
     }
 
@@ -94,16 +97,15 @@
         }
         fetch('/tables-purge', {
           method: 'delete'
-        }).then((response) => {
+        }).then(async (response) => {
+          const responseText = await response.text()
           if (!response.ok) {
-            throw new Error
+            throw new Error(JSON.parse(responseText).message)
           }
-          response.text().then(text => {
-            window.alert(text)
-            location.reload()
-          })
-        }).catch(() => {
-          window.alert('There was an error when attempting to purge all tables.')
+          window.alert(responseText)
+          location.reload()
+        }).catch((error) => {
+          handleError(error.message)
         })
       }
 
@@ -113,16 +115,15 @@
         }
         fetch('/tables', {
           method: 'delete'
-        }).then((response) => {
+        }).then(async (response) => {
+          const responseText = await response.text()
           if (!response.ok) {
-            throw new Error
+            throw new Error(JSON.parse(responseText).message)
           }
-          response.text().then(text => {
-            window.alert(text)
-            location.reload()
-          })
-        }).catch(() => {
-          window.alert('There was an error when attempting to delete all tables.')
+          window.alert(responseText)
+          location.reload()
+        }).catch((error) => {
+          handleError(error.message)
         })
       }