attachments to captureFeedback that are not images

joranbeasley commented 1 month ago

Is there an existing issue for this?

[x] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[x] I have reviewed the documentation https://docs.sentry.io/
[x] I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

8.18.0

Framework Version

No response

Link to Sentry event

https://zentra.sentry.io/feedback/?feedbackSlug=zentra-frontend%3A5633115988&project=4506819749871616&project=4506350319239168&project=4505371415216128&project=4503961652625408&referrer=feedback_list_page&statsPeriod=24h

SDK Setup/Reproduction Example

import {useState} from "react";
import * as Sentry from "@sentry/react";

const mode = "developement"
const cfg = {
    dsn: __YOUR_DSN__,
    integrations: [
        Sentry.browserTracingIntegration({enableInp: true}),
        Sentry.replayIntegration(),
    ],
    tracesSampler: ({
                        attributes,
                        name,
                        parentSampled,
                        transactionContext,
                    }) => {
        if (mode === "developement") {
            return 1.0 // disable traces for developers
        }
        return parentSampled ?? 0.1
    },
    environment: mode,
    replaysSessionSampleRate:
        mode === "development" ? 0.0 : 0.05,

    // If the entire session is not sampled, use the below sample rate to sample
    // sessions when an error occurs.
    replaysOnErrorSampleRate: 1.0,
}
//
Sentry.init(cfg);

async function convertFileToAttachment(file) {
    const buffer = await file.arrayBuffer()
    const data = new Uint8Array(buffer)
    const attachment = {filename: file.name, contentType: file.type.startsWith("image/")?file.type:"application/octet-stream", data}
    console.log("CREATED ATTACHMENT", attachment)
    return attachment
}

async function convertFileListToAttachments(files) {
    return await Promise.all(files.map(convertFileToAttachment))
}

function App() {
    const [files, setFiles] = useState([])

    return (
        <div className="App">
            <input type="file" multiple onChange={e => setFiles([...e.currentTarget.files])}/>
            <button onClick={async () => {
                const attachments = await convertFileListToAttachments(files)
                console.log("SEND FEEDBACK2")
                const res=Sentry.captureFeedback(
                    {
                        message:"Test message with attachments",
                        name:"me",
                        email:"test@test.com"
                    },
                    {
                        attachments
                    }
                )
                console.log("RES:",res)

            }}>Submit
            </button>
        </div>
    );
}

export default App;

Steps to Reproduce

select some files... one image/png and then some others(not images) and and hit submit

Expected Result

potentially

see a feedback with an inline image and some downloadable files
or potentially see a zip that i can download containing all of the files
or see all files as downloadable links

Actual Result

the userfeedback section tries to generate image previews and clicking the "preview" simply still shows as a broken image ... now a tech savvy user can inspect the page and find the attachment/XXXXXXX/download link and recover the file, but this is not user friendly nor intuitive

I have also tried using a captureMessage with attachment context, and that looks a bit better(in terms of getting the attachments downloaded) ... but it lumps all of the feedbacks together and just feels a bit wrong ...

please handle attachments in userFeedback better,,, or can i create a comment on the feedback id somehow and attach the files to that?

or just suggest how I can mitigate this

I would really like to use sentry to capture userfeedback ... we just need attachments to work better

joranbeasley commented 1 month ago

some other things ive tried

Sentry.getContext().addAttachment(fileAttachment) // (same issue)

// and also 
Sentry.getContext().addAttachment(fileAttachment) // (same issue)
Sentry.captureMessage(`BUG-REPORT-${user.email}-${currentDate}`)
Sentry.getContext().clearAttachments()
Sentry.captureFeedback(...)

the second option almost works ... its just kind of gross and im worried it will pollute our issues

s1gr1d commented 1 month ago

Thanks for raising this, I will forward this to the people responsible for the user feedback!

mydea commented 1 month ago

Hello,

an update was shipped to Sentry to handle non-image attachments for feedback! So this should now be handled properly.

getsentry / sentry-javascript