fix(webapp): gracefully handle pagination, fixes #584

www/webapp/src/utils.js

@@ -58,6 +58,14 @@ async function _digestError(error, app) {
       } else if (error.response.status === 413) {
         return ['Too much data. Try to reduce the length of your inputs.'];
       } else if ('data' in error.response) {
+        if ('link' in error.response.headers) {
+          if (app === undefined) {
+            return ['Pagination required.'];
+          } else {
+            app.pagination_required = true;
+            return [];
+          }
+        }
         let data = error.response.data;
         if (data instanceof Blob) {
           data = await data.text();
@@ -100,7 +108,7 @@ async function _digestError(error, app) {
  */
 export async function digestError(error, component) {
   let e = await _digestError(error, component);
-  if (e.constructor === Array) {
+  if (e.constructor === Array && e.length) {
     return {undefined: e};
   } else {
     return e;

www/webapp/src/views/CrudList.vue

@@ -232,12 +232,33 @@
               </v-layout>
             </template>
             <template v-slot:no-data>
-              <div class="py-4 text-xs-center">
-                <h2 class="title">
-                  Feels so empty here!
-                </h2>
-                <p>No entries yet.</p>
+              <div v-if="!pagination_required">
+                <div class="py-4 text-xs-center">
+                  <h2 class="title">Feels so empty here!</h2>
+                  <p>No entries yet.</p>
+                </div>
               </div>
+              <v-alert
+                  v-else
+                  border="top"
+                  colored-border
+                  text
+                  prominent
+                  type="warning"
+              >
+                <div class="py-4">
+                  <h2 class="title">Too much data!</h2>
+                  <p>
+                    Wow! There are more than 500 entries here.<br>
+                    Unfortunately, the web interface can't handle this.
+                  </p>
+                  <p>
+                    Please use the <a href="https://desec.readthedocs.io" target="_blank">API</a>
+                    or <a href="https://talk.desec.io/t/tools-implementing-desec/11" target="_blank">another tool</a>
+                    that provides an interface to deSEC.
+                  </p>
+                </div>
+              </v-alert>
             </template>
           </v-data-table>
 
@@ -411,6 +432,7 @@ export default {
     itemDefaults: () => ({}),
     // callbacks
     itemIsReadOnly: () => false,
+    pagination_required: false,
     postcreate: this.close,
     precreate: () => undefined,
     preupdate: () => undefined,