Added Sentry Session Replay in Ghost Admin (2/2) (#20263)

ref https://linear.app/tryghost/issue/SLO-128

- Sentry will record session replays when errors happen in Admin (Settings, Editor) to facilitate debugging
- The recorded sessions mask sensitive information (input fields, media items, content in the editor, metrics in the dashboard)

ghost/admin/app/routes/application.js

@@ -8,6 +8,7 @@ import ShortcutsRoute from 'ghost-admin/mixins/shortcuts-route';
 import ctrlOrCmd from 'ghost-admin/utils/ctrl-or-cmd';
 import windowProxy from 'ghost-admin/utils/window-proxy';
 import {Debug} from '@sentry/integrations';
+import {Replay} from '@sentry/replay';
 import {beforeSend} from 'ghost-admin/utils/sentry';
 import {importComponent} from '../components/admin-x/admin-x-component';
 import {inject} from 'ghost-admin/decorators/inject';
@@ -191,14 +192,31 @@ export default Route.extend(ShortcutsRoute, {
                     // embedded content, generally harmless and not useful to report
                     /^ResizeObserver loop completed with undelivered notifications/
                 ],
+                integrations: []
+            };
 
+            try {
                 // Session Replay on errors
                 // Docs: https://docs.sentry.io/platforms/javascript/session-replay
-                replaysOnErrorSampleRate: 1.0
+                sentryConfig.replaysOnErrorSampleRate = 1.0;
+                sentryConfig.integrations.push(
+                    // Replace with `Sentry.replayIntegration()` once we've migrated to @sentry/ember 8.x
+                    // Docs: https://docs.sentry.io/platforms/javascript/migration/v7-to-v8/#removal-of-sentryreplay-package
+                    new Replay({
+                        mask: ['.koenig-lexical', '.gh-dashboard'],
+                        unmask: ['[role="menu"]', '[data-testid="settings-panel"]', '.gh-nav'],
+                        maskAllText: false,
+                        maskAllInputs: true,
+                        blockAllMedia: true
+                    })
+                );
+            } catch (e) {
+                // no-op, Session Replay is not critical
+                console.error('Error enabling Sentry Replay:', e); // eslint-disable-line no-console
+            }
 
-            };
             if (this.config.sentry_env === 'development') {
-                sentryConfig.integrations = [new Debug()];
+                sentryConfig.integrations.push(new Debug());
             }
             Sentry.init(sentryConfig);
         }

ghost/admin/package.json

@@ -41,6 +41,7 @@
     "@html-next/vertical-collection": "3.0.0",
     "@sentry/ember": "7.116.0",
     "@sentry/integrations": "7.114.0",
+    "@sentry/replay": "7.116.0",
     "@tryghost/color-utils": "0.2.2",
     "@tryghost/ember-promise-modals": "2.0.1",
     "@tryghost/helpers": "1.1.90",
@@ -203,4 +204,4 @@
       }
     }
   }
-}
+}