(2.4) Feedback form attachments #4338
Conversation
Co-authored-by: Krystof Woldrich <[email protected]>
Co-authored-by: LucasZF <[email protected]>
Co-authored-by: LucasZF <[email protected]>
…959-captureFeedback-attachements
* Adds sentry branding logo as a base64 encoded png --------- Co-authored-by: LucasZF <[email protected]>
…959-captureFeedback-attachements # Conflicts: # packages/core/src/js/feedback/FeedbackForm.tsx # packages/core/src/js/feedback/FeedbackForm.types.ts # packages/core/test/feedback/FeedbackForm.test.tsx
…959-captureFeedback-attachements
…959-captureFeedback-attachements
…ents # Conflicts: # CHANGELOG.md # packages/core/src/js/feedback/FeedbackForm.styles.ts # packages/core/src/js/feedback/FeedbackForm.tsx # packages/core/src/js/feedback/FeedbackForm.types.ts # packages/core/src/js/feedback/defaults.ts # packages/core/src/js/index.ts # packages/core/test/feedback/FeedbackForm.test.tsx # samples/react-native/src/App.tsx # samples/react-native/src/Screens/ErrorsScreen.tsx
| /* eslint-disable no-bitwise */ | ||
| export const base64ToUint8Array = (base64?: string): Uint8Array | undefined => { | ||
| if (!base64) return undefined; | ||
|
|
||
| const cleanedBase64 = base64.replace(/^data:.*;base64,/, ''); // Remove any prefix before the base64 string | ||
| const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/'; | ||
| const bytes: number[] = []; | ||
|
|
||
| let buffer = 0; | ||
| let bits = 0; | ||
|
|
||
| for (const char of cleanedBase64) { | ||
| if (char === '=') break; | ||
|
|
||
| const value = chars.indexOf(char); // Validate each character | ||
| if (value === -1) return undefined; | ||
|
|
||
| buffer = (buffer << 6) | value; // Shift 6 bits to the left and add the value | ||
| bits += 6; | ||
|
|
||
| if (bits >= 8) { | ||
| // Add a byte when we have 8 or more bits | ||
| bits -= 8; | ||
| bytes.push((buffer >> bits) & 0xff); | ||
| } | ||
| } | ||
|
|
||
| return new Uint8Array(bytes); | ||
| }; |
There was a problem hiding this comment.
This is quite resource intensive, we do some of these conversion in the JS already, but it should be avoided as much as possible.
I this case I would leave that up to the users even thought it makes it a bit harder to use the API (depending on how they get the screenshot)
But it enables user to use conversion lib that are implemented in cpp with much better performance.
There was a problem hiding this comment.
I agree that this is indeed resource intensive 😓 @krystofwoldrich. I ended up with this approach mainly because I was only able to successfully upload a Uint8Array with captureFeedback 🤔
I this case I would leave that up to the users even thought it makes it a bit harder to use the API (depending on how they get the screenshot)
I updated the implementation to only allow Uint8Array data and leave this to the user with 0a4b12d
|
The impl looks good, but I would scale the scope down to only allow bytes array for now and remove the conversion. We can extend it later. |
|
@antonis Have you explored the option of taking screenshot of the app and attaching it? |
I haven't explored this option on the SDK side. My assumption was that the developer may choose to implement this. E.g to capture a screenshot with |
Got it. This is nice and flexible, but provides less out of the box value.
Yes, exactly we already have that function, but as you said taking the screenshot of the form is not useful. But especially when combined with the auto inject, since we will be responsible for showing and hiding the form we can, hide the form take the screenshot and then show it again. Note: We might anyway also need to create a base64 representation of the screenshot to be able to show a preview using RN Image tag. Or create a tmp file. |
📢 Type of change
Based on #4328
📜 Description
This PR adds attachment handling in the SDK capture feedback form leaving the image picking to be implemented on the client:
Note that string attachments are converted to UInt8Array before sending to the server.
💡 Motivation and Context
Fixes #4337
💚 How did you test it?
CI, Manual testing (example)
📝 Checklist
sendDefaultPIIis enabled🔮 Next steps
#skip-changelog
As discussed we will use the no props configuration in the changelog.