DEV Community: JosetteTGarcia

Solving H-10 Error for Heroku Deployment

JosetteTGarcia — Sat, 24 Sep 2022 18:45:14 +0000

Hi Dev Community!

If you’ve found this blog post, I can already sense your frustration. Are you at the end of your rope with this error?

Maybe you’re a beginner or attending a bootcamp, like myself, and you’re ready to deploy your first app. Heroku was recommended and all the videos and tutorials made it seem straightforward enough. You followed the directions step by step and you’re meticulous and careful because you know how one typo can send you down a spiral.

Success! You receive the following confirmation:

-----> Build succeeded!
...
-----> Verifying deploy.... done.
-----> Running release command...
----->Waiting for release.... Done.

Excited it that it seemed to work on your first try, you command heroku open and you get the following...

And you run heroku logs --tail as you’re told and get something similar to the following:

2022-09-21T22:11:34.028636+00:00 heroku[web.1]: Process exited with status 1
2022-09-21T22:11:34.088522+00:00 heroku[web.1]: State changed from starting to crashed
2022-09-21T22:11:35.045857+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=book-worm-hole.herokuapp.com request_id=f3e2af21-0107-4e02-b791-9b172d4dc646 fwd="97.98.68.225" dyno= connect= service= status=503 bytes= protocol=https
2022-09-21T22:11:35.883219+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=book-worm-hole.herokuapp.com request_id=ac2ff6bc-db19-43c4-936b-d25f8de1b4af fwd="97.98.68.225" dyno= connect= service= status=503 bytes= protocol=https

Listen, I just went down this spiral. Hopefully, I can guide you on how to troubleshoot and identify what’s causing this. But a warning...this error is a maze that can end with many solutions. Google will still be your friend in the end!

Let’s get started!

What is the H-10 error?

Heroku provides the following, limited, information regarding this error:

A crashed web dyno or a boot timeout on the web dyno will present this error. Heroku Error Codes

To break this down, “Dynos” are Heroku designed, Linux containers designed to execute your code based on user-commands (resource).These are defined through your Procfile, but not necessarily where the issue lies.

"Boot timeout" is what it sounds like. The error is because Heroku is not able to configure on which PORT to run the application.

If your errors from heroku logs --tail match the above, we are solving for crashed web dynos.

Troubleshooting Steps:

1. Run heroku run rails console.

This was one of the more helpful tips I’ve found! If your
errors are similar to mine, running this command will
provide more specific errors.

My command returned the following (but yours may return differently):

