ref: Remove deprecated showReportDialog APIs (#10609)

Author: Luca Forstner

packages/angular/src/errorhandler.ts

@@ -2,6 +2,7 @@ import { HttpErrorResponse } from '@angular/common/http';
 import type { ErrorHandler as AngularErrorHandler } from '@angular/core';
 import { Inject, Injectable } from '@angular/core';
 import * as Sentry from '@sentry/browser';
+import type { ReportDialogOptions } from '@sentry/browser';
 import type { Event } from '@sentry/types';
 import { isString } from '@sentry/utils';
 
@@ -13,8 +14,7 @@ import { runOutsideAngular } from './zone';
 export interface ErrorHandlerOptions {
   logErrors?: boolean;
   showDialog?: boolean;
-  // eslint-disable-next-line deprecation/deprecation
-  dialogOptions?: Omit<Sentry.ReportDialogOptions, 'eventId'>;
+  dialogOptions?: Omit<ReportDialogOptions, 'eventId'>;
   /**
    * Custom implementation of error extraction from the raw value captured by the Angular.
    * @param error Value captured by Angular's ErrorHandler provider
@@ -120,8 +120,7 @@ class SentryErrorHandler implements AngularErrorHandler {
 
       if (client && !this._registeredAfterSendEventHandler) {
         client.on('afterSendEvent', (event: Event) => {
-          if (!event.type) {
-            // eslint-disable-next-line deprecation/deprecation
+          if (!event.type && event.event_id) {
             Sentry.showReportDialog({ ...this._options.dialogOptions, eventId: event.event_id });
           }
         });

packages/angular/test/errorhandler.test.ts

@@ -514,7 +514,7 @@ describe('SentryErrorHandler', () => {
         expect(client.on).toHaveBeenCalledWith('afterSendEvent', expect.any(Function));
 
         // this simulates the afterSend hook being called
-        client.cb({});
+        client.cb({ event_id: 'foobar' });
 
         expect(showReportDialogSpy).toBeCalledTimes(1);
       });

packages/browser/src/exports.ts

@@ -17,8 +17,7 @@ export type {
 
 export type { BrowserOptions } from './client';
 
-// eslint-disable-next-line deprecation/deprecation
-export type { ReportDialogOptions } from './helpers';
+export type { ReportDialogOptions } from './sdk';
 
 export {
   // eslint-disable-next-line deprecation/deprecation

packages/browser/src/helpers.ts

@@ -1,7 +1,7 @@
 import type { browserTracingIntegration } from '@sentry-internal/tracing';
 import { BrowserTracing } from '@sentry-internal/tracing';
 import { captureException, withScope } from '@sentry/core';
-import type { DsnLike, Integration, Mechanism, WrappedFunction } from '@sentry/types';
+import type { Integration, Mechanism, WrappedFunction } from '@sentry/types';
 import {
   GLOBAL_OBJ,
   addExceptionMechanism,
@@ -156,38 +156,6 @@ export function wrap(
   return sentryWrapped;
 }
 
-/**
- * All properties the report dialog supports
- *
- * @deprecated This type will be removed in the next major version of the Sentry SDK. `showReportDialog` will still be around, however the `eventId` option will now be required.
- */
-export interface ReportDialogOptions {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [key: string]: any;
-  eventId?: string;
-  dsn?: DsnLike;
-  user?: {
-    email?: string;
-    name?: string;
-  };
-  lang?: string;
-  title?: string;
-  subtitle?: string;
-  subtitle2?: string;
-  labelName?: string;
-  labelEmail?: string;
-  labelComments?: string;
-  labelClose?: string;
-  labelSubmit?: string;
-  errorGeneric?: string;
-  errorFormEntry?: string;
-  successMessage?: string;
-  /** Callback after reportDialog showed up */
-  onLoad?(this: void): void;
-  /** Callback after reportDialog closed */
-  onClose?(this: void): void;
-}
-
 /**
  * This is a slim shim of `browserTracingIntegration` for the CDN bundles.
  * Since the actual functional integration uses a different code from `BrowserTracing`,

packages/browser/src/sdk.ts

@@ -1,15 +1,14 @@
-import type { Hub } from '@sentry/core';
+import { getCurrentScope } from '@sentry/core';
 import { functionToStringIntegration, inboundFiltersIntegration } from '@sentry/core';
 import {
   captureSession,
   getClient,
-  getCurrentHub,
   getIntegrationsToSetup,
   getReportDialogEndpoint,
   initAndBind,
   startSession,
 } from '@sentry/core';
-import type { Integration, Options, UserFeedback } from '@sentry/types';
+import type { DsnLike, Integration, Options, UserFeedback } from '@sentry/types';
 import {
   addHistoryInstrumentationHandler,
   logger,
@@ -20,7 +19,6 @@ import {
 import type { BrowserClientOptions, BrowserOptions } from './client';
 import { BrowserClient } from './client';
 import { DEBUG_BUILD } from './debug-build';
-import type { ReportDialogOptions } from './helpers';
 import { WINDOW, wrap as internalWrap } from './helpers';
 import { breadcrumbsIntegration } from './integrations/breadcrumbs';
 import { dedupeIntegration } from './integrations/dedupe';
@@ -139,42 +137,52 @@ export function init(options: BrowserOptions = {}): void {
   }
 }
 
-type NewReportDialogOptions = ReportDialogOptions & { eventId: string }; // eslint-disable-line
-
-interface ShowReportDialogFunction {
-  /**
-   * Present the user with a report dialog.
-   *
-   * @param options Everything is optional, we try to fetch all info need from the global scope.
-   */
-  (options: NewReportDialogOptions): void;
-
-  /**
-   * Present the user with a report dialog.
-   *
-   * @param options Everything is optional, we try to fetch all info need from the global scope.
-   *
-   * @deprecated Please always pass an `options` argument with `eventId`. The `hub` argument will not be used in the next version of the SDK.
-   */
-  // eslint-disable-next-line deprecation/deprecation
-  (options?: ReportDialogOptions, hub?: Hub): void;
+/**
+ * All properties the report dialog supports
+ */
+export interface ReportDialogOptions {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [key: string]: any;
+  eventId: string;
+  dsn?: DsnLike;
+  user?: {
+    email?: string;
+    name?: string;
+  };
+  lang?: string;
+  title?: string;
+  subtitle?: string;
+  subtitle2?: string;
+  labelName?: string;
+  labelEmail?: string;
+  labelComments?: string;
+  labelClose?: string;
+  labelSubmit?: string;
+  errorGeneric?: string;
+  errorFormEntry?: string;
+  successMessage?: string;
+  /** Callback after reportDialog showed up */
+  onLoad?(this: void): void;
+  /** Callback after reportDialog closed */
+  onClose?(this: void): void;
 }
 
-export const showReportDialog: ShowReportDialogFunction = (
-  // eslint-disable-next-line deprecation/deprecation
-  options: ReportDialogOptions = {},
-  // eslint-disable-next-line deprecation/deprecation
-  hub: Hub = getCurrentHub(),
-) => {
+/**
+ * Present the user with a report dialog.
+ *
+ * @param options Everything is optional, we try to fetch all info need from the global scope.
+ */
+export function showReportDialog(options: ReportDialogOptions): void {
   // doesn't work without a document (React Native)
   if (!WINDOW.document) {
     DEBUG_BUILD && logger.error('Global document not defined in showReportDialog call');
     return;
   }
 
-  // eslint-disable-next-line deprecation/deprecation
-  const { client, scope } = hub.getStackTop();
-  const dsn = options.dsn || (client && client.getDsn());
+  const scope = getCurrentScope();
+  const client = scope.getClient();
+  const dsn = client && client.getDsn();
+
   if (!dsn) {
     DEBUG_BUILD && logger.error('DSN not configured for showReportDialog call');
     return;
@@ -216,7 +224,7 @@ export const showReportDialog: ShowReportDialogFunction = (
   } else {
     DEBUG_BUILD && logger.error('Not injecting report dialog. No injection point found in HTML');
   }
-};
+}
 
 /**
  * This function is here to be API compatible with the loader.

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

@@ -88,7 +88,7 @@ describe('SentryBrowser', () => {
         setCurrentClient(client);
 
         // eslint-disable-next-line deprecation/deprecation
-        showReportDialog();
+        showReportDialog({ eventId: 'foobar' });
 
         expect(getReportDialogEndpoint).toHaveBeenCalledTimes(1);
         expect(getReportDialogEndpoint).toHaveBeenCalledWith(
@@ -103,7 +103,7 @@ describe('SentryBrowser', () => {
 
         const DIALOG_OPTION_USER = { email: '[email protected]' };
         // eslint-disable-next-line deprecation/deprecation
-        showReportDialog({ user: DIALOG_OPTION_USER });
+        showReportDialog({ eventId: 'foobar', user: DIALOG_OPTION_USER });
 
         expect(getReportDialogEndpoint).toHaveBeenCalledTimes(1);
         expect(getReportDialogEndpoint).toHaveBeenCalledWith(
@@ -137,7 +137,7 @@ describe('SentryBrowser', () => {
       it('should call `onClose` when receiving `__sentry_reportdialog_closed__` MessageEvent', async () => {
         const onClose = jest.fn();
         // eslint-disable-next-line deprecation/deprecation
-        showReportDialog({ onClose });
+        showReportDialog({ eventId: 'foobar', onClose });
 
         await waitForPostMessage('__sentry_reportdialog_closed__');
         expect(onClose).toHaveBeenCalledTimes(1);
@@ -152,7 +152,7 @@ describe('SentryBrowser', () => {
           throw new Error();
         });
         // eslint-disable-next-line deprecation/deprecation
-        showReportDialog({ onClose });
+        showReportDialog({ eventId: 'foobar', onClose });
 
         await waitForPostMessage('__sentry_reportdialog_closed__');
         expect(onClose).toHaveBeenCalledTimes(1);
@@ -165,7 +165,7 @@ describe('SentryBrowser', () => {
       it('should not call `onClose` for other MessageEvents', async () => {
         const onClose = jest.fn();
         // eslint-disable-next-line deprecation/deprecation
-        showReportDialog({ onClose });
+        showReportDialog({ eventId: 'foobar', onClose });
 
         await waitForPostMessage('some_message');
         expect(onClose).not.toHaveBeenCalled();

packages/nextjs/test/integration/pages/reportDialog.tsx

@@ -1,9 +1,10 @@
-import { showReportDialog } from '@sentry/nextjs';
+import { captureException, showReportDialog } from '@sentry/nextjs';
 
 const ReportDialogPage = (): JSX.Element => (
   <button
     onClick={() => {
-      showReportDialog();
+      const eventId = captureException(new Error('show-report-dialog-error'));
+      showReportDialog({ eventId });
     }}
   >
     Open Report Dialog

packages/react/src/errorboundary.tsx

@@ -28,7 +28,6 @@ export type ErrorBoundaryProps = {
    * Options to be passed into the Sentry report dialog.
    * No-op if {@link showDialog} is false.
    */
-  // eslint-disable-next-line deprecation/deprecation
   dialogOptions?: Omit<ReportDialogOptions, 'eventId'> | undefined;
   /**
    * A fallback component that gets rendered when the error boundary encounters an error.