DEV Community: critwitt

Handling Errors in Ruby

critwitt — Mon, 24 Oct 2022 01:25:24 +0000

When working with Active Record within Ruby, utilizing CRUD operations can yield a multitude of errors. Some common errors are ActiveRecord::RecordNotFound, ActiveRecord::RecordInvalid, and ActiveRecord::InvalidForeignKey among others. In this blog, we're going to go over some ways in which you can handle these errors in order to give the user more information about the errors they receive.

Utilizing `rescue_from`

A recommended way for error handling is utilizing Ruby's built in rescue_from instance public method. Able to be placed right in your ApplicationController or in any specific class controller, rescue_from in combination with a trailing :with option allows for you to create a private method to handle errors.

class ApplicationController < ActionController::Base
  rescue_from User::RecordNotFound, with: :not_found

  private

  def not_found
    render json: {error: "Record not found"}
  end
end

This will render an error message to the user indicating that the record they were searching for does not exist. This can take care of some errors with #show and #destroy methods. But what if we're creating a new instance but our user does not pass our data validations? Wouldn't it be nice to tell our user what validations were not passed? Let's explore how we can handle that in our next section

Handling Validations Errors

There's an important decision you have to make when creating data, and that's whether you want to use create or create!. Comparing the two, create returns the object created by the user, while create! returns a RecordInvalid error.

`create`

class InstanceController < ApplicationController

  def create
    instance = InstanceClass.create(instance_params)
    if instance.valid?
      render json: instance, status: :created
    else
      render json: {errors: instance.errors }, status: :unprocessable_entity
      end
  end
end

Using create allows for a user to access the errors key to display all the errors associated with the object.

`create!`

class InstanceController < ApplicationController

  rescue_from ActiveRecord::RecordInvalid, with: :invalid

  def create
    instance = Instance.create!(instance_params)
    render json: instance, status: :created
  end

  private

  def invalid errors
    render json: {errors: errors}, status: :unprocessable_entity
  end
end

Here we can see that create! will raise a RecordInvalid error, and that will be rendered for each invalid option. So that takes care of #create errors in terms of validation.

Using this guide, play around with Active Record and Postman and see if you can generate and debug your own errors. Happy Coding!

Fixing Errno::EIO: Input/Output Error when Running Sinatra for Ruby

critwitt — Tue, 04 Oct 2022 05:11:00 +0000

I came across and issue while working on my backend server using Sinatra with Ruby. When I would try to run my server locally on my machine, I would get an error on Sinatra's end saying Errno::EIO, and notifying me that there was an input/output error which was preventing me from fetching data from that endpoint. That error might occur because you're trying to access a port which is already in use. There's a lot of fascinating Computer Science that goes into ports but chances are you're just looking to fix this issue.

In your terminal, you want to kill the port that's currently in use. For this example, I will use port 9292, but you should use whatever port you're trying to access.

In your terminal, type the following:

sudo kill -9 `sudo lsof -t -i:9292`

Make sure to use backticks, not apostrophes or quotes. If you're interested in exactly what you're typing, I'll direct you ExplainShell. If you're uninterested in the specifics just know this this is killing the open terminal.

Now when you try to run your server again, Sinatra will work perfectly. Happy Coding!

React Hooks: Using useState

critwitt — Mon, 12 Sep 2022 02:55:54 +0000

If you're a beginner with React, this blog post is aimed at familiarizing yourself with the benefits of using useState to re-render component to your React App.

What is a Hook?

A Hook is a way of allowing a user to use stateful logic from a component without reorganizing your code or restructuring your hierarchy. Essentially, hooks allow for easier collaboration for people working on different components of a project. One of the most useful Hooks that's provided by React is useState.

What does `useState` do?

useState allows a user to easily create a state variable and update it. First a user must declare the state variable and function which will update the state variable. Then a user will call useState and set the initial state. (A side note about the initial state is that it can be any data type! More on the logistics of that below) See below for an example:

import React, { useState } from 'react';

function App () {
  const [dog, setDog] = useState('');
}

We can see the useState hook declares the state variable dogs and assigns it to an empty string. Now we can use a function which utilizes setDog to update the state of dog. The beauty of updating state in React is that this will trigger your app to re-render! Let's take a look at how we can utilize a function to set the value of dogs and re-render your app.

import React, { useState } from 'react';

