feat: add referer option when calling attachTo/createWidget

Author: billyvg

packages/feedback/src/integration.ts

@@ -16,7 +16,7 @@ import {
   SUBMIT_BUTTON_LABEL,
   SUCCESS_MESSAGE_TEXT,
 } from './constants';
-import type { FeedbackConfigurationWithDefaults, Widget } from './types';
+import type { CreateWidgetOptionOverrides, FeedbackConfigurationWithDefaults, Widget } from './types';
 import { createActorStyles } from './widget/Actor.css';
 import { createShadowHost } from './widget/createShadowHost';
 import { createWidget } from './widget/createWidget';
@@ -94,7 +94,6 @@ export class Feedback implements Integration {
 
   public constructor({
     id = 'sentry-feedback',
-    // attachTo = null,
     autoInject = true,
     showEmail = true,
     showName = true,
@@ -140,7 +139,6 @@ export class Feedback implements Integration {
 
     this.options = {
       id,
-      // attachTo,
       autoInject,
       isAnonymous,
       isEmailRequired,
@@ -210,7 +208,7 @@ export class Feedback implements Integration {
   /**
    * Adds click listener to attached element to open a feedback dialog
    */
-  public attachTo(el: Node | string, optionOverrides: Partial<FeedbackConfigurationWithDefaults>): Widget | null {
+  public attachTo(el: Node | string, optionOverrides: CreateWidgetOptionOverrides): Widget | null {
     try {
       const options = Object.assign({}, this.options, optionOverrides);
 
@@ -237,7 +235,7 @@ export class Feedback implements Integration {
   /**
    * Creates a new widget. Accepts partial options to override any options passed to constructor.
    */
-  public createWidget(optionOverrides: Partial<FeedbackConfigurationWithDefaults>): Widget | null {
+  public createWidget(optionOverrides: CreateWidgetOptionOverrides): Widget | null {
     try {
       return this._createWidget(Object.assign({}, this.options, optionOverrides));
     } catch (err) {

packages/feedback/src/sendFeedback.ts

@@ -3,6 +3,7 @@ import { getCurrentHub } from '@sentry/core';
 import { getLocationHref } from '@sentry/utils';
 
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
+import { SendFeedbackOptions } from './types';
 
 interface SendFeedbackParams {
   message: string;
@@ -11,16 +12,12 @@ interface SendFeedbackParams {
   url?: string;
 }
 
-interface SendFeedbackOptions {
-  includeReplay?: boolean;
-}
-
 /**
  * Public API to send a Feedback item to Sentry
  */
 export function sendFeedback(
   { name, email, message, url = getLocationHref() }: SendFeedbackParams,
-  { includeReplay = true }: SendFeedbackOptions = {},
+  { referrer, includeReplay = true }: SendFeedbackOptions = {},
 ): ReturnType<typeof sendFeedbackRequest> {
   const hub = getCurrentHub();
   const client = hub && hub.getClient<BrowserClient>();
@@ -38,5 +35,6 @@ export function sendFeedback(
       url,
       replay_id: replayId,
     },
+    referrer,
   });
 }

packages/feedback/src/types/index.ts

@@ -29,8 +29,24 @@ export interface SendFeedbackData {
     replay_id?: string;
     name?: string;
   };
+  referrer?: string;
 }
 
+export interface SendFeedbackOptions {
+  /**
+   * Should include replay with the feedback?
+   */
+  includeReplay?: boolean;
+
+  /**
+   * Allows user to set a referrer for feedback, to act as a category for the feedback
+   */
+  referrer?: string;
+}
+
+/**
+ * Feedback data expected from UI/form
+ */
 export interface FeedbackFormData {
   message: string;
   email?: string;
@@ -213,6 +229,10 @@ export interface FeedbackTheme {
   error: string;
 }
 
+export interface CreateWidgetOptionOverrides extends Partial<FeedbackConfigurationWithDefaults> {
+  referrer?: string;
+}
+
 export interface FeedbackThemes {
   dark: FeedbackTheme;
   light: FeedbackTheme;

packages/feedback/src/util/handleFeedbackSubmit.ts

@@ -1,13 +1,14 @@
 import { sendFeedback } from '../sendFeedback';
-import type { FeedbackFormData } from '../types';
+import type { FeedbackFormData, SendFeedbackOptions } from '../types';
 import type { DialogComponent } from '../widget/Dialog';
 
 /**
- *
+ * Calls `sendFeedback` to send feedback, handles UI behavior of dialog.
  */
 export async function handleFeedbackSubmit(
   dialog: DialogComponent | null,
   feedback: FeedbackFormData,
+  options?: SendFeedbackOptions
 ): Promise<Response | false> {
   if (!dialog) {
     // Not sure when this would happen
@@ -25,7 +26,7 @@ export async function handleFeedbackSubmit(
   try {
     dialog.hideError();
     dialog.setSubmitDisabled();
-    const resp = await sendFeedback(feedback);
+    const resp = await sendFeedback(feedback, options);
 
     if (!resp) {
       // Errored... re-enable submit button

packages/feedback/src/util/sendFeedbackRequest.ts

@@ -9,6 +9,7 @@ import { prepareFeedbackEvent } from './prepareFeedbackEvent';
  */
 export async function sendFeedbackRequest({
   feedback: { message, email, name, replay_id, url },
+  referrer,
 }: SendFeedbackData): Promise<Response | null> {
   const hub = getCurrentHub();
 
@@ -33,6 +34,9 @@ export async function sendFeedbackRequest({
       replay_id,
       url,
     },
+    tags: {
+      referrer,
+    }
     // type: 'feedback_event',
   };
 

packages/feedback/src/widget/createWidget.ts

@@ -11,12 +11,12 @@ import { SuccessMessage } from './SuccessMessage';
 
 interface CreateWidgetParams {
   shadow: ShadowRoot;
-  options: FeedbackConfigurationWithDefaults;
+  options: FeedbackConfigurationWithDefaults & {referrer?: string};
   attachTo?: Node;
 }
 
 /**
- *
+ * Creates a new widget. Returns public methods that control widget behavior.
  */
 export function createWidget({ shadow, options, attachTo }: CreateWidgetParams): Widget {
   let actor: ActorComponent | undefined;
@@ -64,7 +64,7 @@ export function createWidget({ shadow, options, attachTo }: CreateWidgetParams):
       return;
     }
 
-    const result = await handleFeedbackSubmit(dialog, feedback);
+    const result = await handleFeedbackSubmit(dialog, feedback, {referrer: options.referrer});
 
     // Error submitting feedback
     if (!result) {