Skip to content

replayio/replayable

Repository files navigation

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:

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.