function App () {
  const [dog, setDog] = useState('');

  function addDogs () {
    setDogs('German Shepherd');
  }

  return (
    <p onClick={addDogs}>Click me to see my favorite dog: {dog} </p>
  )
}

This is a very simple example of how clicking this <p> tag will set the dog state to German Shepherd every single time. State variables can be updated in more complex ways according to the needs of your app. State variables can even be passed on to children components as props. This allows a user to update state in a child component which will trigger a re-render in the parent component.

A Note About Arrays and Objects

In our example above, updating the variable dog was very simple as clicking our <p> tag would only update it to a single value. When updating an array or object, it's important to not erase our previous data when we only want to update the last element in an array or a single key in an object. For this reason it's important to use the spread operator to maintain that previous state data. Take a look at the example below from w3schools:

import { useState } from "react";
import ReactDOM from "react-dom/client";

function Car() {
  const [car, setCar] = useState({
    brand: "Ford",
    model: "Mustang",
    year: "1964",
    color: "red"
  });

  const updateColor = () => {
    setCar(previousState => {
      return { ...previousState, color: "blue" }
    });
  }

  return (
    <>
      <h1>My {car.brand}</h1>
      <p>
        It is a {car.color} {car.model} from {car.year}.
      </p>
      <button
        type="button"
        onClick={updateColor}
      >Blue</button>
    </>
  )
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);

We can see how the spread operator preserves the previous state so that the car color is updated but the car model and car year is unchanged.

Conclusion

useState is a very user friendly way of hooking into react state and updating the state to trigger a re-render. There are many different applications that useState can utilize so get out there are start experimenting. Happy coding!

Array Iteration for Beginners: What is forEach() and map()?

critwitt — Tue, 23 Aug 2022 02:17:36 +0000

What is "iteration"?

Iteration is the process of going through each element of an array and doing something. There are a lot of reasons you might want to do something to each element in an array. Luckily, JavaScript has a lot of ways to do things! We're going to explore the two JavaScript iteration methods forEach() and map() and figure out what they are, and when to use them.

What to know before starting

There are some considerations to make before iterating over an array. The first thing you want to ask yourself is what am I trying to accomplish through iteration? What exactly would I like to be returned to me after I have each element do something? Let's see how forEach() and map() can operate similarly but have different return values.

Using `forEach()`

forEach() is very aptly named because it will take an array and perform some function for each value in the array. If we want forEach() to to perform some sort of function, then it will have take a function as a parameter. This is called a callback function and it will be used in both forEach() and map(). A callback function is the something that is happening for each element in the array! Take a look at the example below:

const people = ["Mac", "Dennis", "Charlie", "Dee", "Frank"];
people.forEach(person => console.log(`${person} is a my favorite!`);

// CONSOLE:
// Mac is my favorite!
// Dennis is my favorite!
// Charlie is my favorite!
// Dee is my favorite!
// Frank is my favorite!

What's important to note about the return of this forEach()? Well let's examine what's happening. For each person in the people array, a callback function returns a log of the person to the console. So the callback function is what's returning a value. So what does the forEach() iteration method return? Well...nothing! It doesn't return a value it just calls upon a function to return a value for each element in the array. We can check this by trying to log the forEach() array to the console.

const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.forEach(number => number*2);
console.log(doubleNumbers);

// CONSOLE:
// undefined

It's apparent that using forEach() does not return a value of doubleNumbers to the console. What if we want those values returned to us so we can manipulate them further? Perhaps we can make use of map()

Using `map()`

When you create a map of something, you recreate something on a different scale. Theoretically, a map of the United States should just be a smaller United States. That's essentially what we're doing with our map() function! We're just changing something about our array, but, as opposed to forEach(), map() returns a new array of the same size. Take a look at the code below:

const numbers = [1, 2, 3, 4, 5];
const doubleNumbers = numbers.map(number => number*2);
console.log(doubleNumbers);

// CONSOLE:
// [2, 4, 6, 8, 10]

We can see that map() takes a callback function just like forEach(). However, unlike forEach() we see that an array doubleNumbers is logged. This array is the returned value of each element after the callback function has been performed on that element.

Ok, so what?

Well it's important to know if you want an array returned or if you just want some action performed to each element. There are instances where a new array is unnecessary because the array only exists for some action to be performed upon its elements. Alternatively, it can be very useful to return a new, updated array to use further in your code. It all depends on your uses. Explore the uses of forEach() and map() and see where they excel and where their limitations might lie. Happy coding!