🐛 Bug Report: Notifications plugin: Slow loading of pages when unread notifications are present

[lshwayne96]

📜 Description

All pages (not just the notifications page) seem to take much longer to load than usual when there are unread notifications, and sometimes they can get stuck loading for more than 10 seconds. The entire Backstage application may also start responding slowly (lagging).

The problem goes away when all notifications are marked as read.

👍 Expected behavior

The presence of unread notifications should not affect the loading times of all pages and cause the app to respond slowly.

👎 Actual Behavior with Screenshots

The presence of unread notifications increases the loading times of all pages and causes the app to respond slowly.

👟 Reproduction steps

1. Send a notification to any user.
2. Login as the above user and navigate to the Notifications page (do not mark the notification as read yet).
3. Refresh the page and navigate around the app to other pages to observe the performance.
4. Mark the notification as read, refresh the page and observe the performance again.

📃 Provide the context for the Bug.

No response

🖥️ Your Environment

OS:   Linux 5.15.146.1-microsoft-standard-WSL2 - linux/x64
node: v18.19.0
yarn: 1.22.19
cli:  0.26.4 (installed)
backstage:  1.26.5

Dependencies:
  @backstage/app-defaults                                          1.5.4
  @backstage/backend-app-api                                       0.7.2
  @backstage/backend-common                                        0.21.7
  @backstage/backend-defaults                                      0.2.17
  @backstage/backend-dev-utils                                     0.1.4
  @backstage/backend-openapi-utils                                 0.1.10
  @backstage/backend-plugin-api                                    0.6.17
  @backstage/backend-tasks                                         0.5.22
  @backstage/backend-test-utils                                    0.3.7
  @backstage/catalog-client                                        1.6.4
  @backstage/catalog-model                                         1.4.5
  @backstage/cli-common                                            0.1.13
  @backstage/cli-node                                              0.2.5
  @backstage/cli                                                   0.26.4
  @backstage/config-loader                                         1.8.0
  @backstage/config                                                1.2.0
  @backstage/core-app-api                                          1.12.4
  @backstage/core-compat-api                                       0.2.4
  @backstage/core-components                                       0.14.6
  @backstage/core-plugin-api                                       1.9.2
  @backstage/dev-utils                                             1.0.31
  @backstage/errors                                                1.2.4
  @backstage/eslint-plugin                                         0.1.7
  @backstage/frontend-plugin-api                                   0.6.4
  @backstage/integration-aws-node                                  0.1.12
  @backstage/integration-react                                     1.1.26
  @backstage/integration                                           1.10.0
  @backstage/plugin-api-docs                                       0.11.4
  @backstage/plugin-app-backend                                    0.3.65
  @backstage/plugin-app-node                                       0.1.17
  @backstage/plugin-auth-backend-module-atlassian-provider         0.1.9
  @backstage/plugin-auth-backend-module-aws-alb-provider           0.1.9
  @backstage/plugin-auth-backend-module-azure-easyauth-provider    0.1.0
  @backstage/plugin-auth-backend-module-bitbucket-provider         0.1.0
  @backstage/plugin-auth-backend-module-cloudflare-access-provider 0.1.0
  @backstage/plugin-auth-backend-module-gcp-iap-provider           0.2.12
  @backstage/plugin-auth-backend-module-github-provider            0.1.14
  @backstage/plugin-auth-backend-module-gitlab-provider            0.1.14
  @backstage/plugin-auth-backend-module-google-provider            0.1.14
  @backstage/plugin-auth-backend-module-microsoft-provider         0.1.12
  @backstage/plugin-auth-backend-module-oauth2-provider            0.1.14
  @backstage/plugin-auth-backend-module-oauth2-proxy-provider      0.1.10
  @backstage/plugin-auth-backend-module-oidc-provider              0.1.8
  @backstage/plugin-auth-backend-module-okta-provider              0.0.10
  @backstage/plugin-auth-backend                                   0.22.4
  @backstage/plugin-auth-node                                      0.4.12
  @backstage/plugin-auth-react                                     0.1.1
  @backstage/plugin-catalog-backend-module-gitlab                  0.3.15
  @backstage/plugin-catalog-backend-module-ldap                    0.5.33
  @backstage/plugin-catalog-backend-module-scaffolder-entity-model 0.1.15
  @backstage/plugin-catalog-backend                                1.21.1
  @backstage/plugin-catalog-common                                 1.0.22
  @backstage/plugin-catalog-graph                                  0.4.4
  @backstage/plugin-catalog-import                                 0.10.10
  @backstage/plugin-catalog-node                                   1.11.1
  @backstage/plugin-catalog-react                                  1.11.3
  @backstage/plugin-catalog                                        1.19.0
  @backstage/plugin-events-backend-module-aws-sqs                  0.3.3
  @backstage/plugin-events-backend                                 0.3.4
  @backstage/plugin-events-node                                    0.3.3
  @backstage/plugin-home-react                                     0.1.12
  @backstage/plugin-home                                           0.7.3
  @backstage/plugin-notifications-backend                          0.2.0
  @backstage/plugin-notifications-common                           0.0.3
  @backstage/plugin-notifications-node                             0.1.3
  @backstage/plugin-notifications                                  0.2.0
  @backstage/plugin-org                                            0.6.24
  @backstage/plugin-permission-backend                             0.5.41
  @backstage/plugin-permission-common                              0.7.13
  @backstage/plugin-permission-node                                0.7.28
  @backstage/plugin-permission-react                               0.4.22
  @backstage/plugin-proxy-backend                                  0.4.15
  @backstage/plugin-scaffolder-backend-module-azure                0.1.9
  @backstage/plugin-scaffolder-backend-module-bitbucket-cloud      0.1.7
  @backstage/plugin-scaffolder-backend-module-bitbucket-server     0.1.7
  @backstage/plugin-scaffolder-backend-module-bitbucket            0.2.7
  @backstage/plugin-scaffolder-backend-module-gerrit               0.1.9
  @backstage/plugin-scaffolder-backend-module-gitea                0.1.7
  @backstage/plugin-scaffolder-backend-module-github               0.2.7
  @backstage/plugin-scaffolder-backend-module-gitlab               0.3.3
  @backstage/plugin-scaffolder-backend                             1.22.5
  @backstage/plugin-scaffolder-common                              1.5.1
  @backstage/plugin-scaffolder-node                                0.4.3
  @backstage/plugin-scaffolder-react                               1.8.4
  @backstage/plugin-scaffolder                                     1.19.3
  @backstage/plugin-search-backend-module-catalog                  0.1.23
  @backstage/plugin-search-backend-module-pg                       0.5.26
  @backstage/plugin-search-backend-module-techdocs                 0.1.22
  @backstage/plugin-search-backend-node                            1.2.21
  @backstage/plugin-search-backend                                 1.5.7
  @backstage/plugin-search-common                                  1.2.11
  @backstage/plugin-search-react                                   1.7.10
  @backstage/plugin-search                                         1.4.10
  @backstage/plugin-signals-node                                   0.1.3
  @backstage/plugin-signals-react                                  0.0.3
  @backstage/plugin-techdocs-backend                               1.10.4
  @backstage/plugin-techdocs-module-addons-contrib                 1.1.9
  @backstage/plugin-techdocs-node                                  1.12.3
  @backstage/plugin-techdocs-react                                 1.2.3
  @backstage/plugin-techdocs                                       1.10.4
  @backstage/plugin-user-settings                                  0.8.5
  @backstage/release-manifests                                     0.0.11
  @backstage/repo-tools                                            0.8.0
  @backstage/test-utils                                            1.5.4
  @backstage/theme                                                 0.5.3
  @backstage/types                                                 1.1.1
  @backstage/version-bridge                                        1.0.8

