replayio / replayable

Replayable.dev

Replayable is a collection of Github Issues that include replays.

Replayable is great for finding OSS issues to contribute to. When an issue has a replay, you have everything you need to get started debugging.

Replayable is also great for finding real world issues. If you’re stuck on a React Hooks bug, odds are there is a similar issue that has already been solved.

• Closed Issues are great examples of how replays were used to solve real-world bugs.
• Open Issues are great for diving into replays and debugging yourself.

The site also has a “buggy” mode that can be enabled by clicking the ✅  icon in the lower right corner. Record the site or use the replay here to practice debugging these issues!

No installation is required to view replays.

Replay.io

Replay lets you record a browser session to produce a shareable replay for collaborative debugging. The replay isn’t just a video — everything from the browser is recorded so you can inspect everything including HTML elements, JavaScript execution, network requests, user events, and even the state of your React components at each and every moment in time.

Replay is free for individuals and OSS projects. Check out:

• replay.io/get-started
• replay.io/oss
• replay.io/examples

Contributing

This is a Next.js app deployed to Vercel. We welcome contributions. Join us at replay.io/discord to chat with the team and ask questions!

To develop locally, first you'll need a GitHub access token with repo scopes. Then, you'll need to copy .env.tpl into .env and fill in the values.

Once this is done, run:

• npm install to install dependencies, and then
• npm run dev to start the development server.

The app will run on http://localhost:3000.

Automated Testing

This projected uses @replayio/cypress and replayio/action-cypress to record and upload replays of Cypress tests.

Read more about recording tests in your own project in the Replay documentation here.

Recording in CI

Tests will run automatically on each deployment (including those for pull requests) using action-cypress](https://github.com/replayio/action-cypress). The workflow file is cypress.yml.

The workflow can also be dispatched manually to select different browsers.

Recording locally

To record Cypress tests locally, start the app with npm run start, then run:

npm run cypress:record

Use the replayio/replay CLI to upload and view replays recorded locally. Documentation here.

replayable's Issues

Fetch # of closed issues

It should be possible to fetch the number of closed issues without fetching all the resulting data

search across repos

Setup some gotbugs inception

Not sure why it took me so long to realize this, but we should be documenting the issues we see in Github so that we can show these open / closed issues in gotbugs :)

https://app.replay.io/recording/got-bugs--68a71ba2-f3b8-4724-86cb-53471f4fca79

Find issues that have replays, but aren't labeled

I bet other projects are using Replay, but don't know about the label. Let's surface these too, perhaps behind a different query

Buggy replay link in readme is invalid

The replay is old and needs to be recreated:

• Create a new replay with buggy mode enabled
• Add [email protected] as a collaborator
• Update the readme to point to the new replay

add description

Add description explaining the project and encouraging the use of has-replay label for bug reports. Link to replay.io/oss and bug reports blog post.

Capture replay links from comments

We do a search if app.replay.io/recording exists in the issue, but only capture if it is included in the description. We could also pull in comments to capture replays posted there so all rows have a link.

Add a filters dropdown using headless/ui

Cursor should change to pointer when hovering on "View Open/Closed"

https://app.replay.io/recording/filter-styling--1d8d37c9-7f54-40ef-a2cc-20319dde03e7

Clicking label clears results

Replay: https://app.replay.io/recording/got-bugs-clicking-label-clears-results--09bd8c38-0a43-42e9-a7e4-f4df8ac4b0c2

Smooth filtering

Today useSWR clears the cache while we're fetching. we should keep a true cache that only updates when we have new values which will be less jarring

introduce bugs

Add search box

Allow users to augment the search query with text input.

Add loading message when fetching new results

Right now, whenever we are fetching new results, the screen is entirely black. Would be nice to have a loading message so it doesn't look broken.

https://app.replay.io/recording/got-bugs-black-screen-when-fetching--a8c73241-5f2c-4541-aa02-4e3970c317a2

Create input for repo and owner

These are variables in the query, so we could hook up an input field to search by repo and owner.