Forem: Nina Ricci

How to Trigger React Error Boundary with React Developer Tools

Nina Ricci — Sun, 17 Jul 2022 11:46:16 +0000

What is a React Error Boundary?

According to react.js documentation, Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them. (Read more)

Use case

We want to test how our application handles error states. Using the React Developer Tools, we won't be needing to manually force an error state in our code for each component we want to test. Instead, we can just select a component from the tool and force it to be in an error state.

Prerequisites

React Developer Tools chrome extension
- installation
A working React App with React Error Boundary

Demo

Start your React Application and open it on your Google Chrome web browser. (make sure you already have React Developer Tools chrome extension installed)

Open your Chrome Developer Tools and navigate to Components tab.



shift + CTRL + J (Windows/Linux).
option + ⌘ + J (macOS)

3. Select a component within the Error Boundary in the tree.
  - Notice the (!) icon. Hovering it should show a help dialog **"Force the selected component into an errored state"**

    ![Chrome Developer Tools with an open Components tab](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3rwp4j5skdcb0l4a4n3z.png)
4. Click on the (!) icon
  - This will force your app to be in an errored state
    ![React App in Error state](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k3w269zkl88e4etcf52i.png)

Git Conflicts; Fixing it with Git Rebase

Nina Ricci — Mon, 07 Feb 2022 09:43:48 +0000

Getting past the basic git clone, commit, add, pull and push, I have learned a few good to know git commands over the years because of repeatedly common problems I've faced when doing version control. I'm planning to create a series for this topic in hopes that this can also help you.

Here's a very short story of how a Git conflict can happen and how to fix it with Git rebase.

Git Conflicts

Usually, these problems are faced when the team gets bigger and a lot more devs are contributing to the same project on the same file.

2 devs working on the same file.

This is very common and it's okay, so don't worry! What I usually do is to plan ahead with the other dev so we know both of us are working on this specific same file. To minimize merge conflicts and efficiently fix them, we want to always rebase from develop whenever there are any changes so we always have an updated version of the base branch.

DAY 1 🌞

dev 1 creates and works on feature A

git checkout develop
git branch -b feature/feature-a
# work on file A

dev 2 creates and works on feature B

git checkout develop
git branch -b feature/feature-b
# work on file A

in between the day, dev 2 who was working on feature B asks for a code review and merges their branch to develop. dev 1 who is working on feature A git add and commits all their changes for the day.

DAY 2 🌞
since, dev 2's branch (feature B) was merged to develop and we know that both devs had worked on the same file, dev 1 (feature A) will now rebase from develop branch to have an updated copy on their current feature branch and fix the conflicts.

dev 1, feature A rebases from develop and fixes conflicts

# don't forget to git add and commit your changes first
git checkout develop
git pull origin develop
git checkout feature/feature-a
git rebase develop
# by this time, git will write your commits on top of develop 
# and you will be seeing the conflicted files

go to the conflicted file and if needed, consult with dev 2 and make sure you save the file where both changes are written.

# resolve conflicted file/s
git add path/to/file
git rebase --continue

git rebase interactive should be done after you finish fixing the conflicted file and you are good to go. 👍

Notice that Feature A now is on top of both develop and Feature B that was merged the day before.

Thank you for reading all the way here! I hope you've learned something new and that this can help you on your productivity and collaboration with your team 🤝

How honesty can improve team productivity

Nina Ricci — Thu, 07 May 2020 13:46:28 +0000

How can being honest actually improve your team's productivity? Let me share with you a few scenarios where you may find yourself in and what you can do and why you should do it.

When you are stuck with your code for more than the usual time it will take to fix something.

Be honest and tell your team you're stuck but make sure you've done your part in trying to fix it. With this, you're likely to progress faster if someone helps you. In fact, it's possible that someone from your team has already encountered it and the time you'll invest for like 1-2 hours could be lessened to a single question.

When something broke and you know it was you who broke it

Be honest and volunteer to fix it. You'll probably take lesser time to fix it rather than someone who has little idea of the cause.

When you don't know the answer to a question

Be honest and tell the person you don't know but try to find the answer after. It's better to tell upfront that you don't know rather than assume something and cause a misunderstanding.

If no one has been honest yet, be the first one

Other members can feel comfortable being honest themselves if someone within the team continuously do so. Everyone would feel that they can trust each other. The feeling of not being discriminated of not knowing or of making mistakes can improve the team's communication. Anyone could learn a thing or two just by someone saying "I don't know" or "I'm stuck. Can someone help me?". And without you knowing it, honesty has become one of your team culture.