feat: better DataTables AJAX error

.eslintrc.js

@@ -26,7 +26,8 @@ module.exports = {
         "showModal": false,
         "showAjaxError": false,
         "getQueryString": false,
-        "TexturePreview": false
+        "TexturePreview": false,
+        "handleDataTablesAjaxError": false
     },
     "parserOptions": {
         "ecmaVersion": 2017

resources/assets/src/js/__tests__/admin.test.js

@@ -1132,7 +1132,7 @@ describe('tests for "common" module', () => {
     const fetch = jest.fn()
       .mockReturnValue(Promise.resolve({ errno: 0, msg: 'Recorded.' }));
 
-    $.fn.dataTable = { defaults: {} };
+    $.fn.dataTable = { defaults: {}, ext: { errMode: '' } };
     window.document.cookie = '';
     window.fetch = fetch;
     window.blessing = {
@@ -1155,4 +1155,24 @@ describe('tests for "common" module', () => {
     await sendFeedback();
     expect(fetch).toHaveBeenCalledTimes(1);
   });
+
+  it('handle DataTables AJAX error', () => {
+    const { handleDataTablesAjaxError } = require(modulePath);
+    const showModal = jest.fn();
+    window.trans = jest.fn(t => t);
+    window.showModal = showModal;
+    $.fn.dataTable = { defaults: {}, ext: { errMode: '' } };
+
+    handleDataTablesAjaxError(undefined, undefined, '{}');
+    expect(showModal).not.toBeCalled();
+
+    handleDataTablesAjaxError(undefined, undefined, null, {
+      responseText: 'error'
+    });
+    expect(showModal).toBeCalledWith(
+      'error',
+      'general.fatalError',
+      'danger'
+    );
+  });
 });

resources/assets/src/js/admin/common.js

@@ -9,6 +9,14 @@ $.extend(true, $.fn.dataTable.defaults, {
     serverSide: true
 });
 
+$.fn.dataTable.ext.errMode = 'none';
+
+function handleDataTablesAjaxError(event, settings, json, xhr) {
+    if (json === null) {
+        showModal(xhr.responseText, trans('general.fatalError'), 'danger');
+    }
+}
+
 async function sendFeedback() {
     if (document.cookie.replace(/(?:(?:^|.*;\s*)feedback_sent\s*=\s*([^;]*).*$)|^.*$/, '$1') !== '') {
         return;
@@ -39,5 +47,6 @@ async function sendFeedback() {
 if (process.env.NODE_ENV === 'test') {
     module.exports = {
         sendFeedback,
+        handleDataTablesAjaxError,
     };
 }

resources/assets/src/js/admin/players.js

@@ -13,7 +13,7 @@ function initPlayersTable() {
         scrollY: ($('.content-wrapper').height() - $('.content-header').outerHeight()) * 0.7,
         fnDrawCallback: () => $('[data-toggle="tooltip"]').tooltip(),
         columnDefs: playersTableColumnDefs
-    });
+    }).on('xhr.dt', handleDataTablesAjaxError);
 }
 
 const playersTableColumnDefs = [

resources/assets/src/js/admin/plugins.js

@@ -9,7 +9,7 @@ function initPluginsTable() {
         ajax: url('admin/plugins/data'),
         fnDrawCallback: () => $('[data-toggle="tooltip"]').tooltip(),
         columnDefs: pluginsTableColumnDefs
-    });
+    }).on('xhr.dt', handleDataTablesAjaxError);
 }
 
 const pluginsTableColumnDefs = [

resources/assets/src/js/admin/users.js

@@ -14,7 +14,7 @@ function initUsersTable() {
         fnDrawCallback: () => $('[data-toggle="tooltip"]').tooltip(),
         rowCallback: (row, data) => $(row).attr('id', `user-${data.uid}`),
         columnDefs: usersTableColumnDefs
-    });
+    }).on('xhr.dt', handleDataTablesAjaxError);
 }
 
 const userPermissions = {