Add error handling to Pager

- refactors Pager.init to accept a single object parameter
- refactors all calls to Pager.init to use single object parameter
- createFlash when error occurs when fetching activity
- remove domContentLoaded handler from dashboard activity

app/assets/javascripts/activities.js

@@ -2,14 +2,20 @@
 
 import $ from 'jquery';
 import Cookies from 'js-cookie';
+import createFlash from '~/flash';
+import { s__ } from '~/locale';
 import { localTimeAgo } from './lib/utils/datetime_utility';
 import Pager from './pager';
 
 export default class Activities {
-  constructor(container = '') {
-    this.container = container;
+  constructor(containerSelector = '') {
+    this.containerSelector = containerSelector;
+    this.containerEl = this.containerSelector
+      ? document.querySelector(this.containerSelector)
+      : undefined;
+    this.$contentList = $('.content_list');
 
-    Pager.init(20, true, false, (data) => data, this.updateTooltips, this.container);
+    this.loadActivities();
 
     $('.event-filter-link').on('click', (e) => {
       e.preventDefault();
@@ -18,13 +24,30 @@ export default class Activities {
     });
   }
 
+  loadActivities() {
+    Pager.init({
+      limit: 20,
+      preload: true,
+      prepareData: (data) => data,
+      successCallback: () => this.updateTooltips(),
+      errorCallback: () =>
+        createFlash({
+          message: s__(
+            'Activity|An error occured while retrieving activity. Reload the page to try again.',
+          ),
+          parent: this.containerEl,
+        }),
+      container: this.containerSelector,
+    });
+  }
+
   updateTooltips() {
     localTimeAgo($('.js-timeago', '.content_list'));
   }
 
   reloadActivities() {
-    $('.content_list').html('');
-    Pager.init(20, true, false, (data) => data, this.updateTooltips, this.container);
+    this.$contentList.html('');
+    this.loadActivities();
   }
 
   toggleFilter(sender) {

app/assets/javascripts/commits.js

@@ -10,7 +10,7 @@ export default class CommitsList {
 
     this.$contentList = $('.content_list');
 
-    Pager.init(parseInt(limit, 10), false, false, this.processCommits.bind(this));
+    Pager.init({ limit: parseInt(limit, 10), prepareData: this.processCommits.bind(this) });
 
     this.content = $('#commits-list');
     this.searchField = $('#commits-search');

app/assets/javascripts/pager.js

@@ -8,19 +8,21 @@ const ENDLESS_SCROLL_BOTTOM_PX = 400;
 const ENDLESS_SCROLL_FIRE_DELAY_MS = 1000;
 
 export default {
-  init(
+  init({
     limit = 0,
     preload = false,
     disable = false,
     prepareData = $.noop,
-    callback = $.noop,
+    successCallback = $.noop,
+    errorCallback = $.noop,
     container = '',
-  ) {
+  } = {}) {
     this.limit = limit;
     this.offset = parseInt(getParameterByName('offset'), 10) || this.limit;
     this.disable = disable;
     this.prepareData = prepareData;
-    this.callback = callback;
+    this.successCallback = successCallback;
+    this.errorCallback = errorCallback;
     this.loading = $(`${container} .loading`).first();
     if (preload) {
       this.offset = 0;
@@ -42,7 +44,7 @@ export default {
       })
       .then(({ data }) => {
         this.append(data.count, this.prepareData(data.html));
-        this.callback();
+        this.successCallback();
 
         // keep loading until we've filled the viewport height
         if (!this.disable && !this.isScrollable()) {
@@ -51,7 +53,8 @@ export default {
           this.loading.hide();
         }
       })
-      .catch(() => this.loading.hide());
+      .catch((err) => this.errorCallback(err))
+      .finally(() => this.loading.hide());
   },
 
   append(count, html) {

app/assets/javascripts/pages/dashboard/activity/index.js

 import Activities from '~/activities';
 
-document.addEventListener('DOMContentLoaded', () => new Activities());
+// eslint-disable-next-line no-new
+new Activities();

app/views/users/show.html.haml

@@ -163,6 +163,7 @@
 
       - if profile_tab?(:activity)
         #activity.tab-pane
+          .flash-container
           - if can?(current_user, :read_cross_project)
             %h4.prepend-top-20
               = s_('UserProfile|Most Recent Activity')

changelogs/unreleased/add-error-handler-dashboard-activity.yml

+---
+title: Display error message when dashboard activity fetch fails
+merge_request: 57935
+author:
+type: changed

locale/gitlab.pot

@@ -1776,6 +1776,9 @@ msgstr ""
 msgid "Activity"
 msgstr ""
 
+msgid "Activity|An error occured while retrieving activity. Reload the page to try again."
+msgstr ""
+
 msgid "Add"
 msgstr ""