Attachment Javascript API not working from React Native

I’m using the React Native SDK, which doesn’t currently have support for attachments, but I’m trying to get away with it by using this API directly: Attachments for JavaScript | Sentry Documentation

Basically, Im making a request to:
/api/6009522/events/64b7f96640e34c81857c9a82fa1e8013/attachments/?sentry_key={REDACTED}&sentry_version=7&sentry_client=custom-javascript

And the server is responding with a 201, but the attachment never shows up on the event.
Response:
{“type”:“default”,“status”:201,“ok”:true,“statusText”:"",“headers”:{“map”:{“server”:“nginx”,“x-envoy-upstream-service-time”:“0”,“access-control-expose-headers”:“retry-after, x-sentry-error, x-sentry-rate-limits”,“content-length”:“0”,“strict-transport-security”:“max-age=31536000; includeSubDomains; preload”,“via”:“1.1 google”,“vary”:“Origin”,“date”:“Tue, 30 Nov 2021 00:22:36 GMT”,“alt-svc”:“clear”,“content-type”:“text/plain”}},“bodyUsed”:false,"_bodyInit":{"_data":{“size”:0,“offset”:0,“blobId”:“376EA65B-C4F3-4D93-9FB7-431BFF9DFC3D”,“type”:“text/plain”,“name”:“attachments.txt”,"__collector":{}}},"_bodyBlob":{"_data":{“size”:0,“offset”:0,“blobId”:“376EA65B-C4F3-4D93-9FB7-431BFF9DFC3D”,“type”:“text/plain”,“name”:“attachments.txt”,"__collector":{}}}}

I have no idea how to debug this, the project stats don’t show any stats for attachments (dropping filter or accepting). I’ve literally copy-pasted the code on the site and it still doesn’t work. Any help would be appreciated.

As to why it’s not working to fire an attachment directly into the API, I’m not sure.
But the React Native SDK is tracking an issue to add support here: Add Attachment support · Issue #1327 · getsentry/sentry-react-native · GitHub

And we plan to get this in soon.

I figured it out. I don’t think the example code works right (or maybe just doesn’t work out of the box in react-native), but this is the code I had to use to actually get it to work. It would have been nice if the server would return an error when the request attachment form data isn’t right. For the following code, the important part is how the FormData is put together, and its quite different from the example listed on the website.

function sentryAttachmentUrl(dsn: any, eventId: string) {
const { host, path, projectId, port, protocol, user } = dsn
return ${protocol}://${host}${port !== "" ? :${port}: ""}${ path !== "" ?/${path} : "" }/api/${projectId}/events/${eventId}/attachments/?sentry_key=${user}&sentry_version=7&sentry_client=custom-javascript
}

const attachScreenshotToSentryEvent = async (screenshot: Screenshot, eventId: string) => {
try {
const client = Sentry.getCurrentHub().getClient()
if (!client) {
console.error(“Can’t get sentry current hub”)
return
}

const endpoint = sentryAttachmentUrl(client.getDsn(), eventId)

const screenshotData = {
  uri: screenshot.uri,
  type: screenshot.type,
  name: screenshot.name,
}

console.log("Uploading screenshot: ", screenshotData)

const formData = new FormData()
formData.append("feedback-screenshot", screenshotData)

fetch(endpoint, {
  method: "POST",
  body: formData,
})
  .then(() => {
    console.log("Successfully uploaded screenshot to sentry.")
  })
  .catch((ex) => {
    // we have to catch this otherwise it throws an infinite loop in Sentry
    console.error(ex)
  })

} catch (ex) {
console.error(ex)
}
}