How to use Bird Eats Bug to debug your front-end application

Getting started with Bird - the basics

How to get Bird

As a browser extension, you can skip the cumbersome setup of a new tool. Simply visit Bird on the Chrome Store, install the extension, and complete your installation by signing up. You’ll then be ready to create your first session recording.

What is a Bird workspace?

When you sign up for a new Bird account, you’ll automatically have one workspace which stores all of your recorded sessions using Bird. If you’re invited to an account, you’ll have access to multiple workspaces.

Public vs. private sessions

Recorded a bug and want to share it with a client, customer, or anyone outside of your workspace? You can select the session permission to Private (workspace members only) or Public (which can be viewed by anyone outside the workspace).

Customize Bird for effective collaboration

Multiple workspaces

Have several different projects to work on? Multiple workspaces make it easy to move sessions between workspaces and configure integration independently. You can also easily set different permissions for your team members to easily access either request updates or jump right into fixing bugs. We've also made it possible for you to invite a member straight from the bug report itself.

Collections

Collections is a better way to organize your sessions. This is especially useful for people who use Bird beyond just bug reporting. Here’s an example: You can create a collection called Bugs, where you store all your bug reports, and a collection called Demos, which houses explanation videos for your remote team members or even end users. Collections can also be used to group recordings by sprint. You can rename, archive, and delete Collections to further personalize your Bird workspace.

Session features

Bird lets you collaborate and communicate with your team members more efficiently. Below are some customizable elements to help your team get more done in less time.

Custom labels

You can create, edit, and apply your own labels to any session in your workspace. You can also edit existing labels or remove ones you don’t need — all changes are automatically reflected for your whole team. 

Custom default titles

You can select between these pre-defined options:

• Random (e.g., “Yellow Fire Ant”)
• Contents and page title (e.g., #36 Replay at Episode 1: What is the perfect bug report like?)
• Contents and URL path (e.g., #36 Replay at /podcast/episode-1-what-is-the-perfect-bug-report-like)

This new feature improves the session list experience as it hints at what the bug report might be about and provides an easy way to refer to it when talking to others.

@mentions

Tag other team members while commenting on your bug reports, and Bird will automatically notify them to take a closer look.

Rich descriptions + comments

Rich text functionalities are available to our description and comment editors. With this, you can insert links, bold text, and more to describe your bugs with more structure. With comments, you can discuss a bug with your team to get it fixed faster and receive an email notification whenever someone comments on one of your bugs.

Some standout key features

Web SDK - cut down on debugging time

With Bird’s web SDK, you can install Bird to your internal or production apps with a few lines of code and enable anyone to report issues with a few clicks. As a developer, this will save your team time debugging with data and context-rich bug reports.

Replays - never reproduce a bug again

Essentially acts as a dashcam for bugs. You can allow Bird to record a page in the background, and the next time a bug occurs, you can simply re-live the issue and see what caused it, along with all the technical logs to help your development team to debug. 

Dev tools - data-rich reports

Each Bird session comes with all the technical data you’d need to diagnose and debug faster. From console logs, Steps to reproduce, Network requests to Environment details, and even components from popular frameworks such as React and Vue.

E2E templates - convert bug reports into automated tests

This feature enables product teams to easily transfer manual tests and bugs to automated test scripts for various testing frameworks like Cypress, Selenium Puppeteer, and Playwright.

Bird Eats Bug integrations

As a developer, you can easily connect Bird to other apps in your stack, such as:

• GitHub
• JIRA Cloud
• Linear
• Slack
• Trello
• Zapier

Bird is a powerful collaboration tool that can help your team ship quality products faster. We’ve just scratched the surface of what Bird can do, so be sure to check our website for more information and tutorials on how to get the most out of Bird. And if you run into any problems or have suggestions for features you’d like to see in future releases, don’t hesitate to reach out to us on Twitter or our community.