Contents

    Community

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

    Andrea Hesler

    Senior Marketing Manager, responsible for all things content. When she's not working on organic marketing efforts, she enjoys watching documentaries.

    Published on

    September 6, 2022
    How to use Bird Eats Bug to debug your front-end application

    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

    bird eats bug extension launched

    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

    Dropdown option to switch between workspaces on Bird Eats Bug

    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.

    bird eats bug rich-text comments and mention feature

    @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

    how bird eats bug SDK work

    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.

    Data-rich bug reports loved by everyone.

    Get visual proof, steps to reproduce and technical logs with one click.

    Make bug reporting 50% faster and 100% less painful

    Rating LogosStars
    4.6
    |
    Category leader

    Liked the article? Spread the word

    Put your knowledge to practice

    Try Bird on your next bug - you’ll love it

    Try Bird later, from your desktop

    Bird Call to action parrot
    By clicking “Accept”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. View our Privacy Policy for more information.