working feedback screenshot package with preact

Author: c298lee

packages/feedback/src/index.ts

@@ -4,3 +4,5 @@ export {
   Feedback,
   feedbackIntegration,
 } from './integration';
+
+console.log('Feedback 2');

packages/feedback/src/integration.ts

@@ -111,6 +111,8 @@ export class Feedback implements Integration {
     onFormOpen,
     onSubmitError,
     onSubmitSuccess,
+
+    // getScreenshotIntegration,
   }: OptionalFeedbackConfiguration = {}) {
     // eslint-disable-next-line deprecation/deprecation
     this.name = Feedback.id;
@@ -158,6 +160,8 @@ export class Feedback implements Integration {
       onFormOpen,
       onSubmitError,
       onSubmitSuccess,
+
+      // getScreenshotIntegration,
     };
   }
 
@@ -182,6 +186,7 @@ export class Feedback implements Integration {
       this._createWidget(this.options);
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
+      console.log(err);
     }
   }
 
@@ -241,6 +246,7 @@ export class Feedback implements Integration {
       });
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
+      console.log(err);
       return null;
     }
   }
@@ -255,6 +261,7 @@ export class Feedback implements Integration {
       return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
+      console.log(err);
       return null;
     }
   }
@@ -281,6 +288,7 @@ export class Feedback implements Integration {
         return true;
       }
     } catch (err) {
+      console.log(err);
       DEBUG_BUILD && logger.error(err);
     }
 

packages/feedback/src/types/index.ts

@@ -80,6 +80,8 @@ export interface FeedbackGeneralConfiguration {
     email: string;
     name: string;
   };
+
+  // getScreenshotIntegration: () => Integration;
 }
 
 /**

packages/feedback/src/widget/Form.ts

@@ -1,6 +1,7 @@
 import type { FeedbackComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackTextConfiguration } from '../types';
 import { SubmitButton } from './SubmitButton';
 import { createElement } from './util/createElement';
+import * as ScreenshotIntegration from '@sentry-internal/feedback-screenshot';
 
 export interface FormComponentProps
   extends Pick<
@@ -139,7 +140,7 @@ export function Form({
     name: 'message',
     required: true,
     className: 'form__input form__input--textarea',
-    placeholder: messagePlaceholder,
+    placeholder: 'message placeholder',
   });
 
   const cancelEl = createElement(
@@ -155,6 +156,14 @@ export function Form({
     cancelButtonLabel,
   );
 
+  const screenshot = createElement('div', { className: 'btn-group' });
+
+  // @ts-expect-error testing
+  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
+    el: screenshot,
+    props: null,
+  });
+
   const formEl = createElement(
     'form',
     {
@@ -219,6 +228,8 @@ export function Form({
         ],
       ),
 
+      screenshot,
+
       createElement(
         'div',
         {

packages/feedback/src/widget/createWidget.ts

@@ -76,6 +76,7 @@ export function createWidget({
     } catch (err) {
       // TODO: error handling
       logger.error(err);
+      console.log(err);
     }
   }
 
@@ -211,6 +212,7 @@ export function createWidget({
     } catch (err) {
       // TODO: Error handling?
       logger.error(err);
+      console.log(err);
     }
   }