Forem: David Igheose

How to Catch Errors During Rendering in React

David Igheose — Fri, 12 Aug 2022 13:23:00 +0000

When building a react application errors are bound to happen in our applications, whether they’re server-related errors or edge cases. As such, many methods have been developed to prevent these errors from interfering with the user and developer experience. In React, one such method is the use of error boundaries.

What are Error Boundaries?

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.source: official react js website

To solve this problem for React users, React 16 introduces a new concept of an “error boundary”. There are limits to the built-in error boundary in React 16v but in this case, we can use a package called react-error-boundary, Let's build a small project to explain the concept behind error boundary.

Note: We will be covering a few advanced concepts of React. So having intermediate knowledge of React is advisable.

Let Us Go Through The React Built-in Error boundary.

The built-in error boundary can't catch errors for Event handlers, Asynchronous code, Server-side rendering, and Errors thrown in the error boundary itself.

What are event handlers?
An event handler is a callback routine that operates asynchronously once an event takes place.
What is asynchronous code?
Asynchronous programming is a technique that enables your program to start a potentially long-running task and still be able to be responsive to other events while that task runs, rather than having to wait until that task has finished. Once that task has finished, your program is presented with the result. Source
What is server-side rendering?
Server-side rendering refers to an application’s ability to display the web page on the server rather than rendering it in the browser. When a website’s JavaScript is rendered on the website’s server, a fully rendered page is sent to the client and the client’s JavaScript bundle engages and enables the Single Page Application framework to operate. Source

while Error thrown lets you indicate that something unexpected happened and the normal flow of execution can't continue.

Let's code

Facing errors in your react applications, we can see error logs like this in development.

The user won't be seeing error logs but white screens just like this.

So how can we handle these types of errors in your code by using a method called Error boundaries in react?

The built-in way

Create a file called builtInErrorBoundary.js in your src folder copy and paste this code inside it.

import { Component } from "react";

