User Feedback Beta Launch: We Want to Hear Your Feedback #60134
Replies: 19 comments 49 replies
-
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. |
Beta Was this translation helpful? Give feedback.
-
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." |
Beta Was this translation helpful? Give feedback.
-
Environment:
Description: Steps to Reproduce:
Observations:
Questions:
Any suggestions or insights into this issue would be greatly appreciated. |
Beta Was this translation helpful? Give feedback.
-
Is a
In https://docs.sentry.io/platforms/javascript/user-feedback/configuration/#crash-report-modal
|
Beta Was this translation helpful? Give feedback.
-
Suggestion Add ability to export feedback as CSV/other formats. |
Beta Was this translation helpful? Give feedback.
-
how to ignore some errors? (always set it in 'dropped' and skip quote use) |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
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. |
Beta Was this translation helpful? Give feedback.
-
Is there some way that a user can see their submissions to check for status, responses, etc.? |
Beta Was this translation helpful? Give feedback.
-
H @jas-kas Thank you for this nice feature, I was waiting it for a long time. I would know if you have a plan for creating another components for another type of feedback ( Like / Dislike ). Example |
Beta Was this translation helpful? Give feedback.
-
Hi @jas-kas , Thank you for these new improvements, I would suggest a classification for the feedback ( reaction, feature request, issue ) like Microsoft: |
Beta Was this translation helpful? Give feedback.
-
I've been using User Feedback in a simple Flashcard app, and I noticed an issue when it comes to the way the app functions that I don't really know if it's solvable, but thought I would share: Because of the way the issue was, the associated replay didn't even show the dialog portion, so the issue was actually untraceably from the UF. In this instance, it was also not a code error and so there was no way to actually see the issue. |
Beta Was this translation helpful? Give feedback.
-
Where do I find the tags I send? Codeexport function sendFeedback(feedback: Feedback) {
const { name, email, message, reaction, category } = feedback
const eventId = Sentry.lastEventId()
const userFeedback = {
name,
email,
message,
associatedEventId: eventId,
captureContext: {
tags: [{ key: reaction }, { key: category }],
},
}
Sentry.captureFeedback(userFeedback)
// Sentry.setTag("user_reaction", reaction)
// Sentry.setTag("feedback_category", category)
} I recieved the feedback , however I want to see where I can find the tags ( reaction = happy , categroy = compliment ) but I did not find them : I use both of : captureContext: {
tags: [{ key: reaction }, { key: category }],
}, and Sentry.setTag("user_reaction", reaction)
Sentry.setTag("feedback_category", category) But I could not find the tags. |
Beta Was this translation helpful? Give feedback.
-
Hi, i am sending feedback via API - it worked earlier but after few months of not receiving any feedbacks i tried it myself and i found out despite 200 response, the feedbacks are not displayed in the cloud sentry.io.
Response 200 ok:
Could anyone say what is wrong? I have checked as well the official Sentry postman collection again and it seems okay. Even after sending GET for feedbacks, they are not returned:
|
Beta Was this translation helpful? Give feedback.
-
It would be great if you could export user feedback. I've tried using Discover but it's appears to be using issuePlatform and doesn't show all the feedback shown in the feedback portal. |
Beta Was this translation helpful? Give feedback.
-
Id like to merge it other feedback sources (App Store, play store) so I can
have a unified feedback dataset. Which I’ll then use to analyze common
trends by using things like sentiment analysis.
Daniel
…On Wed, Sep 11, 2024 at 2:35 PM Jasmin ***@***.***> wrote:
Hey @djnugent <https://github.com/djnugent> -- thanks for sharing your
feedback. What is your motivation/use-cade for exporting user feedback?
—
Reply to this email directly, view it on GitHub
<#60134 (reply in thread)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ABTLXO43XYIM7WYVEGFJUD3ZWCLO3AVCNFSM6AAAAAA7OZ5SKOVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANRRHA2DCNQ>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
Beta Was this translation helpful? Give feedback.
-
Beta Was this translation helpful? Give feedback.
-
The user feedback stops accepting the attachmentsI implemented a feature to let the users send a feedback a months, it was working and we where receiving screenshots ( images ). Today, while I was another feature that sends a specific feedback , I could not find the screenshots I send. When I checked the first feature and the feedback , I found that it stops sending the screenshots a while ago. This is the code: "use client"
import { useUser } from "@clerk/nextjs"
import { zodResolver } from "@hookform/resolvers/zod"
import * as Sentry from "@sentry/nextjs"
import { Bug, ImagePlus, Loader2 } from "lucide-react"
import { SyntheticEvent, useRef, useState } from "react"
import { useForm } from "react-hook-form"
import * as z from "zod"
import { Button } from "./ui/button"
import { Card, CardContent, CardDescription } from "./ui/card"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "./ui/form"
import { Input } from "./ui/input"
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "./ui/sheet"
import { Textarea } from "./ui/textarea"
import { useToast } from "./ui/use-toast"
const propertyFeedbackSchema = z.object({
propertyName: z.string().min(1, { message: "Eigenschaftsname ist erforderlich" }),
currentValue: z.string().min(1, { message: "Aktueller Wert ist erforderlich" }),
suggestedValue: z.string().min(1, { message: "Vorgeschlagener Wert ist erforderlich" }),
description: z.string().optional(),
screenshot: z.instanceof(Uint8Array).optional(),
})
type PropertyFeedback = z.infer<typeof propertyFeedbackSchema>
export const BuildingDataFeedback = () => {
const { user } = useUser()
const { toast } = useToast()
const [sidebarOpen, setSidebarOpen] = useState(false)
const [isSubmitting, setIsSubmitting] = useState(false)
const screenshotInputRef = useRef<HTMLInputElement | null>(null)
const form = useForm<PropertyFeedback>({
resolver: zodResolver(propertyFeedbackSchema),
defaultValues: {
propertyName: "",
currentValue: "",
description: "",
suggestedValue: "",
},
})
const [previewUrl, setPreviewUrl] = useState<string | null>(null)
const handleFileChange = (event: SyntheticEvent<HTMLInputElement>, onChange: (value: Uint8Array) => void) => {
const { files } = event.currentTarget
if (files && files.length > 0) {
const reader = new FileReader()
reader.onloadend = async () => {
const buffer = await files[0].arrayBuffer()
const data = new Uint8Array(buffer)
if (data) {
onChange(data)
}
}
reader.readAsDataURL(files[0])
}
}
const sendFeedback = (feedback: PropertyFeedback) => {
if (user) {
const { fullName, emailAddresses } = user
const { propertyName, currentValue, suggestedValue, description, screenshot } = feedback
const eventId = Sentry.captureMessage("User Feedback")
if (fullName) {
const userFeedback = {
name: fullName,
email: emailAddresses[0].emailAddress,
message: `Eigenschaft: ${propertyName}\nAktueller Wert: ${currentValue}\nVorgeschlagener Wert: ${suggestedValue}\nBeschreibung: ${description}`,
associatedEventId: eventId,
}
if (screenshot) {
Sentry.getCurrentScope().addAttachment({
filename: `${propertyName}-screenshot.png`,
data: screenshot,
})
}
Sentry.captureFeedback(userFeedback)
Sentry.getCurrentScope().clearAttachments()
}
}
}
const handleUploadScreenshot = () => {
screenshotInputRef.current?.click()
}
const handleSubmit = async (formData: PropertyFeedback) => {
const data = formData
setIsSubmitting(true)
try {
sendFeedback(data)
setSidebarOpen(false)
form.reset()
// Clean up the preview URL
if (previewUrl) {
URL.revokeObjectURL(previewUrl)
setPreviewUrl(null)
}
toast({
title: "Feedback gesendet",
description: "Vielen Dank für Ihren Beitrag zur Verbesserung der Gebäudedaten.",
})
} catch (error) {
toast({
title: "Fehler beim Senden",
description: "Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.",
})
// eslint-disable-next-line no-console
console.error("Error sending feedback:", error)
} finally {
setIsSubmitting(false)
}
}
return (
<Sheet
open={sidebarOpen}
onOpenChange={(open) => {
setSidebarOpen(open)
if (!open) {
form.reset()
}
}}
>
<SheetTrigger className='flex sticky bottom-6 justify-end'>
<Button className='rounded-full h-12 bg-red-500 hover:bg-red-600'>
<Bug size={20} className='mr-2' />
<span>Problem melden</span>
</Button>
</SheetTrigger>
<SheetContent side='right' className='w-96 p-0 sm:max-w-lg overflow-y-auto'>
<div className='p-6'>
<SheetHeader className='mb-6'>
<SheetTitle>Gebäudedaten korrigieren</SheetTitle>
</SheetHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col gap-4' autoComplete='off'>
<FormField
control={form.control}
name='propertyName'
render={({ field }) => (
<FormItem>
<FormLabel htmlFor='propertyName'>Eigenschaftsname</FormLabel>
<FormControl>
<Input id='propertyName' {...field} placeholder='z.B. Gebäudehöhe, Baujahr, usw.' />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='currentValue'
render={({ field }) => (
<FormItem>
<FormLabel htmlFor='currentValue'>Aktueller Wert</FormLabel>
<FormControl>
<Input id='currentValue' {...field} placeholder='Aktuell angezeigter Wert' />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='suggestedValue'
render={({ field }) => (
<FormItem>
<FormLabel htmlFor='suggestedValue'>Vorgeschlagener Wert</FormLabel>
<FormControl>
<Input id='suggestedValue' {...field} placeholder='Korrekter Wert' />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='description'
render={({ field }) => (
<FormItem>
<FormLabel htmlFor='description'>Beschreibung (optional)</FormLabel>
<FormControl>
<Textarea
id='description'
{...field}
placeholder='Beschreiben Sie das Problem oder geben Sie weitere Informationen an'
className='min-h-24 resize-y'
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name='screenshot'
render={({ field }) => (
<FormItem>
<FormLabel>Screenshot (optional)</FormLabel>
<FormControl>
<div>
<Input
ref={screenshotInputRef}
type='file'
accept='image/*'
onChange={(event) => handleFileChange(event, field.onChange)}
hidden
/>
<Card
className='cursor-pointer hover:bg-slate-50 h-80 border-dashed border-2'
onClick={handleUploadScreenshot}
>
<CardContent className='relative flex flex-col justify-center text-center items-center p-4 mb-0 h-full'>
{field.value && field.value.length > 0 ? (
<div className='flex flex-col items-center gap-2 w-full'>
<p className='text-sm font-medium'>
{screenshotInputRef.current?.files?.[0]?.name ?? "Keine Datei ausgewählt"}
</p>
{previewUrl && (
<div className='mt-2 border rounded-md overflow-hidden max-h-80'>
<img
src={previewUrl}
alt='Vorschau'
className='object-contain max-w-full max-h-80'
/>
</div>
)}
</div>
) : (
<>
<ImagePlus />
<CardDescription className='text-xs mt-4'>
Laden Sie einen Screenshot des Problems hoch
</CardDescription>
</>
)}
</CardContent>
</Card>
</div>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button
type='submit'
className='absolute bottom-4 right-4 left-4 mt-4 h-11 rounded-full bg-blue-600 hover:bg-blue-700'
disabled={isSubmitting}
>
{isSubmitting ? (
<>
<Loader2 className='mr-2 h-4 w-4 animate-spin' />
Wird gesendet...
</>
) : (
"Korrektur vorschlagen"
)}
</Button>
</form>
</Form>
</div>
</SheetContent>
</Sheet>
)
} when I log the screenshot object , I find that it's not null: Version: "@sentry/nextjs": "^8.27.0", UpdateIs that because we reached the size limit usage: |
Beta Was this translation helpful? Give feedback.
-
Hi @jas-kas , is it possible to send a Markdown template for the message property? |
Beta Was this translation helpful? Give feedback.
-
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:
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.
Beta Was this translation helpful? Give feedback.
All reactions