fix: Expose and repair report dialog

packages/browser/src/index.ts

@@ -19,7 +19,7 @@ export { getHubFromCarrier, getCurrentHub, Hub, Scope } from '@sentry/hub';
 
 export { BrowserBackend, BrowserOptions } from './backend';
 export { BrowserClient } from './client';
-export { defaultIntegrations, init } from './sdk';
+export { defaultIntegrations, init, lastEventId, showReportDialog } from './sdk';
 export { SDK_NAME, SDK_VERSION } from './version';
 
 import * as Integrations from './integrations';

packages/browser/src/sdk.ts

@@ -1,4 +1,6 @@
 import { initAndBind } from '@sentry/core';
+import { getCurrentHub } from '@sentry/hub';
+import { DsnLike } from '@sentry/types';
 import { BrowserOptions } from './backend';
 import { BrowserClient } from './client';
 import {
@@ -69,3 +71,46 @@ export const defaultIntegrations = [
 export function init(options: BrowserOptions): void {
   initAndBind(BrowserClient, options, defaultIntegrations);
 }
+
+/**
+ * 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: {
+    [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;
+  } = {},
+): void {
+  if (!options.eventId) {
+    options.eventId = getCurrentHub().lastEventId();
+  }
+  (getCurrentHub().getClient() as BrowserClient).showReportDialog(options);
+}
+
+/**
+ * This is the getter for lastEventId.
+ *
+ * @returns The last event id of a captured event.
+ */
+export function lastEventId(): string | undefined {
+  return getCurrentHub().lastEventId();
+}

packages/core/src/api.ts

@@ -73,6 +73,7 @@ export class API {
     const endpoint = `${this.getBaseUrl()}${dsn.path ? `/${dsn.path}` : ''}/api/embed/error-page/`;
 
     const encodedOptions = [];
+    encodedOptions.push(`dsn=${dsn.toString()}`);
     for (const key in dialogOptions) {
       if (key === 'user') {
         if (!dialogOptions.user) {

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

@@ -21,14 +21,16 @@ describe('API', () => {
   });
   test('getReportDialogEndpoint', () => {
     expect(new API(dsnPublic).getReportDialogEndpoint({})).toEqual(
-      'https://sentry.io:1234/subpath/api/embed/error-page/',
+      'https://sentry.io:1234/subpath/api/embed/error-page/?dsn=https://abc@sentry.io:1234/subpath/123',
     );
     expect(
       new API(dsnPublic).getReportDialogEndpoint({
         eventId: 'abc',
         testy: '2',
       }),
-    ).toEqual('https://sentry.io:1234/subpath/api/embed/error-page/?eventId=abc&testy=2');
+    ).toEqual(
+      'https://sentry.io:1234/subpath/api/embed/error-page/?dsn=https://abc@sentry.io:1234/subpath/123&eventId=abc&testy=2',
+    );
 
     expect(
       new API(dsnPublic).getReportDialogEndpoint({
@@ -38,14 +40,18 @@ describe('API', () => {
           name: 'yo',
         },
       }),
-    ).toEqual('https://sentry.io:1234/subpath/api/embed/error-page/?eventId=abc&name=yo&email=email');
+    ).toEqual(
+      'https://sentry.io:1234/subpath/api/embed/error-page/?dsn=https://abc@sentry.io:1234/subpath/123&eventId=abc&name=yo&email=email',
+    );
 
     expect(
       new API(dsnPublic).getReportDialogEndpoint({
         eventId: 'abc',
         user: undefined,
       }),
-    ).toEqual('https://sentry.io:1234/subpath/api/embed/error-page/?eventId=abc');
+    ).toEqual(
+      'https://sentry.io:1234/subpath/api/embed/error-page/?dsn=https://abc@sentry.io:1234/subpath/123&eventId=abc',
+    );
   });
   test('getDsn', () => {
     expect(new API(dsnPublic).getDsn()).toEqual(new Dsn(dsnPublic));