export class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = {
      hasError: false
    };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    console.log("log errors Info", error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

To catch errors during rendering we just need to wrap this with our main component pages just like this

import React, { useState } from "react";
import { ErrorBoundary } from "./builtInErrorBoundary";
import ProfileCard from "./component/profile";
import "./styles.css";

export default function App() {
  const [ageState, setAgeState] = useState(1);

  const incrementYourAge = () => setAgeState(ageState + 1);

  return (
    <ErrorBoundary>
      <div className="App">
        <div className="container">
           <ProfileCard ageState={"10"} />
          {/* try this to see the Something went wrong screen
          <ProfileCard ageState={{}} /> 
          */}
          <button onClick={incrementYourAge}>
            <h3>Click here to state your age</h3>
          </button>
        </div>
      </div>
    </ErrorBoundary>
  );
}

Check out the live code:

You can check out the below code sandbox for complete code and the file structure may not be the best. Code sandbox link

What the user can see is your custom fallback UI something like this when an error accords, you can make the design better like a 404 page.

The Best Way To Go About Error Boundaries For Your Next Big Project.

I explained that the built-in error boundary can't catch errors for Event handlers, Asynchronous code, Server-side rendering, and Errors thrown in the error boundary itself.

So what can we do about this problem, there are two ways to solve this problem

Building your error boundaries boilerplate for all the solutions you need which will take time
By using an open-source npm package called react-error-boundary which solves all our problems by just installing the package (Thanks to the creators of this package).

This component provides a simple and reusable wrapper that you can use to wrap around your components. Any rendering errors in your components hierarchy can then be gracefully handled.

For Example :

import {ErrorBoundary} from 'react-error-boundary'

function ErrorFallback({error, resetErrorBoundary}) {
  return (
    <div>
      <p>Something went wrong:</p>
      <span>{error.message}</pre>
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

export default function DashboardPage () {
  function errorHandler(error, errorInfo) {
    console.error("log", error, errorInfo);
  }

 return (
 <ErrorBoundary
    FallbackComponent={ErrorFallback}
    onError={errorHandler}>
    onReset={() => {
      // reset the state of your app so the error doesn't happen again
    }}
  >
    <div>
      <h3>Welcome back David</h3>
    </div>
  </ErrorBoundary>
  )
}

What's next?

Now you know the basics of Error Boundaries. You know what it is, and why it can be useful, even how to apply it in your react application. But nothing will convince you more than some hands-on experience. This package makes it easy and faster, how to handle Error Boundaries Learn more here. ✌️

Thank you for reading

Feel free to subscribe to my email newsletter and Connect with me

Getting Started With Babel - Transpiling Javascript

David Igheose — Wed, 10 Aug 2022 14:17:00 +0000

Babel is a generic multi-purpose compiler for JavaScript. Using Babel you can create the next generation of JavaScript, as well as the next generation of JavaScript tooling.

JavaScript as a language is constantly evolving, with new specs and proposals coming out with new features all the time. Using Babel will allow you to use many of these features years before they are available everywhere.

Babel does this by compiling down JavaScript code written with the latest standards into a version that will work everywhere today. This process is known as source-to-source compiling, also known as transpiring. Source: Jamie Kyle

What is Babel?

Babel is a javascript compiler which means javascript to javascript compiling,
babel is divided into different steps :

Input source code
Transformed AST
Generating Original AST
Output source code

this is done by three different packages

@babel/parser
@babel/traverse
@babel/generator, they are all inside babel-core which provides a simple API because using three different packages just to compile your program isn’t idle so we have roughed them in one package making it easy.

Talking about babel-parser

Babel parser is divided into different phases :

Lexical analysis : Transform the input source code into a list of tokens

var age = 10;

/* var age = 7;

during this phase, it reports errors about invalid literal or invites chapters for example if we have a non-traumatic comment or string if there is a chapter that doesn’t make sense, it report’s the errors.

Syntax analysis :
It gets the list of tokens generated during the Lexical analysis and builds the abstract syntax tree.
Semantic analysis :
It checks the AST respects all the static ECMAScript rules called early errors and also it reports errors about invalid variables, using a scope tracker.

Features of Babel

Here are the main things Babel can do for you:

Transform syntax
Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
Source code transformations

Presets

Babel presets can act as a sharable set of Babel plugins and/or config options.
We've assembled a few presets for common environments:

@babel/preset-env for compiling ES2015+ syntax
@babel/preset-typescript for TypeScript
@babel/preset-react for React
@babel/preset-flow for Flow

Configuration files

Babel has two parallel config file formats, which can be used together, or independently.

Project-wide configuration
babel.config.* files, with the following extensions: .json, .js, .cjs, .mj
File-relative configuration
.babelrc.* files, with the following extensions: .json, .js, .cjs, .mjs.
.babelrc file, with no extension.
package.json files, with a "babel" key.

What's next?

Now you know the basics of how babel transpiling Javascript. You know what it is, and why it can be useful. But nothing will convince you more than some hands-on experience. For more understanding, you can check out :

The official babel website : Link here ✌️
Babel User Handbook Written by Jamie Kyle : Link here ✌️

Thank you for reading

Feel free to subscribe to my email newsletter and Connect with me

Understanding the ` This` Keyword in Javascript

David Igheose — Wed, 10 Aug 2022 14:12:00 +0000

What is the `this` keyword?

this keyword references to the object that is executing the current function, it’s a javascript built-in keyword that can be used in different forms for example :

if that function is part of an object, we call the function and method
if that function is a method in an object, the this keyword references that object itself
if that function is a regular function which means it's not part of an object, the this keyword refers to the global object which is the window object
In strict mode, the this keyword is undefined

Source: stackoverflow

Note: this keyword is not a variable, you can't change the value of the this keyword. It is a keyword that refers to an object.

The question is, what is the value of this almost everyone who has ever written javascript has at some point run into an error.

The this keyword refers to the object that is executing the current function.

Here is an example :

const person = {
  name: 'David Igheose',
  type: 'frontend developer',

  career: function () {
  console.log(`My name is ${this.name} am a ${this.type}`)
  }
}

person.career()

// Output:
// My name is David Igheose am a frontend developer

Why the `this` keyword?

We know the this keyword is not a variable, it refers to the current object, so why do we have to use the this keyword to refer to an item in an object, when we can just call the item itself, here is a code example that explains why we use the this keyword.

So we have two object data called person one and person two :

// person one 
const person1 = {
  name: 'John don',
  type: 'Blockchain developer',
}

// person two 
const person2 = {
  name: 'David Igheose',
  type: 'frontend developer',
}

in the above objects, we are adding a function to the objects which looks like this:

// persona one
const person1 = {
  name: 'John don',
  type: 'Blockchain developer',

  career: function () {
  console.log(`My name is ${person1.name} am a ${person1.type}`)
  }
}
person1.career()
// Output:
// My name is John don am a Blockchain developer


// person two
const person2 = {
  name: 'David Igheose',
  type: 'frontend developer',

  career: function () {
  console.log(`My name is ${person2.name} am a ${person2.type}`)
  }
}

person2.career()

// Output:
// My name is David Igheose am a frontend developer

from the code example, we can see that the this keyword is not used, we are just using the object name to refer to the item inside it, for example :

// person one
career: function () {
  console.log(`My name is ${person1.name} am a ${person1.type}`)
 }

// person two
career: function () {
  console.log(`My name is ${person2.name} am a ${person2.type}`)
  }

the problem with this method is that using the object name to refer to an item can cause a code error in the sense that if one decides to refer to the person1 object inside person2 object, for example :

// persona one
const person1 = {
  name: 'John don',
  type: 'Blockchain developer',

  career: function () {
  console.log(`My name is ${person1.name} am a ${person1.type}`)
  }
}

person1.career()

// Output:
// My name is John don am a Blockchain developer

// person two
const person2 = {
  name: 'David Igheose',
  type: 'frontend developer',

  career: function () {
  console.log(`My name is ${person1.name} am a ${person1.type}`)
  }
}

person2.career()

// Output:
// My name is John don am a Blockchain developer

the output of the two object method calls we be the same, this is why when referring to the object that is executing the current function we need to use the keyword this.

“This” keyword in strict mode

Outside any object, this in strict mode is always undefined. Notice I mentioned strict mode. If strict mode is disabled (the default state if you don't explicitly add 'use strict' on top of your file ), you are in the so-called sloppy mode, and this - unless some specific cases mentioned here below - has the value of the global object. Which means a window in a browser context. Source: flaviocopes

“This” keyword inside an Arrow function

When using the this keyword inside an arrow function, the arrow function blocks the this keyword from referring which means rather than printing the value, the referred item becomes undefined. for example :

// person object
const person = {
  name: 'David Igheose',
  type: 'frontend developer',

  career: ()  => {
  console.log(`My name is ${this.name} am a ${this.type}`)
  }
}

person.career()

// Output:
// My name is undefined am a undefined

for functions, we have three types for them which are :

Function Declaration - automatically bound to the object.
Function Expression - automatically bound to the object.
Arrow Function - it's lexically bound.

Regular functions created using function declarations or expressions are constructible and callable. Since regular functions are constructible, they can be called using the new keyword.
However, the arrow functions are only callable and not constructible, i.e arrow functions can never be used as constructor functions. Source: Ashutosh Verma

The call() or apply()

call and apply are very similar—they invoke a function with a specified this context, and optional arguments. The only difference between call and apply is that call requires the arguments to be passed in one by one, and apply takes the arguments as an array.
Source: Tania Rascia

In this example, we'll create an object, and create a function that references this but has no this context.

// person object
const person = {
  name: 'David Igheose',
  type: 'frontend developer',
}


const career = function(props) {
  console.log(`My name is ${this.name} am a ${this.type} and a ${props}`)
}

career.call(person, "technical writer")

// Output:
// My name is David Igheose am a frontend developer and a technical writer

career.apply(person, ["technical writer"])
// Output:
// My name is David Igheose am a frontend developer and a technical writer

we can see the difference between the call() and apply() method, the call() method takes
the arguments separately while the apply() method takes the arguments as an array.

What's next?

Now you know the basics of how the this keyword works. You know what it is, and why it can be useful. But nothing will convince you more than some hands-on experience.

Thank you for reading

Feel free to subscribe to my email newsletter and Connect with me

Forem: David Igheose

How to Catch Errors During Rendering in React

What are Error Boundaries?

Let Us Go Through The React Built-in Error boundary.

Let's code

The built-in way

Check out the live code:

The Best Way To Go About Error Boundaries For Your Next Big Project.

For Example :

What's next?

Thank you for reading

Getting Started With Babel - Transpiling Javascript

What is Babel?

Talking about babel-parser

Features of Babel

Presets

Configuration files

What's next?

Thank you for reading

Understanding the ` This` Keyword in Javascript

What is the this keyword?

Why the this keyword?

“This” keyword in strict mode

“This” keyword inside an Arrow function

The call() or apply()

What's next?

Thank you for reading

What is the `this` keyword?

Why the `this` keyword?