React Native Feedback Reporter v0.4.1: Breadcrumbs

I have been working on an open-source project called react-native-feedback-reporter. This package allows developers to add a tool to the react native app that allows testers to report bugs with some very useful information. To find out more, head over to the documentation or watch the introduction demo.

⚡ What’s new?

Today I want to talk about the new feature that collects JSX captures at every tap inside your react native app. This feature is available in versions 0.4.1 and above.

JSX capture is an image of elements that are nested inside the RNFR JSX element.

Highlights:

• 📸 JSX captures will be taken behind the scenes every time user interacts with the app
• 🗃 JSX captures are sorted and zipped up
• ✉️ The zip file is then shared with the user’s choice of integration (JIRA, Slack, Github, etc.)
• 📂 Developers can unzip the zip file to see sorted image files along with where the user tapped to trigger the JSX capture

JSX captures are being taken as the user taps inside the app

🤔 How does it work?

The concept is pretty simple, RNFR will be a wrapper around your topmost JSX element.

Basic Usage

With that setup, RNFR will start taking JSX captures behind the scenes every time the user interacts with the app. Additionally, RNFR will mark the spot where the user tapped to trigger the JSX capture. 🤯

Tapping around in the app to trigger JSX captures

The tester can bring up the RNFR modal by taking a screenshot and share breadcrumbs as a zip file.

Here is what an RNFR package looks like when reported to JIRA.

❓ Common Questions

Isn’t this going to add up space on the user’s device?

This was a major consideration during the architecting phase. Here are a few things I did to tackle the space issue:

• Each JSX capture is a png file which isn’t that large
• All JSX captures and other attachment files are deleted when the app load for the first time. So you always start fresh
• All JSX captures and other attachment files are deleted when the user closes the feedback reporter
• All JSX captures and other attachment files are stored in the tmp folder which is cleared when the user decides to clear the cache

What about privacy, is there is a concern with sensitive data showing up in these JSX captures?

That’s a genuine concern, however, this tool is meant to be used internally between developers and testers which reduces the concern.

The breadcrumbs will not be captured:

• When the keyboard is showing
• When the disableBreadrumbs the prop is set to true

🌎 Some Facts

• It took approximately one month to complete this feature
• Native components such as modals, alerts, etc. are not captured

👋 Conclusion

I hope you enjoy this feature of RNFR and consider contributing or becoming a user.