User Feedback Beta Launch: We Want to Hear Your Feedback

[jas-kas]

New and Improved User Feedback - Beta Launch

While Sentry automatically detects errors thrown by your application, such as performance issues and user experience problems like rage clicks, there are other bugs your users may encounter (e.g., broken permission flows, broken links, typos, misleading UX, etc.). To identify and troubleshoot these cases quickly, we revamped our User Feedback product…

The new and improved User Feedback product is now available in beta to all Early Adopters. 🎉 🎉🎉 We would love for you to try it out and hear your feedback. To learn how to install User Feedback and customize the widget to match your application and needs, see here. Thank you all for your early feedback on our GitHub discussion a few months ago.

How it Works

The latest changes to User Feedback include an out-of-the-box web widget you can add on your application to collect user feedback at any time. This widget is compatible with all web platforms. If you’d like to use your own widget, see the instructions here.

Example of how the widget could look on your site.

When an end-user submits a feedback, we will then link that to available rich debugging context, including replays, errors, and tags such as URL, so you can get to the root of the problem faster. Check out this quick video demo for a walk-thru.

Example User Feedback Details page with Session Replay.

If you’ve set up Session Replay, you’ll be able to save more time and quickly understand the context of the user problem because you’ll be able to see exactly what they experienced before submitting their feedback. Note that Session Replay is not required to use this product.

Here are some functionalities you’ll see as part of the beta User Feedback product:

• End-users can submit feedback at any time via our web widget
• Sentry users see associated debugging context to the feedback so they can resolve the reported problem quickly
• Resolve and assign individual feedbacks
• Alerting for every time you receive a new feedback
• See who on your team has viewed individual feedbacks
• See which feedbacks you have read or not read yet at a glance

We Want to Hear Your Feedback

If you have any questions or concerns, please let us know. Once you’ve tried our new and improved User Feedback product, please share your feedback below. 👇

Note: If you are currently using our existing User Feedback product where we attach written user messages to Sentry issues, rest assured that this functionality will not be going away. New incoming submissions from this modal will live in the new UI we built for User Feedback shown above.

[kyranjamie]

Is there a webhook, or way to create a Slack integration for inbound feedback? I couldn't see in docs.

One of the most valuable aspects of feedback buttons like this is surfacing said feedback to developers and designers, revealing loads of quick-win suggestions to improve a product. If it's only visible in Sentry's web app it'll be largely forgotten.

Border radius could be a configurable property too. It's hardcoded 20px atm.

[billyvg]

You can create alerts: https://docs.sentry.io/product/user-feedback/#getting-user-feedback-alerts

[jas-kas]

^ Yup, and get the feedback submissions straight to your Slack channels!

[kyranjamie]

Ah, perfect 👌🏼

[yxplus1116]

The current version of the JavaScript SDK I'm using is 7.86.0. After configuring the feedback feature, I encountered an error message saying, "You are using new Feedback() even though this bundle does not include Feedback."

[billyvg]

@yxplus1116 can you create a ticket on https://github.com/getsentry/sentry-javascript/issues/new/choose? Please include your Sentry.init() code

[amaimasque]

Have you resolved this issue?

[bruno-garcia]

@amaimasque We never received the issue with details. Could you please create a ticket explaining your set up? SDK version, your Sentry.init call, etc?

[walter-greefkes]

Environment:

• Sentry Version: @sentry/nextjs v7.88.0
• Sentry Internal Feedback Version: @sentry-internal/feedback v7.89.0
• Next.js Version: v14.0.3

Description:
I am attempting to implement a custom user feedback widget using @sentry-internal/feedback v7.89.0, as per the documentation available at npm package documentation. However, I am encountering issues with the sendFeedback method.

Steps to Reproduce:

1. Initialize the Feedback integration as follows:

   const feedback = getCurrentHub().getClient<BrowserClient>()?.getIntegration(Feedback);

2. Attempt to send feedback using the sendFeedback method:

   feedback.sendFeedback(data);

   Here, the feedback object does not seem to have a sendFeedback property.

3. When I import sendFeedback directly from the @sentry-internal/feedback module, the feedback submission doesn't appear in the Sentry dashboard:

   import { sendFeedback } from '@sentry-internal/feedback';
   
   sendFeedback(data);

Observations:

• The default custom widget provided by Sentry works correctly, suggesting that the basic setup is correct.
• The issue seems specific to the sendFeedback method when trying to use a custom layout.

Questions:

• Is there a known issue with the sendFeedback method in this version?
• Are there additional steps or configurations required for using sendFeedback with a custom layout?

Any suggestions or insights into this issue would be greatly appreciated.

[billyvg]

Calling feedback.sendFeedback is a bug on our end, we will fix this. The exported sendFeedback should work though, do you see any outbound network requests when you call it? What does your data object look like?

[walter-greefkes]

Hello Billyvg,

Thank you for your prompt response.

Since my last message, I have upgraded to the latest SDK version. However, I am still encountering issues with feedback not appearing in Sentry.

I am using the following code snippet to send feedback:

