Feedback UI: Use Image Picker libraries from integrations #4524

antonis · 2025-02-11T09:34:54Z

📢 Type of change

Bugfix
New feature
Enhancement
Refactoring

📜 Description

Use expo-image-picker and react-native-image-picker Image Picker libraries passed in integration.

import * as ImagePicker from 'react-native-image-picker'; // or from 'expo-image-picker';

Sentry.init({
  integrations: [
    Sentry.feedbackIntegration({
      imagePicker: ImagePicker,
    }),
  ],
});

Note:

I avoided extending the feedback ui changelog entry for simplicity and I plan to update the doc PR when this implementation is settled.
The integration has been tested with the latest stable libraries:
- react-native-image-picker: 7.2
- expo-image-picker: 16.0

💡 Motivation and Context

See #4302 (comment)

💚 How did you test it?

Manual with React Native and Expo sample apps

📝 Checklist

I added tests to verify changes
No new PII added or SDK only sends newly added PII if sendDefaultPII is enabled
I updated the docs if needed.
I updated the wizard if needed.
All tests passing
No breaking changes

🔮 Next steps

#skip-changelog

…tive-image-picker`

…ration

github-actions · 2025-02-11T09:55:59Z

Android (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	444.89 ms	480.38 ms	35.49 ms
Size	17.75 MiB	20.12 MiB	2.37 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`3e4cdf5`	462.35 ms	474.96 ms	12.61 ms
`6b1624f`	462.78 ms	465.13 ms	2.35 ms
`df05370`	477.62 ms	491.63 ms	14.00 ms
`e5d5735`	452.70 ms	453.04 ms	0.34 ms
`0325426`	477.32 ms	457.43 ms	-19.89 ms
`269c976`	448.08 ms	428.86 ms	-19.22 ms
`2646c98`	429.98 ms	421.63 ms	-8.35 ms
`9402883`	448.53 ms	468.73 ms	20.20 ms
`894ebb0`	497.45 ms	545.04 ms	47.60 ms
`8cb898b`	438.83 ms	420.58 ms	-18.25 ms

App size

Revision	Plain	With Sentry	Diff
`3e4cdf5`	17.75 MiB	20.12 MiB	2.37 MiB
`6b1624f`	17.75 MiB	20.12 MiB	2.37 MiB
`df05370`	17.75 MiB	20.12 MiB	2.37 MiB
`e5d5735`	17.75 MiB	20.12 MiB	2.37 MiB
`0325426`	17.75 MiB	20.12 MiB	2.37 MiB
`269c976`	17.75 MiB	20.12 MiB	2.37 MiB
`2646c98`	17.75 MiB	20.12 MiB	2.37 MiB
`9402883`	17.75 MiB	20.12 MiB	2.37 MiB
`894ebb0`	17.75 MiB	20.12 MiB	2.37 MiB
`8cb898b`	17.75 MiB	20.12 MiB	2.37 MiB

Previous results on branch: antonis/feedback-ui-imagepicker-integration

Startup times

Revision	Plain	With Sentry	Diff
`741efe5`	431.08 ms	446.57 ms	15.48 ms
`7f1934e`	553.33 ms	558.29 ms	4.96 ms
`a6ce163`	430.81 ms	432.06 ms	1.25 ms

App size

Revision	Plain	With Sentry	Diff
`741efe5`	17.75 MiB	20.12 MiB	2.37 MiB
`7f1934e`	17.75 MiB	20.12 MiB	2.37 MiB
`a6ce163`	17.75 MiB	20.12 MiB	2.37 MiB

github-actions · 2025-02-11T10:08:05Z

Android (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	617.00 ms	679.85 ms	62.85 ms
Size	7.15 MiB	8.39 MiB	1.23 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`2646c98`+dirty	415.13 ms	438.41 ms	23.28 ms
`9402883`+dirty	436.49 ms	518.94 ms	82.45 ms
`0325426`+dirty	418.89 ms	485.00 ms	66.11 ms
`894ebb0`+dirty	417.81 ms	499.74 ms	81.93 ms
`8cb898b`+dirty	393.33 ms	416.20 ms	22.87 ms
`3e4cdf5`+dirty	642.13 ms	702.23 ms	60.10 ms
`6b1624f`+dirty	382.17 ms	441.00 ms	58.83 ms
`0459aee`+dirty	424.10 ms	466.63 ms	42.53 ms
`269c976`+dirty	395.13 ms	438.37 ms	43.24 ms
`e5d5735`+dirty	377.37 ms	430.04 ms	52.67 ms

App size

Revision	Plain	With Sentry	Diff
`2646c98`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`9402883`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`0325426`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`894ebb0`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`8cb898b`+dirty	7.15 MiB	8.39 MiB	1.24 MiB
`3e4cdf5`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`6b1624f`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`0459aee`+dirty	7.15 MiB	8.38 MiB	1.23 MiB
`269c976`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`e5d5735`+dirty	7.15 MiB	8.39 MiB	1.23 MiB

Previous results on branch: antonis/feedback-ui-imagepicker-integration

Startup times

Revision	Plain	With Sentry	Diff
`7f1934e`+dirty	388.20 ms	456.96 ms	68.76 ms
`741efe5`+dirty	384.24 ms	432.59 ms	48.35 ms
`a6ce163`+dirty	382.11 ms	424.33 ms	42.23 ms

App size

Revision	Plain	With Sentry	Diff
`7f1934e`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`741efe5`+dirty	7.15 MiB	8.39 MiB	1.23 MiB
`a6ce163`+dirty	7.15 MiB	8.39 MiB	1.23 MiB

github-actions · 2025-02-11T10:17:01Z

iOS (legacy) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1212.67 ms	1222.94 ms	10.27 ms
Size	2.63 MiB	3.71 MiB	1.08 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`df05370`+dirty	1209.92 ms	1216.55 ms	6.63 ms
`0325426`+dirty	1228.88 ms	1229.92 ms	1.04 ms
`e5d5735`+dirty	1222.02 ms	1222.22 ms	0.20 ms
`894ebb0`+dirty	1224.33 ms	1214.45 ms	-9.89 ms
`9402883`+dirty	1219.65 ms	1217.94 ms	-1.72 ms
`3e4cdf5`+dirty	1222.53 ms	1224.42 ms	1.89 ms
`8cb898b`+dirty	1221.40 ms	1231.78 ms	10.37 ms
`6b1624f`+dirty	1224.65 ms	1225.65 ms	1.00 ms
`0459aee`+dirty	1232.82 ms	1231.19 ms	-1.63 ms
`2646c98`+dirty	1218.51 ms	1218.92 ms	0.41 ms

App size

Revision	Plain	With Sentry	Diff
`df05370`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`0325426`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`e5d5735`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`894ebb0`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`9402883`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`3e4cdf5`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`8cb898b`+dirty	2.63 MiB	3.71 MiB	1.08 MiB
`6b1624f`+dirty	2.63 MiB	3.71 MiB	1.07 MiB
`0459aee`+dirty	2.63 MiB	3.69 MiB	1.06 MiB
`2646c98`+dirty	2.63 MiB	3.69 MiB	1.06 MiB

Previous results on branch: antonis/feedback-ui-imagepicker-integration

Startup times

Revision	Plain	With Sentry	Diff
`741efe5`+dirty	1212.52 ms	1226.22 ms	13.70 ms
`a6ce163`+dirty	1210.25 ms	1214.21 ms	3.96 ms
`7f1934e`+dirty	1222.53 ms	1203.98 ms	-18.55 ms

App size

Revision	Plain	With Sentry	Diff
`741efe5`+dirty	2.63 MiB	3.71 MiB	1.08 MiB
`a6ce163`+dirty	2.63 MiB	3.71 MiB	1.08 MiB
`7f1934e`+dirty	2.63 MiB	3.71 MiB	1.08 MiB

github-actions · 2025-02-11T10:25:11Z

iOS (new) Performance metrics 🚀

	Plain	With Sentry	Diff
Startup time	1222.76 ms	1218.62 ms	-4.13 ms
Size	3.19 MiB	4.27 MiB	1.09 MiB

Baseline results on branch: feedback-ui

Startup times

Revision	Plain	With Sentry	Diff
`df05370`+dirty	1221.14 ms	1216.60 ms	-4.55 ms
`0325426`+dirty	1210.17 ms	1216.37 ms	6.20 ms
`e5d5735`+dirty	1217.78 ms	1221.80 ms	4.02 ms
`894ebb0`+dirty	1210.94 ms	1202.08 ms	-8.85 ms
`9402883`+dirty	1217.71 ms	1213.02 ms	-4.69 ms
`3e4cdf5`+dirty	1213.36 ms	1221.31 ms	7.95 ms
`8cb898b`+dirty	1209.39 ms	1207.57 ms	-1.82 ms
`6b1624f`+dirty	1224.12 ms	1220.73 ms	-3.39 ms
`0459aee`+dirty	1233.67 ms	1239.80 ms	6.12 ms
`2646c98`+dirty	1239.94 ms	1246.90 ms	6.96 ms

App size

Revision	Plain	With Sentry	Diff
`df05370`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`0325426`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`e5d5735`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`894ebb0`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`9402883`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`3e4cdf5`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`8cb898b`+dirty	3.19 MiB	4.28 MiB	1.09 MiB
`6b1624f`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`0459aee`+dirty	3.19 MiB	4.26 MiB	1.07 MiB
`2646c98`+dirty	3.19 MiB	4.26 MiB	1.07 MiB

Previous results on branch: antonis/feedback-ui-imagepicker-integration

Startup times

Revision	Plain	With Sentry	Diff
`741efe5`+dirty	1213.69 ms	1223.18 ms	9.49 ms
`a6ce163`+dirty	1219.88 ms	1216.60 ms	-3.28 ms
`7f1934e`+dirty	1224.98 ms	1235.30 ms	10.32 ms

App size

Revision	Plain	With Sentry	Diff
`741efe5`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`a6ce163`+dirty	3.19 MiB	4.27 MiB	1.09 MiB
`7f1934e`+dirty	3.19 MiB	4.27 MiB	1.09 MiB

…ration

krystofwoldrich

I just have one nit about any types.

And one question about testing this in plain RN apps.

Otherwise looks great, super simple and clean API!

krystofwoldrich · 2025-02-12T10:51:46Z

packages/core/src/js/feedback/FeedbackForm.types.ts

+}
+
+interface ExpoImageLibraryOptions {
+  mediaTypes?: any[];


Could this be string[] or 'images'[]?

Good point @krystofwoldrich 👍
I've tried with a string[] but it resulted in a typescript issue since the type was an enumeration.
'images'[] works like a charm :) Thank you for the tip 🙇
Updated with 6666cf6

krystofwoldrich · 2025-02-12T10:52:04Z

packages/core/src/js/feedback/FeedbackForm.types.ts

+}
+
+interface ReactNativeImageLibraryOptions {
+  mediaType: any;


Could this be photo?

Similar to above I resorted to any to have type compatibility with the enum. 'photo' works as expected :)
Updated with d1e5107

krystofwoldrich · 2025-02-12T11:02:55Z

packages/core/src/js/feedback/utils.ts

+export async function getDataFromUri(uri: string): Promise<Uint8Array> {
+  const response = await fetch(uri);
+  const blob = await response.blob();
+
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      if (reader.result instanceof ArrayBuffer) {
+        resolve(new Uint8Array(reader.result));
+      } else {
+        reject(new Error('Failed to read file as UInt8Array'));
+      }
+    };
+    reader.onerror = reject;
+    reader.readAsArrayBuffer(blob);
+  });


This looks super clean and doesn't need native impl, I've not realized we can use that.

Have you tried it in a plain new app? I just want to make sure that all the features are available out of the box, sometimes APIs are available in our samples because a dependency auto-polyfills them.

krystofwoldrich · 2025-02-12T11:10:06Z

I avoided extending the feedback ui changelog entry for simplicity and I plan to update getsentry/sentry-docs#12503 when this implementation is settled.

Make sense, we can update the changelog before the merge and the docs after.

The integration has been tested with the latest stable libraries:
react-native-image-picker: 7.2
expo-image-picker: 16.0

Let's mention this in the changelog and the docs that only react-native-image-picker v7 and expo-image-picker v16 are supported.

antonis added 15 commits January 30, 2025 14:28

Disable bouncing

fe3dc15

Add modal ui appearance

72eef2d

Update snapshot tests

ccc808b

Fix bottom margin

fd47fd2

Merge branch 'feedback-ui' into antonis/feedback-modal-ui

dcc5d3b

Fix sheet height

9ecd8a2

Remove extra modal border

05f94f8

Do not expose modal styles

d88a599

Animate background color

ce1de86

Avoid keyboard in modal

a7a4e56

Merge branch 'feedback-ui' into antonis/feedback-modal-ui

8779886

Merge branch 'feedback-ui' into antonis/feedback-modal-ui

ae80f7d

Merge branch 'feedback-ui' into antonis/feedback-modal-ui

488658e

Use Image Picker interface matching expo-image-picker and `react-na…