👀 Have you spent some time to check if this bug has been raised before?

• I checked and didn't find similar issue

🏢 Have you read the Code of Conduct?

• I have read the Code of Conduct

Are you willing to submit PR?

None

[drodil]

Do you have the NotificationsSidebarItem in use? That's checking the status on page load from rest API and if that's somehow blocking call, it might explain. But it does the call only once so I wonder why the navigation is affected 🤔

[lshwayne96]

Hi @drodil , yes the NotificationsSidebarItem is used in Root.tsx.
The performance profiling in Chrome as seen below (for the notifications and catalog pages) shows high CPU usage when there are unread notifications.

With unread notifications:

Without unread notifications:

[drodil]

@lshwayne96 did you try turning off features (like the titleCounter) from the sidebar item by using props?

[lshwayne96]

@drodil I just tested it, seems like setting titleCounterEnabled={false} alone for the NotificationsSidebarItem solves the problem.

[drodil]

@lshwayne96 yeah, we had the same issue in our app but it doesn't do that in the upstream app. Somehow the title counter gets in a loop and causes this. This should be fixed or the feature to be removed, not sure which is the best course of action. I am on holiday so maybe @mareklibra can take over?

[lshwayne96]

@drodil Oh I see, I didn't realize while testing that the title counter was actually in an infinite loop. Apologies for the trouble and thanks for your help!

[Floww]

Thanks for sharing, I also noticed random freezes on my side in local dev after installing notifications plugin.

Indeed when titleCounterEnabled=false, issue seems to disappear.

[mareklibra]

Fix: #24879

[mareklibra]

@lshwayne96 Thanks for reporting the issue 👍