FSE Program: Seeking volunteers to use Replay.io for capturing bugs

The FSE Outreach Program is always seeking ways to improve the access, ability, and reliability of capturing feedback for the latest and greatest with WordPress. Previously, this has looked like experimenting with “explorations” of early features using prototypes/specific PRs to test or the recent addition of InstaWP to make creating test sites and unique testing situations far easier. In the coming months, another tool, replay.io, will be piloted, and volunteers are needed to help determine how it can be used to better WordPress’ bug finding and fixing feedback loopLoop The Loop is PHP code used by WordPress to display posts. Using The Loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within The Loop tags. Any HTML or PHP code in the Loop will be processed on each post. https://codex.wordpress.org/The_Loop..

Volunteer Requirements

  • Ability to help for the next 3 months whenever a call for testing is started (at least 1 hour per call for testing with calls for testing about every 3-4 weeks). 
  • Time to learn how to use replay.io and use it when going through the calls for testing. 
  • Comfort in using GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/’s GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository and opening issues. 

If you are interested in volunteering, please comment on this post between now and December 28th 2022! If you have questions/comments/concerns, just ask below. Right now, I’m looking for at least 3 folks to participate. 

What is Replay?

Replay is a “time travel debugger” for JS. Replay lets you record a browser session to produce a shareable replay for collaborative debugging. The replay isn’t a video — everything from the browser is recorded so you can inspect anything from HTMLHTML HTML is an acronym for Hyper Text Markup Language. It is a markup language that is used in the development of web pages and websites. elements, JS execution, network requests, user events, and even the state of your ReactReact React is a JavaScript library that makes it easy to reason about, construct, and maintain stateless and stateful user interfaces. https://reactjs.org/. components at any moment in time.

Replay refers to both the Replay Browser (recording) and the Replay App (debugging). One major use case for using this kind of tool in the WordPress project is to reduce time to resolution on bug fixes i.e. writing steps to reproduce & reproducing issues locally.

 Here’s more information:

  • An app for Linux, MacOS, and Windows that is a custom browser that can record all actions and background processes of any website.
  • Using the Replay browser, you can record problems on any website and upload them to the Replay WordPress Team. Once recorded and uploaded, you may add comments to the timeline or simply pass it off to a developer with a link or inside a GitHub issue.
  • Developers can then view the recordings and see exactly what’s happening and when rather than needing to look at screenshots of the console or replicate on their end.

You can learn more in the Replay Documentation

Why Replay? 

@chanthaboune brought Replay to the FSE Outreach Program’s attention as a tool that could help supercharge our bug finding and fixing. Replay’s OSS commitment, including free support, makes it stand out as a possible option to consider. Rather than trying to roll it out on a broader scale, this is an attempt to do so on a small scale first to understand what does and doesn’t work to help determine if it might be a tool the broader WordPress community can use in the future. This will be trialed for the next three months, dependent on volunteer capacity. Feedback will be collected and shared along the way before bigger decisions are made. 

What kind of issues will this help with?

While just about any issue will benefit from the additional information captured by replay.io, there is a sweet spot in issues that are difficult to reproduce and that seem environment dependent. Here’s a recent example with a performance concern ahead of WordPress 6.1 where this would have helped cut down on resolution time.

Who will be able to access the recordings? 

Only those with developer seats can access certain “time travel” features of DevTools e.g. Print Statements of the replay app. Various developer seats will be given as needed based on the issues filed. I (Anne) will handle that since I can monitor the funnel of issues created through the FSE Outreach Program while we explore this.

How long will these recordings last?

As of now, Replay guarantees the recordings will be fully operational for 3 months. However, new features might make recordings lose information such as in the developer tools.

Do I have to download this app to make recordings?

Yes, there is a firehose of information that it’s tracking that include all click interactions and everything happening at all levels of the code, network, etc. There’s no way to do this in regular browsers that isn’t terribly difficult or tedious to the point of being useless.

Do I have to use this browser as my primary?

No, we recommend only using the native application when doing actual recordings.

How long can my recordings be?

As of now, anything more than 2-3 minutes gets difficult to use however they are working on improving this.

Privacy & Security Questions

See here.

#fse-outreach-program, #replay-experiment