docs(feedback): Add notes about async loading the Feedback integration #10108

ryan953 · 2024-05-22T16:58:57Z

This adds documentation for a new feature/behavior within the User Feedback SDK -> different strategies for bundling the SDK code within your app.

I tried to be verbose about what's available, and what the defaults are. I hope it makes sense.

Relates to getsentry/sentry#70862

vercel · 2024-05-22T16:59:01Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 29, 2024 5:05pm

billyvg

Content wise, this seems good. I think there's some wordsmithing needed, but will leave that up to the pros

billyvg · 2024-05-22T18:41:25Z

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+
+2. `feedbackAsyncIntegration`
+
+    This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.


Suggested change

This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.

This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button, the integration will asynchronously load internal integrations that show the form and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asynchronous loading can fail when the user interacts with the button.

Maybe mention ad blocker as an example?
Should we describe how/where the async code is loaded from?

+1 I think it'd be helpful to explain a bit more

i put some notes in there about loading from our CDN and ad-blockers. take another look at the whole paragraph and lmk

billyvg · 2024-05-22T18:43:16Z

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+
+    This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.
+
+All of the code examples on this page use `feedbackIntegration` as a default because it is available whether you have chosen the CDN or NPM installation method. However the implementation of `feedbackIntegration` is different depending on the installation method. For CDN users `feedbackIntegration` is an alias of `feedbackAsyncIntegration`, while for NPM users `feedbackIntegration` is an alias of `feedbackSyncIntegration`.


Do we usually use NPM as the terminology for a local bundle?

vivianyentran

Added some suggestions

vivianyentran · 2024-05-22T22:50:37Z

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+
+2. `feedbackAsyncIntegration`
+
+    This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.


+1 I think it'd be helpful to explain a bit more

vivianyentran · 2024-05-22T22:56:28Z

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+The `feedbackIntegration` is special among our integrations because it is a user-facing integration. Therefore, we have two strategies available to help you control bundle size. What strategies are available depend on how you have installed the SDK into your application.
+
+<Note>
+In every case, we recommend using `feedbackIntegration` in your `Sentry.init` call.
+</Note>


Suggested change

The `feedbackIntegration` is special among our integrations because it is a user-facing integration. Therefore, we have two strategies available to help you control bundle size. What strategies are available depend on how you have installed the SDK into your application.

<Note>

In every case, we recommend using `feedbackIntegration` in your `Sentry.init` call.

</Note>

Because the `feedbackIntegration` is a user-facing integration, we offer two loading strategies that have implications on bundle size.

<Note>

In every case, we recommend using `feedbackIntegration` in your `Sentry.init` call.

</Note>

All of the code examples on this page use `feedbackIntegration` as a default because it is available whether you have chosen the CDN or NPM installation method. However, the implementation of `feedbackIntegration` is different depending on the installation method. For NPM users `feedbackIntegration` is an alias of `feedbackSyncIntegration`. For CDN users, `feedbackIntegration` is an alias of `feedbackAsyncIntegration`.

vivianyentran · 2024-05-22T23:00:05Z

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+1. `feedbackSyncIntegration`
+
+    This integration includes all the code needed to render the "Send Feedback" button, as well as the form that is triggered when the button is clicked. Choosing this loading strategy means accepting the largest bundle size in your application. The benefit of this is that the feedback widget is guaranteed to work when the user interacts with it.
+
+    This loading strategy is not available if you have installed the SDK via the CDN.


Suggested change

1. `feedbackSyncIntegration`

This integration includes all the code needed to render the "Send Feedback" button, as well as the form that is triggered when the button is clicked. Choosing this loading strategy means accepting the largest bundle size in your application. The benefit of this is that the feedback widget is guaranteed to work when the user interacts with it.

This loading strategy is not available if you have installed the SDK via the CDN.

#### `feedbackSyncIntegration`

If you have installed the SDK with NPM, this loading strategy is used by default. This strategy is not available if you have installed the SDK via the CDN.

This integration includes all the code needed to render the "Send Feedback" button, as well as the form that is triggered when the button is clicked. Choosing this loading strategy means accepting the largest bundle size in your application. The benefit of this is that the feedback widget is guaranteed to work when the user interacts with it.

