feat(feedback): Configurable "required" label and error messages (#11152)

Author: soerface

packages/feedback/src/constants/index.ts

@@ -20,6 +20,10 @@ export const MESSAGE_LABEL = 'Description';
 export const NAME_PLACEHOLDER = 'Your Name';
 export const NAME_LABEL = 'Name';
 export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+export const IS_REQUIRED_TEXT = '(required)';
+export const SUBMIT_ERROR_CLIENT_TEXT = 'Unable to send Feedback. This is because of network issues, or because you are using an ad-blocker.';
+export const SUBMIT_ERROR_SERVER_TEXT = 'Unable to send Feedback. Please try again later.';
+export const SUBMIT_ERROR_OTHER_TEXT = 'Unable to send Feedback.';
 
 export const FEEDBACK_WIDGET_SOURCE = 'widget';
 export const FEEDBACK_API_SOURCE = 'api';

packages/feedback/src/core/integration.ts

@@ -8,12 +8,15 @@ import {
   DOCUMENT,
   EMAIL_LABEL,
   EMAIL_PLACEHOLDER,
-  FORM_TITLE,
+  FORM_TITLE, IS_REQUIRED_TEXT,
   MESSAGE_LABEL,
   MESSAGE_PLACEHOLDER,
   NAME_LABEL,
   NAME_PLACEHOLDER,
   SUBMIT_BUTTON_LABEL,
+  SUBMIT_ERROR_CLIENT_TEXT,
+  SUBMIT_ERROR_OTHER_TEXT,
+  SUBMIT_ERROR_SERVER_TEXT,
   SUCCESS_MESSAGE_TEXT,
 } from '../constants';
 import type { IFeedbackModalIntegration } from '../modal/integration';
@@ -76,6 +79,10 @@ export const _feedbackIntegration = (({
   nameLabel = NAME_LABEL,
   namePlaceholder = NAME_PLACEHOLDER,
   successMessageText = SUCCESS_MESSAGE_TEXT,
+  isRequiredText = IS_REQUIRED_TEXT,
+  submitErrorClientText = SUBMIT_ERROR_CLIENT_TEXT,
+  submitErrorServerText = SUBMIT_ERROR_SERVER_TEXT,
+  submitErrorOtherText = SUBMIT_ERROR_OTHER_TEXT,
 
   // FeedbackCallbacks
   onFormOpen,
@@ -116,6 +123,10 @@ export const _feedbackIntegration = (({
     nameLabel,
     namePlaceholder,
     successMessageText,
+    isRequiredText,
+    submitErrorClientText,
+    submitErrorServerText,
+    submitErrorOtherText,
 
     onFormClose,
     onFormOpen,

packages/feedback/src/core/sendFeedback.test.ts

@@ -2,6 +2,7 @@ import { getClient } from '@sentry/core';
 
 import { mockSdk } from './mockSdk';
 import { sendFeedback } from './sendFeedback';
+import { SUBMIT_ERROR_CLIENT_TEXT, SUBMIT_ERROR_OTHER_TEXT, SUBMIT_ERROR_SERVER_TEXT } from '../constants';
 
 describe('sendFeedback', () => {
   it('sends feedback', async () => {
@@ -12,6 +13,9 @@ describe('sendFeedback', () => {
       name: 'doe',
       email: '[email protected]',
       message: 'mi',
+      submitErrorServerText: SUBMIT_ERROR_SERVER_TEXT,
+      submitErrorClientText: SUBMIT_ERROR_CLIENT_TEXT,
+      submitErrorOtherText: SUBMIT_ERROR_OTHER_TEXT,
     });
     expect(mockTransport).toHaveBeenCalledWith([
       { event_id: expect.any(String), sent_at: expect.any(String) },

packages/feedback/src/core/sendFeedback.ts

@@ -9,7 +9,7 @@ import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent';
  * Public API to send a Feedback item to Sentry
  */
 export async function sendFeedback(
-  { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
+  { name, email, message, attachments, submitErrorServerText, submitErrorClientText, submitErrorOtherText, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
   { includeReplay = true }: SendFeedbackOptions = {},
 ): Promise<TransportMakeRequestResponse> {
   if (!message) {
@@ -75,17 +75,18 @@ export async function sendFeedback(
 
       // Require valid status codes, otherwise can assume feedback was not sent successfully
       if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
-        if (response.statusCode === 0) {
-          throw new Error(
-            'Unable to send Feedback. This is because of network issues, or because you are using an ad-blocker.',
-          );
+        if (response.statusCode === 0 || (response.statusCode >= 400 && response.statusCode < 500)) {
+          throw new Error(submitErrorClientText);
+        } else if (response.statusCode >= 500) {
+          throw new Error(submitErrorServerText);
+        } else {
+          throw new Error(submitErrorOtherText);
         }
-        throw new Error('Unable to send Feedback. Invalid response from server.');
       }
 
       return response;
     } catch (err) {
-      const error = new Error('Unable to send Feedback');
+      const error = new Error(submitErrorOtherText);
 
       try {
         // In case browsers don't allow this property to be writable

packages/feedback/src/modal/components/Form.tsx

@@ -29,6 +29,10 @@ export interface Props
     | 'showEmail'
     | 'showName'
     | 'submitButtonLabel'
+    | 'isRequiredText'
+    | 'submitErrorClientText'
+    | 'submitErrorServerText'
+    | 'submitErrorOtherText'
   > {
   defaultEmail: string;
   defaultName: string;
@@ -66,7 +70,11 @@ export function Form({
   showEmail,
   showName,
   submitButtonLabel,
+  isRequiredText,
   screenshotInput,
+  submitErrorClientText,
+  submitErrorServerText,
+  submitErrorOtherText,
 }: Props): VNode {
   // TODO: set a ref on the form, and whenever an input changes call proceessForm() and setError()
   const [error, setError] = useState<null | string>(null);
@@ -121,11 +129,11 @@ export function Form({
           return;
         }
         try {
-          await onSubmit({ ...data, source: FEEDBACK_WIDGET_SOURCE });
+          await onSubmit({ ...data, submitErrorClientText, submitErrorServerText, submitErrorOtherText, source: FEEDBACK_WIDGET_SOURCE });
           onSubmitSuccess(data);
         } catch (error) {
           DEBUG_BUILD && logger.error(error);
-          setError('There was a problem submitting feedback, please wait and try again.');
+          setError(submitErrorOtherText);
           onSubmitError(error as Error);
         }
       } catch {
@@ -145,7 +153,7 @@ export function Form({
 
           {showName ? (
             <label for="name" class="form__label">
-              <LabelText label={nameLabel} isRequired={isNameRequired} />
+              <LabelText label={nameLabel} isRequiredText={isRequiredText} isRequired={isNameRequired} />
               <input
                 class="form__input"
                 defaultValue={defaultName}
@@ -162,7 +170,7 @@ export function Form({
 
           {showEmail ? (
             <label for="email" class="form__label">
-              <LabelText label={emailLabel} isRequired={isEmailRequired} />
+              <LabelText label={emailLabel} isRequiredText={isRequiredText} isRequired={isEmailRequired} />
               <input
                 class="form__input"
                 defaultValue={defaultEmail}
@@ -178,7 +186,7 @@ export function Form({
           )}
 
           <label for="message" class="form__label">
-            <LabelText label={messageLabel} isRequired />
+            <LabelText label={messageLabel} isRequiredText={isRequiredText} isRequired />
             <textarea
               autoFocus
               class="form__input form__input--textarea"
@@ -223,11 +231,11 @@ export function Form({
   );
 }
 
-function LabelText({ label, isRequired }: { label: string; isRequired: boolean }): VNode {
+function LabelText({ label, isRequired, isRequiredText }: { label: string; isRequired: boolean, isRequiredText: string }): VNode {
   return (
     <span class="form__label__text">
       {label}
-      {isRequired && <span class="form__label__text--required">(required)</span>}
+      {isRequired && <span class="form__label__text--required">${isRequiredText}</span>}
     </span>
   );
 }

packages/feedback/src/types/config.ts

@@ -135,6 +135,18 @@ export interface FeedbackTextConfiguration {
    * Message after feedback was sent successfully
    */
   successMessageText: string;
+
+  /**
+   * Text which indicates that a field is required
+   */
+  isRequiredText: string;
+
+  /**
+   * Error messages when feedback submission
+   */
+  submitErrorClientText: string;
+  submitErrorServerText: string;
+  submitErrorOtherText: string;
 }
 
 /**

packages/feedback/src/types/index.ts

@@ -43,7 +43,13 @@ export interface OptionalFeedbackConfiguration
  */
 export type OverrideFeedbackConfiguration = Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>;
 
-export interface SendFeedbackParams {
+export interface SendFeedbackParams
+extends Pick<
+    FeedbackInternalOptions,
+    | 'submitErrorClientText'
+    | 'submitErrorServerText'
+    | 'submitErrorOtherText'
+  > {
   message: string;
   name?: string;
   email?: string;