Senior Marketing Manager, responsible for all things content. When she's not working on organic marketing efforts, she enjoys watching documentaries.
September 6, 2022
How do you debug your front-end application? Like most developers, you're probably guessing your way through the events that led to a bug, going over each step while keeping an eye on the network tab or the console. But what if you could have full session replays, see the steps that led to a bug, every click, and every network call, and even share the data across various integrated apps so that your team knows what happened? Bird is a feature-rich bug report tool that allows you to do all of this, and all you have to do is hit the record button. In this blog post, we’ll look at how Bird Eats Bug (or Bird, for short) works and start using it in your projects.
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
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 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.
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.
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.
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:
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.
Data-rich bug reports loved by everyone
Get visual proof, steps to reproduce and technical logs with one click