feat(www): send form feedback from new contact view via Sentry (#1733)

* Send new feedback to Sentry.

* Fix error reporter attribute.

* Update `source` to `accessKeySource`.

* Add test cases for the contact view.

* Disable `contactViewFeatureFlag`.

* Fix `ContactView` storybook by mocking the error reporter with a console logger.

* Use spread instead of casting to `unknown`.

* Move success and error handling of contact view to `AppRoot` component.

* Move error reporter to `www/shared/` instead of `infrastructure/`.

* Put error reporter back into `TODO.spec.ts` now that it's back under `www/`.

* Fix `ContactView` tests.

* Reset `contactViewFeatureFlag` value.

src/www/TODO.spec.ts

@@ -27,7 +27,7 @@
 // import * as outlineIcons from './ui_components/outline-icons';
 
 import * as clipboard from './app/clipboard';
-import * as errorReporter from './app/error_reporter';
+import * as errorReporter from './shared/error_reporter';
 import * as platform from './app/platform';
 import * as tunnel from './app/tunnel';
 import * as updater from './app/updater';

src/www/app/app.ts

@@ -21,7 +21,7 @@ import {SERVER_CONNECTION_INDICATOR_DURATION_MS} from '../views/servers_view/ser
 
 import {Clipboard} from './clipboard';
 import {EnvironmentVariables} from './environment';
-import {OutlineErrorReporter} from './error_reporter';
+import {OutlineErrorReporter} from '../shared/error_reporter';
 import {OutlineServerRepository} from './outline_server_repository';
 import {Settings, SettingsKey} from './settings';
 import {Updater} from './updater';
@@ -105,6 +105,7 @@ export class App {
     this.syncConnectivityStateToServerCards();
     rootEl.appVersion = environmentVars.APP_VERSION;
     rootEl.appBuild = environmentVars.APP_BUILD_NUMBER;
+    rootEl.errorReporter = this.errorReporter;
 
     if (urlInterceptor) {
       this.registerUrlInterceptionListener(urlInterceptor);

src/www/app/cordova_main.ts

@@ -26,7 +26,7 @@ import * as Sentry from '@sentry/browser';
 
 import {AbstractClipboard} from './clipboard';
 import {EnvironmentVariables} from './environment';
-import {SentryErrorReporter} from './error_reporter';
+import {SentryErrorReporter} from '../shared/error_reporter';
 import {main} from './main';
 import * as errors from '../model/errors';
 import {OutlinePlatform} from './platform';

src/www/app/electron_main.ts

@@ -23,7 +23,7 @@ import {ErrorCode, OutlinePluginError} from '../model/errors';
 
 import {AbstractClipboard} from './clipboard';
 import {ElectronOutlineTunnel} from './electron_outline_tunnel';
-import {getSentryBrowserIntegrations, OutlineErrorReporter} from './error_reporter';
+import {getSentryBrowserIntegrations, OutlineErrorReporter, Tags} from '../shared/error_reporter';
 import {FakeOutlineTunnel} from './fake_tunnel';
 import {getLocalizationFunction, main} from './main';
 import {AbstractUpdater} from './updater';
@@ -94,8 +94,8 @@ class ElectronErrorReporter implements OutlineErrorReporter {
     });
   }
 
-  report(userFeedback: string, feedbackCategory: string, userEmail?: string): Promise<void> {
-    Sentry.captureEvent({message: userFeedback, user: {email: userEmail}, tags: {category: feedbackCategory}});
+  report(userFeedback: string, feedbackCategory: string, userEmail?: string, tags?: Tags): Promise<void> {
+    Sentry.captureEvent({message: userFeedback, user: {email: userEmail}, tags: {...tags, category: feedbackCategory}});
     return Promise.resolve();
   }
 }

src/www/app/platform.ts

@@ -14,7 +14,7 @@
 
 import {Clipboard} from './clipboard';
 import {EnvironmentVariables} from './environment';
-import {OutlineErrorReporter} from './error_reporter';
+import {OutlineErrorReporter} from '../shared/error_reporter';
 import {TunnelFactory} from './tunnel';
 import {Updater} from './updater';
 import {UrlInterceptor} from './url_interceptor';

src/www/app/error_reporter.ts → src/www/shared/error_reporter.ts

@@ -15,28 +15,35 @@
 import * as Sentry from '@sentry/browser';
 import {Integration as SentryIntegration} from '@sentry/types';
 
+export type Tags = {[id: string]: string};
+
 export interface OutlineErrorReporter {
-  report(userFeedback: string, feedbackCategory: string, userEmail?: string): Promise<void>;
+  report(userFeedback: string, feedbackCategory: string, userEmail?: string, tags?: Tags): Promise<void>;
 }
 
 export class SentryErrorReporter implements OutlineErrorReporter {
-  constructor(appVersion: string, dsn: string, private tags: {[id: string]: string}) {
+  constructor(appVersion: string, dsn: string, private tags: Tags) {
     if (dsn) {
       Sentry.init({dsn, release: appVersion, integrations: getSentryBrowserIntegrations});
     }
     this.setUpUnhandledRejectionListener();
   }
 
-  async report(userFeedback: string, feedbackCategory: string, userEmail?: string): Promise<void> {
+  async report(userFeedback: string, feedbackCategory: string, userEmail?: string, tags?: Tags): Promise<void> {
+    const combinedTags = {...this.tags, ...tags};
     Sentry.captureEvent({
       message: userFeedback,
       user: {email: userEmail},
-      tags: {category: feedbackCategory, isFeedback: Boolean(userFeedback)},
+      tags: {
+        category: feedbackCategory,
+        isFeedback: Boolean(userFeedback),
+        ...combinedTags,
+      },
     });
     Sentry.configureScope(scope => {
       scope.setUser({email: userEmail || ''});
-      if (this.tags) {
-        scope.setTags(this.tags);
+      if (combinedTags) {
+        scope.setTags(combinedTags);
       }
       scope.setTag('category', feedbackCategory);
     });

src/www/ui_components/app-root.js

@@ -295,7 +295,13 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         <iron-pages id="pages" selected="[[page]]" attr-for-selected="name">
           <servers-view name="servers" id="serversView" servers="[[servers]]" localize="[[localize]]" use-alt-access-message="[[useAltAccessMessage]]""></servers-view>
           <template is="dom-if" if="{{contactViewFeatureFlag}}">
-            <contact-view name="contact" id="contactView"></contact-view>
+            <contact-view
+              name="contact"
+              id="contactView"
+              error-reporter="[[errorReporter]]"
+              on-success="showContactSuccessToast"
+              on-error="showContactErrorToast"
+            ></contact-view>
           </template>
           <template is="dom-if" if="{{!contactViewFeatureFlag}}">
             <feedback-view name="feedback" id="feedbackView" localize="[[localize]]"></feedback-view>
@@ -544,6 +550,10 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
         type: Number,
         readonly: true,
       },
+      errorReporter: {
+        type: Object,
+        readonly: true,
+      },
       page: {
         type: String,
         readonly: true,
@@ -621,7 +631,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
     if (!Event.prototype.composedPath) {
       // Polyfill for composedPath. See https://dom.spec.whatwg.org/#dom-event-composedpath.
       // https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath#browser_compatibility
-      Event.prototype.composedPath = function() {
+      Event.prototype.composedPath = function () {
         if (this.path) {
           return this.path; // ShadowDOM v0 equivalent property.
         }
@@ -688,7 +698,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
     if (this.$.toast.opened) {
       this.$.toast.close();
     }
-    this.async(function() {
+    this.async(function () {
       this.$.toast.text = text;
       this.$.toast.duration = duration || 3000;
 
@@ -702,7 +712,7 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
           button._handler = buttonHandler;
         } else {
           this.toastUrl = buttonUrl;
-          button._handler = function() {
+          button._handler = function () {
             this.$.toastUrl.click();
           }.bind(this);
         }
@@ -721,6 +731,15 @@ export class AppRoot extends mixinBehaviors([AppLocalizeBehavior], PolymerElemen
     this.set('route.path', '/' + page);
   }
 
+  showContactSuccessToast() {
+    this.changePage(this.DEFAULT_PAGE);
+    this.showToast(this.localize('feedback-thanks'));
+  }
+
+  showContactErrorToast() {
+    this.showToast(this.localize('error-feedback-submission'));
+  }
+
   _callToastHandler() {
     var toastButton = this.$.toastButton;
     var handler = toastButton._handler;

src/www/views/contact_view/index.spec.ts

@@ -16,14 +16,20 @@
 
 import {ContactView} from './index';
 
-import {fixture, html, nextFrame} from '@open-wc/testing';
+import {fixture, html, nextFrame, oneEvent} from '@open-wc/testing';
 import {SupportForm} from './support_form';
+import {OutlineErrorReporter, SentryErrorReporter} from '../../shared/error_reporter';
 
 describe('ContactView', () => {
   let el: ContactView;
+  let mockErrorReporter: jasmine.SpyObj<OutlineErrorReporter>;
 
   beforeEach(async () => {
-    el = await fixture(html` <contact-view></contact-view> `);
+    mockErrorReporter = jasmine.createSpyObj(
+      'SentryErrorReporter',
+      Object.getOwnPropertyNames(SentryErrorReporter.prototype)
+    );
+    el = await fixture(html` <contact-view .errorReporter=${mockErrorReporter}></contact-view> `);
   });
 
   it('is defined', async () => {
@@ -109,15 +115,27 @@ describe('ContactView', () => {
         expect(supportForm).not.toBeNull();
       });
 
-      it('shows "thank you" exit message on completion of support form', async () => {
+      it('emits success event on completion of support form', async () => {
+        const listener = oneEvent(el, 'success');
+
         const supportForm: SupportForm = el.shadowRoot!.querySelector('support-form')!;
         supportForm.valid = true;
         supportForm.dispatchEvent(new CustomEvent('submit'));
 
-        await nextFrame();
+        const {detail} = await listener;
+        expect(detail).toBeNull();
+      });
 
-        const exitCard = el.shadowRoot!.querySelector('outline-card')!;
-        expect(exitCard.textContent).toContain('Thanks for helping us improve');
+      it('emits failure event when feedback reporting fails', async () => {
+        const listener = oneEvent(el, 'error');
+        mockErrorReporter.report.and.throwError('fail');
+
+        const supportForm: SupportForm = el.shadowRoot!.querySelector('support-form')!;
+        supportForm.valid = true;
+        supportForm.dispatchEvent(new CustomEvent('submit'));
+
+        const {detail} = await listener;
+        expect(detail).toBeNull();
       });
 
       it('shows default contact view on cancellation of support form', async () => {

src/www/views/contact_view/index.ts

@@ -28,7 +28,8 @@ import './support_form';
 import {CardType} from '../shared/card';
 import {IssueType} from './issue_type';
 import {AppType} from './app_type';
-import {FormValues, SupportForm} from './support_form';
+import {FormValues, SupportForm, ValidFormValues} from './support_form';
+import {OutlineErrorReporter} from '../../shared/error_reporter';
 
 /** The possible steps in the stepper. Only one step is shown at a time. */
 enum Step {
@@ -98,6 +99,7 @@ export class ContactView extends LitElement {
   ]);
 
   @property({type: String}) variant: AppType = AppType.CLIENT;
+  @property({type: Object, attribute: 'error-reporter'}) errorReporter: OutlineErrorReporter;
 
   @state() private step: Step = Step.ISSUE_WIZARD;
   private selectedIssueType?: IssueType;
@@ -189,24 +191,32 @@ export class ContactView extends LitElement {
   }
 
   private reset() {
+    this.isFormSubmitting = false;
     this.showIssueSelector = false;
     this.step = Step.ISSUE_WIZARD;
     this.formValues = {};
   }
 
-  private submitForm() {
+  private async submitForm() {
     this.isFormSubmitting = true;
 
     if (!this.formRef.value.valid) {
       throw Error('Cannot submit invalid form.');
     }
 
-    // TODO: Actually send the form data using the error reporter.
-    console.log('Submitting form data...', this.formValues);
+    const {description, email, ...tags} = this.formValues as ValidFormValues;
+    try {
+      await this.errorReporter.report(description, this.selectedIssueType?.toString() ?? 'unknown', email, {...tags});
+    } catch (e) {
+      console.error(`Failed to send feedback report: ${e.message}`);
+      this.isFormSubmitting = false;
+      this.dispatchEvent(new CustomEvent('error'));
+      return;
+    }
 
     this.isFormSubmitting = false;
-    this.exitTemplate = html` Thanks for helping us improve! We love hearing from you. `;
-    this.step = Step.EXIT;
+    this.reset();
+    this.dispatchEvent(new CustomEvent('success'));
   }
 
   private get renderIntroTemplate(): TemplateResult {

src/www/views/contact_view/stories.ts

@@ -34,10 +34,15 @@ export default {
         defaultValue: AppType.CLIENT,
       },
     },
+    onSupportContacted: {action: 'SupportContacted'},
   },
 };
 
-export const Example = ({variant}: {variant: AppType}) =>
+export const Example = ({variant, onSupportContacted}: {variant: AppType; onSupportContacted: Function}) =>
   html`
-    <contact-view .variant=${variant}></contact-view>
+    <contact-view
+      .variant=${variant}
+      .errorReporter=${{report: console.log}}
+      @SupportContacted=${onSupportContacted}
+    ></contact-view>
   `;

src/www/views/contact_view/support_form/index.spec.ts

@@ -35,29 +35,29 @@ describe('SupportForm', () => {
   it('shows correct fields for the client variant', async () => {
     const el = await fixture(html` <support-form variant="client"></support-form> `);
 
-    expect(el.shadowRoot!.querySelector('mwc-textfield[name="source"]')).not.toBeNull();
+    expect(el.shadowRoot!.querySelector('mwc-textfield[name="accessKeySource"]')).not.toBeNull();
     expect(el.shadowRoot!.querySelector('mwc-select[name="cloudProvider"]')).toBeNull();
   });
 
   it('shows correct fields for the manager variant', async () => {
     const el = await fixture(html` <support-form variant="manager"></support-form> `);
 
-    expect(el.shadowRoot!.querySelector('mwc-textfield[name="source"]')).toBeNull();
+    expect(el.shadowRoot!.querySelector('mwc-textfield[name="accessKeySource"]')).toBeNull();
     expect(el.shadowRoot!.querySelector('mwc-select[name="cloudProvider"]')).not.toBeNull();
   });
 
   it('sets fields with provided form values', async () => {
     const values: FormValues = {
       email: '[email protected]',
-      source: 'a friend',
+      accessKeySource: 'a friend',
       subject: 'Test Subject',
       description: 'Test Description',
     };
     const el = await fixture(html` <support-form .values=${values}></support-form> `);
 
     const emailInput: TextField = el.shadowRoot!.querySelector('mwc-textfield[name="email"')!;
     expect(emailInput.value).toBe('[email protected]');
-    const accessKeySourceInput: TextField = el.shadowRoot!.querySelector('mwc-textfield[name="source"')!;
+    const accessKeySourceInput: TextField = el.shadowRoot!.querySelector('mwc-textfield[name="accessKeySource"')!;
     expect(accessKeySourceInput.value).toBe('a friend');
     const subjectInput: TextField = el.shadowRoot!.querySelector('mwc-textfield[name="subject"')!;
     expect(subjectInput.value).toBe('Test Subject');
@@ -91,7 +91,7 @@ describe('SupportForm', () => {
 
       const emailInput: TextField = el.shadowRoot!.querySelector('mwc-textfield[name="email"')!;
       await setValue(emailInput, '[email protected]');
-      const accessKeySourceInput: TextField = el.shadowRoot!.querySelector('mwc-textfield[name="source"')!;
+      const accessKeySourceInput: TextField = el.shadowRoot!.querySelector('mwc-textfield[name="accessKeySource"')!;
       await setValue(accessKeySourceInput, 'From a friend');
       const subjectInput: TextField = el.shadowRoot!.querySelector('mwc-textfield[name="subject"')!;
       await setValue(subjectInput, 'Test Subject');

src/www/views/contact_view/support_form/index.ts

@@ -34,10 +34,17 @@ export declare interface FormValues {
   email?: string;
   subject?: string;
   description?: string;
-  source?: string;
+  accessKeySource?: string;
   cloudProvider?: string;
 }
 
+/** Interface for valid form data. */
+export declare interface ValidFormValues extends FormValues {
+  email: string;
+  subject: string;
+  description: string;
+}
+
 @customElement('support-form')
 export class SupportForm extends LitElement {
   static styles = [
@@ -164,11 +171,11 @@ export class SupportForm extends LitElement {
 
     return html`
       <mwc-textfield
-        name="source"
-        label="source"
+        name="accessKeySource"
+        label="Source"
         helper="Where did you get your access key?"
         helperPersistent
-        .value=${live(this.values.source ?? '')}
+        .value=${live(this.values.accessKeySource ?? '')}
         .maxLength=${SupportForm.DEFAULT_MAX_LENGTH_INPUT}
         .disabled=${this.disabled}
         required

src/www/views/contact_view/support_form/stories.ts

@@ -74,7 +74,7 @@ export const CompleteForm = ({
     email: '[email protected]',
     subject: 'My Test Subject',
     description: 'My Test Description',
-    source: 'a friend',
+    accessKeySource: 'a friend',
     cloudProvider: 'digitalocean',
   };
   return html`