I don't think numbering these makes sense since it's not ordered so let's just make it a smaller heading. I'd also put at the top who this strategy is for.

vivianyentran · 2024-05-22T23:02:31Z

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+2. `feedbackAsyncIntegration`
+
+    This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.


Suggested change

2. `feedbackAsyncIntegration`

This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.

#### `feedbackAsyncIntegration`

If you installed the SDK with the CDN, this loading strategy is used by default. If you used NPM, you can still choose to use this loading strategy by adding this integration to your `Sentry.init` call.

This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button, the integration will asynchronously load internal integrations that show the form and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asynchronous loading can fail when the user interacts with the button.

vivianyentran · 2024-05-22T23:03:08Z

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+
+    This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.
+
+All of the code examples on this page use `feedbackIntegration` as a default because it is available whether you have chosen the CDN or NPM installation method. However the implementation of `feedbackIntegration` is different depending on the installation method. For CDN users `feedbackIntegration` is an alias of `feedbackAsyncIntegration`, while for NPM users `feedbackIntegration` is an alias of `feedbackSyncIntegration`.


Suggested change

All of the code examples on this page use `feedbackIntegration` as a default because it is available whether you have chosen the CDN or NPM installation method. However the implementation of `feedbackIntegration` is different depending on the installation method. For CDN users `feedbackIntegration` is an alias of `feedbackAsyncIntegration`, while for NPM users `feedbackIntegration` is an alias of `feedbackSyncIntegration`.

Would move this info up to the top since it's useful to know what the default behavior is before learning more about the strategies.

codecov · 2024-05-28T17:45:32Z

Bundle Report

Changes will decrease total bundle size by 6 bytes ⬇️

Bundle name	Size	Change
sentry-docs-server	7.42MB	3 bytes ⬇️
sentry-docs-edge-server	461.49kB	3 bytes ⬇️
sentry-docs-client	6.18MB	0 bytes

billyvg · 2024-05-28T19:09:20Z

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

+
+If you have installed the SDK with NPM, this loading strategy is used by default. This strategy is not available if you have installed the SDK via the CDN.
+
+This integration includes all the code needed to render the "Send Feedback" button, as well as the form that is triggered when the button is clicked. Choosing this loading strategy means accepting the largest bundle size in your application. The benefit of this is that the feedback widget is guaranteed to work when the user interacts with it.


The benefit of this is that the feedback widget is guaranteed to work when the user interacts with it.

We might want to rephrase this, it won't "work" in terms of sending the feedback if the user has adblock.

Changed to:

The benefit of this is that the feedback widget is guaranteed to open when the user interacts with it, but in either case network connectivity is required to send the feedback message.

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

Co-authored-by: Francesco Novy <francesco.novy@sentry.io>

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

lizokm

Left a few suggestions, otherwise this looks good to me, thanks for adding!

docs/platforms/javascript/common/user-feedback/configuration/index.mdx

…ndex.mdx Co-authored-by: Liza Mock <liza.mock@sentry.io>

Co-authored-by: Liza Mock <liza.mock@sentry.io>

#10108) * docs(feedback): Add notes about async loading * review notes * tweak copy * Apply suggestions from code review Co-authored-by: Francesco Novy <francesco.novy@sentry.io> * Update docs/platforms/javascript/common/user-feedback/configuration/index.mdx Co-authored-by: Liza Mock <liza.mock@sentry.io> * Apply suggestions from code review Co-authored-by: Liza Mock <liza.mock@sentry.io> --------- Co-authored-by: Francesco Novy <francesco.novy@sentry.io> Co-authored-by: Liza Mock <liza.mock@sentry.io>

docs(feedback): Add notes about async loading

877ba20

vercel bot deployed to Preview May 22, 2024 16:59 View deployment

ryan953 requested review from a team, mydea and billyvg May 22, 2024 16:59

ryan953 mentioned this pull request May 22, 2024

[User Feedback Onboarding] Add linkout about async getsentry/sentry#70862

Closed

ryan953 requested review from vivianyentran and lizokm May 22, 2024 17:42

billyvg reviewed May 22, 2024

View reviewed changes

vivianyentran approved these changes May 22, 2024

View reviewed changes

review notes

3632fb0

ryan953 force-pushed the ryan953/70862-async-loading branch from dce95e9 to 3632fb0 Compare May 28, 2024 17:38

