feat(feedback): Add onClose callback to showReportDialog (#9433)

Author: arya-s

packages/browser/src/helpers.ts

@@ -180,4 +180,6 @@ export interface ReportDialogOptions {
   successMessage?: string;
   /** Callback after reportDialog showed up */
   onLoad?(this: void): void;
+  /** Callback after reportDialog closed */
+  onClose?(this: void): void;
 }

packages/browser/src/sdk.ts

@@ -165,6 +165,20 @@ export function showReportDialog(options: ReportDialogOptions = {}, hub: Hub = g
     script.onload = options.onLoad;
   }
 
+  const { onClose } = options;
+  if (onClose) {
+    const reportDialogClosedMessageHandler = (event: MessageEvent): void => {
+      if (event.data === 'reportdialog_closed') {
+        try {
+          onClose();
+        } finally {
+          WINDOW.removeEventListener('message', reportDialogClosedMessageHandler);
+        }
+      }
+    };
+    WINDOW.addEventListener('message', reportDialogClosedMessageHandler);
+  }
+
   const injectionPoint = WINDOW.document.head || WINDOW.document.body;
   if (injectionPoint) {
     injectionPoint.appendChild(script);

packages/browser/test/unit/index.test.ts

@@ -16,6 +16,7 @@ import {
   Integrations,
   Scope,
   showReportDialog,
+  WINDOW,
   wrap,
 } from '../../src';
 import { getDefaultBrowserClientOptions } from './helper/browser-client-options';
@@ -123,6 +124,65 @@ describe('SentryBrowser', () => {
         );
       });
     });
+
+    describe('onClose', () => {
+      const dummyErrorHandler = jest.fn();
+      beforeEach(() => {
+        // this prevents jest-environment-jsdom from failing the test
+        // when an error in `onClose` is thrown
+        // it does not prevent errors thrown directly inside the test,
+        // so we don't have to worry about tests passing that should
+        // otherwise fail
+        // see: https://github.com/jestjs/jest/blob/main/packages/jest-environment-jsdom/src/index.ts#L95-L115
+        WINDOW.addEventListener('error', dummyErrorHandler);
+      });
+
+      afterEach(() => {
+        WINDOW.removeEventListener('error', dummyErrorHandler);
+      });
+
+      const waitForPostMessage = async (message: string) => {
+        WINDOW.postMessage(message, '*');
+        await flush(10);
+      };
+
+      it('should call `onClose` when receiving `reportdialog_closed` MessageEvent', async () => {
+        const onClose = jest.fn();
+        showReportDialog({ onClose });
+
+        await waitForPostMessage('reportdialog_closed');
+        expect(onClose).toHaveBeenCalledTimes(1);
+
+        // ensure the event handler has been removed so onClose is not called again
+        await waitForPostMessage('reportdialog_closed');
+        expect(onClose).toHaveBeenCalledTimes(1);
+      });
+
+      it('should call `onClose` only once even if it throws', async () => {
+        const onClose = jest.fn(() => {
+          throw new Error();
+        });
+        showReportDialog({ onClose });
+
+        await waitForPostMessage('reportdialog_closed');
+        expect(onClose).toHaveBeenCalledTimes(1);
+
+        // ensure the event handler has been removed so onClose is not called again
+        await waitForPostMessage('reportdialog_closed');
+        expect(onClose).toHaveBeenCalledTimes(1);
+      });
+
+      it('should not call `onClose` for other MessageEvents', async () => {
+        const onClose = jest.fn();
+        showReportDialog({ onClose });
+
+        await waitForPostMessage('some_message');
+        expect(onClose).not.toHaveBeenCalled();
+
+        await waitForPostMessage('reportdialog_closed');
+        expect(onClose).toHaveBeenCalledTimes(1);
+      });
+    });
   });
 
   describe('breadcrumbs', () => {

packages/core/src/api.ts

@@ -70,6 +70,10 @@ export function getReportDialogEndpoint(
       continue;
     }
 
+    if (key === 'onClose') {
+      continue;
+    }
+
     if (key === 'user') {
       const user = dialogOptions.user;
       if (!user) {

packages/core/test/lib/api.test.ts

@@ -119,6 +119,12 @@ describe('API', () => {
         { user: undefined },
         'https://sentry.io:1234/subpath/api/embed/error-page/?dsn=https://[email protected]:1234/subpath/123',
       ],
+      [
+        'with Public DSN and onClose callback',
+        dsnPublic,
+        { onClose: () => {} },
+        'https://sentry.io:1234/subpath/api/embed/error-page/?dsn=https://[email protected]:1234/subpath/123',
+      ],
     ])(
       '%s',
       (