logo

Building a Buggy App

profile photo
Filip Hric
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
post image
In this failure, we look into a bug where a React component calls Math.round and gets a different value when the test passes and fails!
post image
This week we’re excited to share Elements Panel V3, which brings one second element loads.
post image
Today we’re excited to share an entirely new version of React DevTools which Brian Vaughn wrote from scratch.
Powered by Notaku