c4d502e

…tive-image-picker`

Update samples to pass the ImagePicker library implementation

1b74b45

Base automatically changed from antonis/feedback-modal-ui to feedback-ui February 11, 2025 09:35

antonis changed the title ~~Feedback UI: Use Image Picker libraries from integrations expo-image-picker and react-native-image-picker~~ Feedback UI: Use Image Picker libraries from integrations Feb 11, 2025

Merge branch 'feedback-ui' into antonis/feedback-ui-imagepicker-integ…

1d8a0db

…ration

antonis added 3 commits February 11, 2025 13:41

Get image data from uri

a0f4a77

Add early return and dev note

357dea8

Adds tests

192220b

antonis mentioned this pull request Feb 11, 2025

[EPIC] Feedback Widget for React Native #4302

Open

antonis assigned antonis and unassigned antonis Feb 11, 2025

Adds sample expo plugin configuration

c3991ff

antonis marked this pull request as ready for review February 11, 2025 13:43

antonis requested review from krystofwoldrich and lucas-zimerman as code owners February 11, 2025 13:43

Merge branch 'feedback-ui' into antonis/feedback-ui-imagepicker-integ…

91e96de

…ration

antonis mentioned this pull request Feb 11, 2025

feat: Feedback Widget for React Native #4435

Draft

10 tasks

krystofwoldrich approved these changes Feb 12, 2025

View reviewed changes

antonis added 2 commits February 12, 2025 13:40

Update media type for expo

6666cf6

Update media type for rn

d1e5107

Feedback UI: Use Image Picker libraries from integrations #4524

Are you sure you want to change the base?

Feedback UI: Use Image Picker libraries from integrations #4524

Conversation

antonis commented Feb 11, 2025 • edited Loading

📢 Type of change

📜 Description

💡 Motivation and Context

💚 How did you test it?

📝 Checklist

🔮 Next steps

github-actions bot commented Feb 11, 2025 • edited Loading

Android (legacy) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: antonis/feedback-ui-imagepicker-integration

Startup times

App size

github-actions bot commented Feb 11, 2025 • edited Loading

Android (new) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: antonis/feedback-ui-imagepicker-integration

Startup times

App size

github-actions bot commented Feb 11, 2025 • edited Loading

iOS (legacy) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: antonis/feedback-ui-imagepicker-integration

Startup times

App size

github-actions bot commented Feb 11, 2025 • edited Loading

iOS (new) Performance metrics 🚀

Baseline results on branch: feedback-ui

Startup times

App size

Previous results on branch: antonis/feedback-ui-imagepicker-integration

Startup times

App size

krystofwoldrich left a comment

Choose a reason for hiding this comment

krystofwoldrich Feb 12, 2025

Choose a reason for hiding this comment

antonis Feb 12, 2025

Choose a reason for hiding this comment

krystofwoldrich Feb 12, 2025

Choose a reason for hiding this comment

antonis Feb 12, 2025

Choose a reason for hiding this comment

krystofwoldrich Feb 12, 2025

Choose a reason for hiding this comment

krystofwoldrich commented Feb 12, 2025

antonis commented Feb 11, 2025 •

edited

Loading

github-actions bot commented Feb 11, 2025 •

edited

Loading

github-actions bot commented Feb 11, 2025 •

edited

Loading

github-actions bot commented Feb 11, 2025 •

edited

Loading

github-actions bot commented Feb 11, 2025 •

edited

Loading