From 0ea255dabc0aeee1b4441ab2c73e715940b32ea6 Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Mon, 7 Oct 2024 14:16:05 +0200 Subject: [PATCH 1/2] docs(user-feedback): Add snippet for manual injection --- .../user-feedback/configuration/index.mdx | 40 +------------------ .../manual-injection/javascript.mdx | 12 ++++++ .../manual-injection/javascript.nextjs.mdx | 26 ++++++++++++ .../manual-injection/javascript.react.mdx | 26 ++++++++++++ 4 files changed, 65 insertions(+), 39 deletions(-) create mode 100644 platform-includes/user-feedback/manual-injection/javascript.mdx create mode 100644 platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx create mode 100644 platform-includes/user-feedback/manual-injection/javascript.react.mdx diff --git a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx index 76692df0dea42..5bf9710cc4899 100644 --- a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -30,45 +30,7 @@ The following options can be configured for the integration in `feedbackIntegrat If you have `autoInject: true` a button will be inserted into the page that triggers the form to pop up so the user can enter their feedback. If instead you want to control when this injection happens, call the `feedback.createWidget()` method to get a reference to an `Actor` object, and then call `appendToDom()` to insert it into the page. -```javascript -const feedback = feedbackIntegration({ - // Disable injecting the default widget - autoInject: false, -}); - -// Create and render the button -const widget = feedback.createWidget(); - -// Later, when it's time to clean up: -widget.removeFromDom(); -``` -```typescript {tabTitle: NextJS} -function ToggleFeedbackButton() { - const [feedback, setFeedback] = useState(); - // Read `getFeedback` on the client only, to avoid hydration errors when server rendering - useEffect(() => { - setFeedback(Sentry.getFeedback()); - }, []); - - const [widget, setWidget] = useState(); - return ( - - ); -} -``` - + Read more about how to [use your own UI](#bring-your-own-button) below. diff --git a/platform-includes/user-feedback/manual-injection/javascript.mdx b/platform-includes/user-feedback/manual-injection/javascript.mdx new file mode 100644 index 0000000000000..c2a16cc2c82cb --- /dev/null +++ b/platform-includes/user-feedback/manual-injection/javascript.mdx @@ -0,0 +1,12 @@ +```javascript +const feedback = feedbackIntegration({ + // Disable injecting the default widget + autoInject: false, +}); + +// Create and render the button +const widget = feedback.createWidget(); + +// Later, when it's time to clean up: +widget.removeFromDom(); +``` diff --git a/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx b/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx new file mode 100644 index 0000000000000..f20b5223b5860 --- /dev/null +++ b/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx @@ -0,0 +1,26 @@ +```jsx {tabTitle: NextJS} +function ToggleFeedbackButton() { + const [feedback, setFeedback] = useState(); + // Read `getFeedback` on the client only, to avoid hydration errors when server rendering + useEffect(() => { + setFeedback(Sentry.getFeedback()); + }, []); + + const [widget, setWidget] = useState(); + return ( + + ); +} +``` diff --git a/platform-includes/user-feedback/manual-injection/javascript.react.mdx b/platform-includes/user-feedback/manual-injection/javascript.react.mdx new file mode 100644 index 0000000000000..356112a11fa51 --- /dev/null +++ b/platform-includes/user-feedback/manual-injection/javascript.react.mdx @@ -0,0 +1,26 @@ +```jsx {tabTitle: React} +function ToggleFeedbackButton() { + const [feedback, setFeedback] = useState(); + // Read `getFeedback` on the client only, to avoid hydration errors when server rendering + useEffect(() => { + setFeedback(Sentry.getFeedback()); + }, []); + + const [widget, setWidget] = useState(); + return ( + + ); +} +``` From 7a11b58dd78f31bf86fcb883149232aa1ab46c28 Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Wed, 23 Oct 2024 10:39:43 +0200 Subject: [PATCH 2/2] review suggestions --- .../user-feedback/configuration/index.mdx | 8 +++--- .../common/user-feedback/v7/index.mdx | 2 +- .../manual-injection/javascript.mdx | 2 +- .../manual-injection/javascript.nextjs.mdx | 2 +- .../manual-injection/javascript.react.mdx | 2 +- .../manual-injection/javascript.remix.mdx | 26 +++++++++++++++++++ 6 files changed, 34 insertions(+), 8 deletions(-) create mode 100644 platform-includes/user-feedback/manual-injection/javascript.remix.mdx diff --git a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx index 5bf9710cc4899..3f22cff3bd60b 100644 --- a/docs/platforms/javascript/common/user-feedback/configuration/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/configuration/index.mdx @@ -219,7 +219,7 @@ You can use your own button instead of the default injected button to trigger th ```javascript const feedback = feedbackIntegration({ - // Disable injecting the default widget + // Disable the injection of the default widget autoInject: false, }); @@ -230,7 +230,7 @@ feedback.attachTo(document.querySelector("#your-button"), { ```typescript {tabTitle: NextJs} function AttachToFeedbackButton() { const [feedback, setFeedback] = useState(); - // Read `getFeedback` on the client only, to avoid hydration errors when server rendering + // Read `getFeedback` on the client only, to avoid hydration errors during server rendering useEffect(() => { setFeedback(Sentry.getFeedback()); }, []); @@ -256,7 +256,7 @@ Alternatively, you can call `feedback.createForm()` and have full control over w ```javascript const feedback = feedbackIntegration({ - // Disable injecting the default widget + // Disable the injection of the default widget autoInject: false, }); @@ -267,7 +267,7 @@ form.open(); ```typescript {tabTitle: NextJS} function CreateFeedbackFromButton() { const [feedback, setFeedback] = useState(); - // Read `getFeedback` on the client only, to avoid hydration errors when server rendering + // Read `getFeedback` on the client only, to avoid hydration errors during server rendering useEffect(() => { setFeedback(Sentry.getFeedback()); }, []); diff --git a/docs/platforms/javascript/common/user-feedback/v7/index.mdx b/docs/platforms/javascript/common/user-feedback/v7/index.mdx index 4886d98a831a2..23f0fc55f5583 100644 --- a/docs/platforms/javascript/common/user-feedback/v7/index.mdx +++ b/docs/platforms/javascript/common/user-feedback/v7/index.mdx @@ -169,7 +169,7 @@ You can use your own button instead of the default injected button to trigger th ```javascript const feedback = feedbackIntegration({ - // Disable injecting the default widget + // Disable the injection of the default widget autoInject: false, }); diff --git a/platform-includes/user-feedback/manual-injection/javascript.mdx b/platform-includes/user-feedback/manual-injection/javascript.mdx index c2a16cc2c82cb..e88b38df8afaf 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.mdx @@ -1,6 +1,6 @@ ```javascript const feedback = feedbackIntegration({ - // Disable injecting the default widget + // Disable the injection of the default widget autoInject: false, }); diff --git a/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx b/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx index f20b5223b5860..ba550240945dc 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.nextjs.mdx @@ -1,7 +1,7 @@ ```jsx {tabTitle: NextJS} function ToggleFeedbackButton() { const [feedback, setFeedback] = useState(); - // Read `getFeedback` on the client only, to avoid hydration errors when server rendering + // Read `getFeedback` on the client only, to avoid hydration errors during server rendering useEffect(() => { setFeedback(Sentry.getFeedback()); }, []); diff --git a/platform-includes/user-feedback/manual-injection/javascript.react.mdx b/platform-includes/user-feedback/manual-injection/javascript.react.mdx index 356112a11fa51..72874082fc1df 100644 --- a/platform-includes/user-feedback/manual-injection/javascript.react.mdx +++ b/platform-includes/user-feedback/manual-injection/javascript.react.mdx @@ -1,7 +1,7 @@ ```jsx {tabTitle: React} function ToggleFeedbackButton() { const [feedback, setFeedback] = useState(); - // Read `getFeedback` on the client only, to avoid hydration errors when server rendering + // Read `getFeedback` on the client only, to avoid hydration errors during server rendering useEffect(() => { setFeedback(Sentry.getFeedback()); }, []); diff --git a/platform-includes/user-feedback/manual-injection/javascript.remix.mdx b/platform-includes/user-feedback/manual-injection/javascript.remix.mdx new file mode 100644 index 0000000000000..c352ddf305042 --- /dev/null +++ b/platform-includes/user-feedback/manual-injection/javascript.remix.mdx @@ -0,0 +1,26 @@ +```jsx {tabTitle: Remix} +function ToggleFeedbackButton() { + const [feedback, setFeedback] = useState(); + // Read `getFeedback` on the client only, to avoid hydration errors during server rendering + useEffect(() => { + setFeedback(Sentry.getFeedback()); + }, []); + + const [widget, setWidget] = useState(); + return ( + + ); +} +```