From 2ac16314c628a5561ca1fcbbb4875498d6680d5d Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Mon, 18 Sep 2023 19:19:43 -0400
Subject: [PATCH] fix(feedback): Add `FeedbackWidget` to SSR (#7870)

* fix(feedback): Add `FeedbackWidget` to SSR

Follow-up to https://github.com/getsentry/sentry-docs/pull/7761 -- fixes hydration warnings/errors due to mismatched component tree.
---
 gatsby-browser.tsx                            |  4 ++--
 gatsby-ssr.tsx                                |  8 +++++++-
 src/components/feedback/feedbackWidget.tsx    |  2 +-
 .../feedback/feedbackWidgetLoader.tsx         | 20 +++++++++++++++++++
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/components/feedback/feedbackWidgetLoader.tsx

diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index ae3afb5ac3fa6..7f4f7d31334ba 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import {GatsbyBrowser} from 'gatsby';
 
-import {FeedbackWidget} from 'sentry-docs/components/feedback/feedbackWidget';
+import {FeedbackWidgetLoader} from 'sentry-docs/components/feedback/feedbackWidgetLoader';
 import PageContext from 'sentry-docs/components/pageContext';
 
 export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({
   element,
   props: {pageContext},
 }) => <PageContext.Provider value={pageContext}>
-        <FeedbackWidget />
+        <FeedbackWidgetLoader />
         {element}
     </PageContext.Provider>
 
diff --git a/gatsby-ssr.tsx b/gatsby-ssr.tsx
index 865768002530b..9d8bd11c4f78f 100644
--- a/gatsby-ssr.tsx
+++ b/gatsby-ssr.tsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import {GatsbySSR} from 'gatsby';
 
+import {FeedbackWidgetLoader} from 'sentry-docs/components/feedback/feedbackWidgetLoader';
 import {PageContext} from 'sentry-docs/components/pageContext';
 
 const sentryEnvironment = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development';
@@ -12,7 +13,12 @@ const sentryLoaderUrl = process.env.SENTRY_LOADER_URL;
 export const wrapPageElement: GatsbySSR['wrapPageElement'] = ({
   element,
   props: {pageContext},
-}) => <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>;
+}) => (
+  <PageContext.Provider value={pageContext}>
+    <FeedbackWidgetLoader />
+    {element}
+  </PageContext.Provider>
+);
 
 export const onPreRenderHTML: GatsbySSR['onPreRenderHTML'] = ({getHeadComponents}) => {
   if (process.env.NODE_ENV !== 'production') {
diff --git a/src/components/feedback/feedbackWidget.tsx b/src/components/feedback/feedbackWidget.tsx
index f08e2e058f555..aa578fc22dc2d 100644
--- a/src/components/feedback/feedbackWidget.tsx
+++ b/src/components/feedback/feedbackWidget.tsx
@@ -26,7 +26,7 @@ async function sendFeedback(
   return response;
 }
 
-export function FeedbackWidget() {
+export default function FeedbackWidget() {
   const [open, setOpen] = useState(false);
   const [showSuccessMessage, setShowSuccessMessage] = useState(false);
 
diff --git a/src/components/feedback/feedbackWidgetLoader.tsx b/src/components/feedback/feedbackWidgetLoader.tsx
new file mode 100644
index 0000000000000..39ef91a67934b
--- /dev/null
+++ b/src/components/feedback/feedbackWidgetLoader.tsx
@@ -0,0 +1,20 @@
+import React, {lazy} from 'react';
+
+const FeedbackWidget = lazy(() => import('./feedbackWidget'));
+
+/**
+ * Only render FeedbackWidget on client as it needs access to `window`
+ */
+export function FeedbackWidgetLoader() {
+  const isSSR = typeof window === 'undefined';
+
+  return (
+    <React.Fragment>
+      {!isSSR && (
+        <React.Suspense fallback={<div />}>
+          <FeedbackWidget />
+        </React.Suspense>
+      )}
+    </React.Fragment>
+  );
+}