ryan953 requested review from billyvg and vivianyentran May 28, 2024 17:38

vercel bot deployed to Preview May 28, 2024 17:55 View deployment

billyvg reviewed May 28, 2024

View reviewed changes

tweak copy

01227db

mydea reviewed May 29, 2024

View reviewed changes

docs/platforms/javascript/common/user-feedback/configuration/index.mdx Outdated Show resolved Hide resolved

mydea reviewed May 29, 2024

View reviewed changes

docs/platforms/javascript/common/user-feedback/configuration/index.mdx Outdated Show resolved Hide resolved

mydea reviewed May 29, 2024

View reviewed changes

docs/platforms/javascript/common/user-feedback/configuration/index.mdx Outdated Show resolved Hide resolved

vercel bot deployed to Preview May 29, 2024 15:08 View deployment

Apply suggestions from code review

9445060

Co-authored-by: Francesco Novy <francesco.novy@sentry.io>

vercel bot deployed to Preview May 29, 2024 15:42 View deployment

lizokm reviewed May 29, 2024

View reviewed changes

docs/platforms/javascript/common/user-feedback/configuration/index.mdx Outdated Show resolved Hide resolved

lizokm approved these changes May 29, 2024

View reviewed changes

ryan953 and others added 2 commits May 29, 2024 09:47

Update docs/platforms/javascript/common/user-feedback/configuration/i…

ac96218

…ndex.mdx Co-authored-by: Liza Mock <liza.mock@sentry.io>

Apply suggestions from code review

12ef277

Co-authored-by: Liza Mock <liza.mock@sentry.io>

vercel bot deployed to Preview May 29, 2024 17:05 View deployment

ryan953 merged commit 4e1061b into master May 29, 2024

ryan953 deleted the ryan953/70862-async-loading branch May 29, 2024 17:37

github-actions bot locked and limited conversation to collaborators Jun 14, 2024


		2. `feedbackAsyncIntegration`

		This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.


		This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.

		All of the code examples on this page use `feedbackIntegration` as a default because it is available whether you have chosen the CDN or NPM installation method. However the implementation of `feedbackIntegration` is different depending on the installation method. For CDN users `feedbackIntegration` is an alias of `feedbackAsyncIntegration`, while for NPM users `feedbackIntegration` is an alias of `feedbackSyncIntegration`.

-. `feedbackAsyncIntegration`
-    This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button the integration will asyncronously load inrernal integrations that show the form, and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asyncronous loading can fail when the user interacts with the button.
+#### `feedbackAsyncIntegration`
+If you installed the SDK with the CDN, this loading strategy is used by default. If you used NPM, you can still choose to use this loading strategy by adding this integration to your `Sentry.init` call.
+This integration includes the minimum amount of code needed to show the "Send Feedback" button on the screen when the page is loaded. When the user clicks on that button, the integration will asynchronously load internal integrations that show the form and let the user type out their feedback message. This has the benefit of being the lowest bundle size. The drawback is that asynchronous loading can fail when the user interacts with the button.


		If you have installed the SDK with NPM, this loading strategy is used by default. This strategy is not available if you have installed the SDK via the CDN.

		This integration includes all the code needed to render the "Send Feedback" button, as well as the form that is triggered when the button is clicked. Choosing this loading strategy means accepting the largest bundle size in your application. The benefit of this is that the feedback widget is guaranteed to work when the user interacts with it.

Uh oh!

docs(feedback): Add notes about async loading the Feedback integration #10108

docs(feedback): Add notes about async loading the Feedback integration #10108

Uh oh!

Conversation

ryan953 commented May 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented May 22, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

billyvg left a comment

Choose a reason for hiding this comment

Uh oh!

billyvg May 22, 2024 • edited by vivianyentran Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vivianyentran left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vivianyentran May 22, 2024 • edited by michellewzhang Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

codecov bot commented May 28, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lizokm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ryan953 commented May 22, 2024 •

edited

Loading

vercel bot commented May 22, 2024 •

edited

Loading

billyvg May 22, 2024 •

edited by vivianyentran

Loading

vivianyentran May 22, 2024 •

edited by michellewzhang

Loading

codecov bot commented May 28, 2024 •

edited

Loading