logo

Building a Buggy App

We’re excited to share HasReplay.io, a collection of OSS GitHub issues that are reproducible using Replay. This is part of Replay’s mission to support OSS maintainers and contributors by making it easier to develop, test, and debug software.

Reproducible Bug Reports

The main purpose of HasReplay.io is to feature GitHub issues from OSS projects that include a reproduction with Replay. Replay lets you record a bug once and it’s reproducible forever. These issues are great for outside contributors looking to get involved in open source because the bug has already been reproduced.
We see HasReplay.io as a way for contributors to find issues ready to be debugged, and to demystify the process of debugging open source issues. Projects can use the ‘has-replay’ label on any issues with a Replay, and we’ll automatically parse the Replay URL from the issue description.
Image without caption
You can also encourage contributors to submit replays with bug reports every time — examples:

Real-World Examples

The other benefit of HasReplay.io is seeing real-world examples of bugs that were solved using Replay. In the Closed issues tab, we link to the issue, which often includes the corresponding PR. You can review the relationship between the bug in the replay and the corresponding solution.
Debugging is tricky, and like anything else, requires practice and resources to improve.
In her recent talk about debugging at Reactathon, Jenn Creighton (@gurlcode) said that “The best debugging tool is knowing something well.”
Image without caption
By seeing examples of actual developer bugs, you can learn more about debugging and be exposed to common issues — and how to solve them.

Built-in Bugs

Just for fun, we also added a “buggy mode” to HasReplay.io which introduces bugs into the application itself. Building an intentionally buggy app is tricky — you have to ensure the site will still build, make the bugs realistic to actual developer issues, and create issues that will appear in the UI but have different underlying causes.
We documented the process in the Has Replay Dev Journal. You can follow along for the next step — adding Playwright tests! You can record the site in Replay and investigate the bugs yourself, or check out this existing replay.
Here’s a video walking through one of the bugs

Supporting OSS

Replay offers free plans for OSS projects and the Replay OSS Guide helps maintainers get up and running. Maintainers can use Replay to:
  • Get reproducible bug reports from users and contributors
  • Upload source maps to Replay to easily debug production replays
  • Record automated tests and generate debuggable replays of failures
  • Document contributor pull requests for faster code reviews
You can also join us in discord to get your questions answered, or if you want to chat with the team about Replay and how it can help your project.
🐞 HasReplay.io is open source! If you’re interested in contributing, check out the GitHub repo to create issues or submit pull requests.
Related posts
We use Replay+OpenHands to automatically fix a client to handle a new data format
This post is the story of how we’re giving AI devs the tools they need to be successful and the incredible results we’re beginning to see as a result. The story starts with fixing failing browser tests, but progresses towards a ge...
We show our prototype integration with OpenHands for reliable AI development
Powered by Notaku