sendFeedback({
    message: data.message,
    email: data.email,
    name: data.name,
}, {
    includeReplay: true,
});

The POST request header appears to be correct:

Request Method: POST
Status Code: 200 OK

The request payload also seems to be in order, with no apparent errors. Despite this, my Sentry User Feedback inbox is empty.

sentry_version: 7
sentry_client: sentry.javascript.nextjs%2F7.102.1
{
    "event_id": "52216f932780428fb58f6b4e6c71dcab",
    "sent_at": "2024-02-29T10:49:00.750Z",
    "sdk": {
        "name": "sentry.javascript.nextjs",
        "version": "7.102.1"
    }
}
{
    "type": "feedback"
}
{
    "contexts": {
        "feedback": {
            "contact_email": "john@example.com",
            "name": "John Zorn",
            "message": "A test message",
            "url": "https:// ... dev/companies",
            "source": "api"
        }
    },
    "type": "feedback",
    "request": {
        "url": "https:// ... dev/companies",
        "headers": {
            "Referer": "https:// ... dev/companies",
            "User-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36"
        }
    },
    "event_id": "52216f932780428fb58f6b4e6c71dcab",
    "timestamp": 1709203740.735,
    "environment": "production",
    "release": "7a6666053db8535260459b8806f8f859a221d8ce",
    "sdk": {
        "integrations": [
            "InboundFilters",
            "FunctionToString",
            "TryCatch",
            "Breadcrumbs",
            "GlobalHandlers",
            "LinkedErrors",
            "Dedupe",
            "HttpContext",
            "RewriteFrames",
            "BrowserTracing"
        ],
        "name": "sentry.javascript.nextjs",
        "version": "7.102.1",
        "packages": [
            {
                "name": "npm:@sentry/nextjs",
                "version": "7.102.1"
            },
            {
                "name": "npm:@sentry/react",
                "version": "7.102.1"
            }
        ]
    },
    "tags": {
        "runtime": "browser"
    },
    "level": "info",
    "platform": "javascript"
}
```

[billyvg]

@walter-greefkes Can you email me your org slug? billy at sentry.io

[ds-clearago]

Is a locale setting coming to the configuration options of the widget?
We can use https://www.i18next.com/ for internationalization (i18n), localization (l10n) and translation for now, but obviously it would be easier if standard labels for various languages would already be there out of the box

⚠️ Furthermore, it seems that the (required) from Description (required) isn't exposed and therefore not translatable atm...

de-DE for https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#text-customization could be:

key	description	default (ENGLISH)	new English	GERMAN
buttonLabel	The label of the injected button.	Report a Bug		Fehler melden
submitButtonLabel	The label of the submit button used in the feedback form.	Send Bug Report		Fehlermeldung absenden
cancelButtonLabel	The label of the cancel button used in the feedback form.	Cancel		Abbrechen
formTitle	The title at the top of the feedback form.	Report a Bug		Fehler melden
nameLabel	The label of the name input field.	Name		Name
namePlaceholder	The placeholder for the name input field.	Your Name		Ihr Name
emailLabel	The label of the email input field.	Email		E-Mail
emailPlaceholder	The placeholder for the email input field.	your.email@example.org		ihre.email-adresse@beispiel.de
messageLabel	The label for the feedback description input field.	Description		Beschreibung
messagePlaceholder	The placeholder for the feedback description input field.	What's the bug? What did you expect?	What's the bug? What did you expect? What steps led to it?	Was haben Sie erwartet und was ist stattdessen passiert? Was führte dazu?
successMessageText	The message to be displayed after a succesful feedback submission.	Thank you for your report!		Vielen Dank für Ihre Fehlermeldung. Unsere Entwickler kümmern sich alsbald darum.
⚠️ requiredLabel	The string appended to input labels of required fields.	(required)		(Pflichtfeld)

---

In https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#crash-report-modal
does lang [automatic] – override for Sentry’s language code already handle this?
Otherwise de-DE could be:

Param	Default	DE
⚠️ lang	[automatic] – override for Sentry’s language code
title	It looks like we’re having issues.	Es sieht aus als hätten wir Probleme.
subtitle	Our team has been notified.	Unser Team wurde benachrichtigt.
subtitle2	If you’d like to help, tell us what happened below. – not visible on small screen resolutions	Wenn Sie helfen wollen, beschreiben Sie unten was passiert ist.
labelName	Name	Name
labelEmail	Email	E-Mail
labelComments	What happened?	Was ist passiert?
labelClose	Close	Schließen
labelSubmit	Submit	Absenden
errorGeneric	An unknown error occurred while submitting your report. Please try again.	Ein unbekannter Fehler ist während dem Absenden Ihres Fehlerberichts aufgetreten. Versuchen Sie es noch einmal.
errorFormEntry	Some fields were invalid. Please correct the errors and try again.	Einige Felder sind ungültig. Bitte korrigieren Sie die Fehler und versuchen Sie es noch einmal.
successMessage	Your feedback has been sent. Thank you!	Ihr Feedback wurde abgesendet. Vielen Dank!

[billyvg]

We have not talked about localization yet, can you copy this into a new ticket here, thanks!

[ds-clearago]

getsentry/sentry-javascript#10209 added as a Feature Request – hope that's the right issue type...

[kyranjamie]

Suggestion

Add ability to export feedback as CSV/other formats.

[dragonfly-net]

how to ignore some errors? (always set it in 'dropped' and skip quote use)
for frontend we can't filter events... as i understand, archive-always use quote
(in *-0n.sentry.io)

[bruno-garcia]

You can filter events client side through beforeSend. More details about filtering on the docs: https://docs.sentry.io/platforms/javascript/configuration/filtering/

If you can't filter it client-side for some reason, take a look at inbound filters: https://docs.sentry.io/product/data-management-settings/filtering/

[roopakv]

Is there a way to exclude the feedback on certain URLs without us having to manually do it? i.e. right now it shows up on logged out pages too, and I'd love to have a list of URLs it doesnt show up on.

For context we are using nextjs.

This could also be something we missed reading in the config.

[billyvg]

There isn't a configuration option for this, you will have to manually do it. At sentry we have a component + hook for the widget and place it on the views where we want it:

component & hook

[roopakv]

Thank you! Something like this is what we went with, however, I think this is a common enough case where having an option for it would be helpful :)

[orbiteleven]

Is there a way to add custom data to a feedback form submission? I don't see one.

We would like to add some context to the submissions to better handle the feedback.

[jas-kas]

Out of curiosity, what is the type of context you're looking to collect and how will it help you better handle the feedback?

[orbiteleven]

Our users will be on a specific page, which we can get from the sent URL, but there are other "ephemeral state" things that might be causing them to submit said feedback (in our case a Svelte store, but could be a snapshot or selector data from Redux, etc.) A simple tag would probably not be sufficient.

[jas-kas]

@orbiteleven Are you using our Session Replay product? Those are tied to feedback submissions and we offer a Redux plugin for breadcrumbs: https://docs.sentry.io/platforms/javascript/guides/react/features/redux/

[orbiteleven]

Hey @jas-kas. Sorry for the radio silence.

We're not actually using React/Redux but rather Svelte/SvelteKit, so this won't work for us. I would imagine it could be something like event context, but it does not seem like UserFeedback has the same capabilities.

[jas-kas]

@orbiteleven

We have a GitHub ticket to track that request: getsentry/sentry-javascript#10916

Our custom breadcrumbs can help fulfill this today as well: https://docs.sentry.io/platforms/javascript/enriching-events/breadcrumbs/#customize-breadcrumbs

[orbiteleven]

Is there some way that a user can see their submissions to check for status, responses, etc.?

[jas-kas]

@orbiteleven

Thanks for getting back to me!

Some sort of "your submitted issues" page with these would be better.

So you're often receiving multiple feedbacks from the same user? Hence, why you'd like a report where we can show 'all submitted issues' for a particular person?

At the risk of asking for some sort of Zendesk/Hubspot clone, it'd be something along those lines. We're currently planning on triaging them as quickly as possible and adding them to a shared Linear board with guest users, but there's still a gap for the user where they've submitted but don't get anything back.

So if I understand correctly you have a way for users to see the status of their submission via Linear? For the gap where the user "submitted but don't get anything back", we're likely not going to do any automatic comms to the end-user as soon as we receive a new feedback. This is because not all feedbacks end up being actioned, so we don't want to set that expectation with the user. However, we're looking at having an option in the UI to trigger an email to the end-user when a Sentry user has decided to action on a feedback. Would that be helpful for your workflow?

[orbiteleven]

hey @jas-kas

Short answer: yes, having some sort of "notify end user of action" would help.

I totally understand that you don't want to over-implement here, so perhaps there's some way for us to handle the end-user confirmation? I guess we could do something with onSubmitSuccess, but combined with my question above about custom data, this could just as quickly become us recreating Zendek/Hubspot on our side, at which point it would just make sense to use one of those tools.

[jas-kas]

@orbiteleven

Right, Sentry's main differentiator for our User Feedback Widget is providing debugging context (errors, replays, tags, etc) as it relates to a feedback submission, reducing the back and forth required with the end-user -- this is something Zendesk/Hubspot cannot provide out-of-the-box. However, if you'd like sophistication customer communication workflows, it might make sense to auto-create a Zendesk/Hubspot ticket for every Sentry feedback submission. Or, alternatively, connect Sentry data to users who submit tickets via Zendesk/Hubspot in other ways (for example, search by user email and time range on our Replay page to find a relevant replay video).

I will check with the team on the custom data case that you described above and see if there are other options there. :)

[jas-kas]

@orbiteleven FYI this may be helpful - https://docs.sentry.io/platforms/javascript/session-replay/understanding-sessions/#connect-replays-with-support-software

[orbiteleven]

Thanks again, @jas-kas. If we do end up rolling our own Zendesk/Sentry/whatever hybrid, something like that could be useful.