/app/vendor/bundle/ruby/3.1.0/gems/zeitwerk-2.6.0/lib/zeitwerk/kernel.rb:35:in `require': cannot load such file -- net/pop (LoadError)
....
6.1.7/lib/rails/command.rb:48:in `invoke'
        from /app/vendor/bundle/ruby/3.1.0/gems/railties-6.1.7/lib/rails/commands.rb:18:in `<top (required)>'
        from /app/bin/rails:5:in `require'
        from /app/bin/rails:5:in `<main>'

2. Google!

There is a lot you can google within this error. Depending on
what you copy and search, you may get different solutions. A
tip I learned from an instructor is to find that first error
line and google the bolded terms or the tail end of the error.

Example: "cannot load such file -- net/pop"

Solutions:

Googling the above brought me to understand there were gems missing from my Gemfile:

gem 'net-smtp'
gem 'net-imap'
gem 'net-pop'

While friends and instructors did not need the above, I was
explained that different versions of rails and ruby could
conflict with each other. Updated versions may not have the
correct gemfiles built in which could then require you to
manually add them as I had to.

There are general causes for the H-10 errors, I recommend the following resources. NOTE: solutions may be outdated so I would run general commands vs. plugging in every suggestion.
“Causes of Heroku H10-App Crashed Error And How To Solve Them” - Lawrence Eagles

Causes of Heroku H10-App Crashed Error And How To Solve Them | Top 3 error newbies always have - HaryPhamDev

Many comment their success with these steps but the solutions did not provide success in my case.

Conclusion:

The H-10 was extremely frustrating for myself to solve! Others who experienced this issue in my cohort were not able to resolve either and resorted to other options. This is a perfectly acceptable solution as the time spent troubleshooting this could have been spent elsewhere. In the end, the potential issues can be so different from one project to the next that I don't believe this issue and documentation provided by Heroku is beginner friendly.

With that said, I learned valuable information on appropriate googling and error handling research.

I hope this finds that one engineer out there who is in google spiral as I was!

Troubleshooting API through Binding.Pry

JosetteTGarcia — Tue, 28 Jun 2022 02:24:29 +0000

This week, I completed another phase and project through Flatiron School’s Software Engineering program. In this phase, we’ve focused on building the backend of applications through Ruby, Active Record, and Sinatra.

My project focussed on payment tracking to assist users with saving. To track and categorize payments, I had two, one-to-many model associations:

Payments belong to Stores
- Stores have many payments
Payments belong to Categories
- Categories have many payments

Setting up the migrations, models, and controllers came without issue. What did not make sense right away was how to build a Payment, with the above relationships, when a user submits payment information through a form.

I struggled for a full 48 hours to understand how to format my Payment object through Javascript that correctly POSTs to the Sinatra built API and identify the two foreign keys I needed connected.

This blog will cover how I accomplished this task and how Binding.Pry helped me find a solution when I was stuck.

To start, I will explain my API, Frontend Requests, and the Submission Form for Payments:

The Set Up

As described, a Payment belongs to a Store and Category. Categories & Stores can have many payments. Categories and Stores do not currently tie together.

Here is the Payment database model:

A user can submit a payment through the following React form:

Form Submission to POST was something I had encountered before, but relating a value to a foreign key, when the user will have no concept of the foreign key's ID truly knocked me down.

Tip #1: The JS object, or 'Form Data', as I've called it must include the required key, value pairs the server is expecting on the backend.
This may sound obvious, but as I was expecting a user to input a category or store name, I had assumed the client would send the category/store names and then store_id and category_id would be converted server side. This is not the case in my example!

const [formData, setFormData] = useState({
      amount: "",
      date_paid: "",
      description: "",
      is_need: false,
      store_id: "",
      category_id: "",
  })

  const categoriesList = categories.map((category) => (
    <MenuItem key={category.id} value={category.id}>{category.category_type}</MenuItem>
  ))

 <Select
          displayEmpty
          id="standard-basic"
          className={classes.selectEmpty}
          name="category_id"
          value={formData.category_id}
          onChange={handleChange}
          inputProps={{ 'aria-label': 'Without label' }}
          > 
          <MenuItem value="" disabled>
                Category
          </MenuItem>
          {categoriesList}
        </Select>

In my case, I chose to use a Select element for category and store submission to make it easier for the user and myself. The Categories display as MenuItems and that also gives me a chance to store that specific category's id under name="category_id".

When a store or category is selected, JS then does the work of inserting the corresponding ID to our FormData.

function handleChange(event) {
    if(event.target.name === "amount"){
      setFormData({
        ...formData,
          amount: parseFloat(event.target.value)
      }) 
    }
      else {
        setFormData({ 
          ...formData, 
          [event.target.name]: event.target.value 
        });
      }
  }

The Server Side

Where I started to see smoke as a newbie engineer is that my JS object was showing up perfectly in the console.log output. But I was receiving specific API errors that Payment could not be submitting because the params were empty.

aka. My beautiful work was not coming across correctly in the server.

Tip #2: Use Binding.Pry AND Play With It.

Here was my initial payments_controller for a POST:

and here is what binding.pry was providing me when I peeked into Payment:

Nil!? How could that be when my object looked great before it was sent to server?

A tip from an instructor led me to try viewing the [params :payment] vs. just (params) within IRB. This led me to see that I was submitting data correctly, but I was asking my server to look for params called "payment", which did not exist as a key, value pair in my object. The solution:

post "/payments" do
    payment = Payment.new(params)
    if payment.save
      payment.to_json(include: [:store, :category])
    else
      {errors: payment.errors.full_messages}.to_json
    end
  end

Back tracking to just asking for "params" solved my issue (+/- some other tweaks to my code)! How could something so small trip me up for two days?

To put it simply, I was looking for the most complicated reason when binding.pry could have led me to a simple fix much quicker.

Conclusion:

I still struggled with the rest of my API calls because I was just getting used to Sinatra and Active Record set up. Leaning on binding.pry on the server side while also still utilizing console.log on the client end helped make sure the data was matching on both ends, taking less of my time!

Thanks for reading!

Getting Started with Material-UI

JosetteTGarcia — Wed, 27 Apr 2022 03:47:48 +0000

A breakdown for complete beginners who don't understand the Getting Started section provided

Hi Dev Community! I’m back with another newbie walk-through that may save some of you the hours I spent trying to understand Material-UI(MUI).

Yes, you could say that MUI has its own Getting Started section, how could it possibly be broken down more than that? Well, as a new student to React, I still spent more than a few study nights fighting with my code just to get the most simple of web designs to work.

This is not a knock on MUI specifically, just an acknowledgement that “ground zero” for learning a new platform is different between a new dev and someone who may have more experience.

Some Initial Tips:

What is Material-UI and when will a new Dev come across it?

"MUI offers a comprehensive suite of UI tools to help you ship new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components."
-Material-UI Home page

For a new dev, this framework will help you design a cleaner, more aesthetic React app. You will likely be suggested this framework during your first few React projects.

If you are brand new to React & working on one of your first projects, I highly recommend building your platform using normal JSX elements and focussing on function before appearance. This will help you memorize the normal structure before implementing Material-UI elements.
- MUI components differed enough from JSX elements that I believe I would have been unable to recall the difference at later times if I jumped into design first as I have with other projects.
- If you have experience with JSX or feel confident in HTML elements, it could be easier to start with MUI elements and focus on making the work after
Before jumping in, consider looking into Theming. Themes will keep your colors, typography, and fonts consistent across the project (This blog post will not cover themes).
- Without themes, you may get stuck trialing CSS props for each section.
- By the end of my first project, it felt like a bit of time waster to go back and re-design the themes of my elements and I wish I would have saw this first.

Initial Set Up

Surprisingly, this was the easiest part of the process! You can find the getting started page here.

You will need to install the package dependencies. Aka. You’re installing the file that holds the MUI packages and dependencies so you can grab the styled components without worrying about file paths

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Focus on the initial suggestion on this page (posted above)! Unless you are more familiar with Material-UI, the styled-components option on this page is not necessary.
Do I use yarn or npm? This is a personal preference. I recommend defaulting to the one you’ve used before to keep the new things at a minimum. For example, I used npm because I’ve used it throughout my project, but experimenting with yarn further down the line did not make much of a difference.

That’s it for install! There are some other recommendations on this page, but these are not necessary to get started. Review these in case you decide you need these later down the line and then you’ll know where to look.
Review the available components on the left, nav-bar to see what catches your eye to get started!

Styling MUI Elements:

Once you have a component in mind you want to get started with, you will need the following on your React component:

The import headers from your MUI package installed on the first steps
- Similar to your project components, you need to import the styling components from the installed package
- Each component will have different dependencies you need to import
- To grab the correct imports, click the < > icon on the example code to expand the full code for your copying and pasting needs

The code for the component you are rendering
- MUI will show you multiple examples of controlled and uncontrolled elements and how to set default settings. To make sure you got the correct code example, use the “Edit Code in Sandbox” Icon to play with provided examples and collect the correct section.
- You will not be able to copy and paste the whole example and have it work exactly as you need. You will need to pick and pull specific pieces and work it into your project.

Conclusion:

From here, you will need to just keep going and get a feel for what you need and like! As mentioned at the beginning, altering the default themes of the components would need a separate blog post. I’ve linked some helpful resources I’ve found below if you have some additional time as this blog post, and my knowledge, just scratch the surface:

How to Design a Perfect React Material UI Form - CodAffection

React Material-UI Themes: Customize Material Components for your Project - Bruno Antunes

The Habit Tracker

JosetteTGarcia — Sun, 13 Mar 2022 00:40:33 +0000

Hello, Dev Community!

This week I completed one of my first projects for FlatIron school. The focus of this project was to solidify beginning concepts in javascript, CSS, HTML, and API. In this post, I will cover the following topics regarding this project:

The concepts I came up with to fulfill the requirements of the program and build an app I would actually use
The challenges I’ve faced as a beginner and how I was able to navigate through these (createDocumentFragment(), loops, form submission to object)
Reflection and improvements

The Habit Tracker App

Why did I create this app? This app is inspired by Atomic Habits by James Clear. Clear's philosophy, as well as this app's, is to break down goals into smaller daily habits that when completed consistently, can allow individuals to reach larger accomplishments.
This app makes it simple and starts with just 30 days and the three rewards the user promises themself. Tracking your goals should be the least hardest thing about reaching them.

For a user, this app works by submitting a form with your goal and habit information. Once submitted, a “goal card” will render to the right where the user can come and check a box for each day they completed the habit they are building. If they are done tracking their goal, they can delete it with the “Delete” button on each card.

If they need extra motivation, they can click the “Click Me for Motivation” button which will pop up a James Clear Quote. They can even click the “Tips Video” link in the navigation bar to watch a video summarizing Atomic Habits.
How it Works:

This project includes [3] main features:

Form for entering your goals to create a goal card
The ability to check off each day of your goals
Local JSON-server to persist the goal card through refreshes
Connection to James Clear Quotes API for motivation

I’d like to break down two of them-

The Goal Form:

After the initial steps of creating a CSS grid styling for the app, I wanted to focus my first javascript efforts on the form submission of the goal. Submission of this form is what would trigger the new goal card to populate and basically kicks starts many of the functions of the app.

In order to target the inputs of a form, I had to first target the “submit” event from the “Add New Goal” button. I used a global QuerySelector and appended an event listener that listened for the “submit” event and started the HandleFormSubmit function. The HandleFormSubmit’s function’s main job was to set the values from into a goalObject and kickstart the function that creates our cards and the function that saves our object to the local JSON server.

An interesting lesson here was that we are listening for the “submit”, specifically because it is a form. Even though we are “clicking” the button to submit our form, the submit event is tied to the form and ensures our values are pulled. It’s intended for when we expect to return information from an input vs just trigger another action.

Appending the 30 days checkboxes to the goal card

This was the hardest part of my code to figure out. Instead of having to repeat 30 lines of code in the HTML, I thought to include a loop that would append the 30 lines of code to the new card after it’s been created. To the user, this looks instant.
To do this, I used createDocumentFragment(), which I learned is a quicker, and cleaner solution when attaching multiple elements to the DOM (resource blog from another DEV blogger).
For others who may plan to do something similar, here is the process I’d follow:

Set a variable to document.createDocumentFragment();
Within your function that creates the HTML for your card, set a for loop to the amount of times you need your code to repeat
Add a new variable that appends createElement() to the original, Fragment variable
Set the second variable inner.html to your needed code
Outside of the for loop, you will use appendChild() to append your original variable to the node

Essentially, once the new card from our form submission is created, we append the document fragment to this newly created HTML section. The document fragment calls our element creator and the for loop.
For styling reasons, I included an if-else statement to add a break in certain iterations.

Here is a sample for anyone who would like to recreate:

const containerForFragment = document.createDocumentFragment();

for (let i = 1; i < 31; i++) {  
    let newElement = containerForFragment.appendChild(document.createElement("li"));
    newElement.innerHTML = "";
    if (i == 10|| i == 20 || i == 30) {
    newElement.innerHTML = `
    <label>
      <input type="checkbox" id = "checkbox" />  
      <span> </span>
      <text> ${i} Days completed! Collect a reward! </text>
      </label>
    <br>
    ` 
    } else {
    newElement.innerHTML = `
    <label>
      <input type="checkbox" id = "checkbox" />
      <span> </span> &nbsp;
    </label>
    ` 
    }
  };
  // step 3. slap it on the DOM!

  newCard.querySelector("#NodeID").appendChild(containerForFragment);

I learned a lot through this project and feel like I've built a product I would use on my own. If I were to continue to build on this application, I would host my server so I could then create user accounts and data can persist for users other than myself. I'd also like to eventually create the ability to track progress over a longer period of time.

Example. If a user only completes 15 out of the 30 days of the habit, we can save this data, refresh the 30 days, and track their improvement month to month.

Thanks for your time! I would love to hear your feedback regarding this application or any of the topics discussed.

If you would like to check out the code for my project you are welcome to do so.

Getting Started: An Intro to Josette

JosetteTGarcia — Sat, 12 Mar 2022 20:14:29 +0000

Hello, Dev Community!
My name is Josette and I’m currently a student of FlatIron’s Software Engineering Flex Program (expected graduation, Aug 2022). I live in Corpus Christi, Texas and work remotely as a Support Manager of a technical support team at a SaaS company.

I first became interested in software engineering as a career in 2019 after hearing a software engineer present at a company I was working for in Austin, Tx. I was interested in the challenge, the community, and the overall excitement he displayed for his career. I had never considered tech and engineering as something I could just pick up after college.

After a few months working in my current company, I picked up a bit of knowledge of XML, API, and data servers which piqued my interest further. I attended a few classes at Austin Community College and finally decided to dive into this program at the end of 2020.

I’m so excited to continue this path and start my career in this industry. Follow along with me as I write about my projects, concepts I’ve found difficult and learned to navigate, and topics I’ve found fun and interesting.

Thank you for your time!