JavaScript

Heroku : Application error : error code=H12 desc=”Request timeout” : when using remote database

Posted on Updated on

I was working with a Node application I built, which connected to a hosted MongoDB database. Everything worked perfectly on my development machine. Once I pushed everything to heroku is where I would start getting problems.

I received this error after trying to connect to my apps webpage

Application error

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
heroku logs --tail

When checking the logs this error stood out

2019-08-01T18:36:14.968797+00:00 heroku[router]: at=error code=H12 desc=”Request timeout” method=GET path=”/api/notes” host=spongebobs-basin
-47509e646.herokuapp.com request_id=e70f60dc-321d-421c-9c24-6974ba3a79bb fwd=”99.99.99.9″ dyno=web.1 connect=0ms service=30000ms status=503 b
ytes=0 protocol=https

So what are the important things in this line?

  • desc=”Request timeout”
  • method=GET path=”/api/notes”
  • service=30000ms
  • status=503 b

I am connecting to the correct path, using the correct method, but after 30 seconds the server is timing out , so heroku sends a 503 Service Unavailable.

This was a strange one to figure out since locally everything worked great. I changed some things around for testing and found that the application on heroku was not connecting to the remote mongoDB host. Locally it worked great. Was this a herkoku problem?

Solution:

The .env file I used locally required the mongoDB URI to be in quotes. The app would not work without the quotes. But the configuration variables in heroku needed to be added without the quotes.

  • .env  ‘mongodb+srv://username:password@somecluster.mongodb.net/note-app’
  • Config Vars  mongodb+srv://username:password@somecluster.mongodb.net/note-app

Hoisting in JavaScript

Posted on Updated on

Hoisting is a term that i thrown around a lot if you are reading up on JavaScript. But what is hoisting? The verb hoist is defined as “an act of raising or lifting something”. So we must be raising something up. But What? Variables and function declarations  are what are hoisted to the top of the code. By verb definition, the variables and function declarations are what are moved to the top of scope. That is how it’s actually been explained to me in many tutorials, videos, and even in various lectures. However, this isn’t actually he case!  “The variable and function declarations are put into memory during the compile phase, but stay exactly where you typed them in your code.” [A] So the code isn’t moved, but by declarations being placed in memory, you can call those declarations in your code before they are read later. Meaning, referenced decelerations can be placed under callers in code.

If we look at the code below, we see that the function caller is accessing function toBeHoisted before it’s defined. Thanks to JavaScript’s hoisting, this is not a problem.

function caller(){
  let x = toBeHoisted();
  console.log(x+5);
}

function toBeHoisted(){
  return 5;
}

caller() //10

.What we have to take heed of however is that initializations are NOT hoisted, only definitions. So this is why it is said only functions are hoisted, even though technically, only declarations are hoisted, which can be variables or functions. In practice, even if the variable is initialized upon declaration, it doesn’t satisfy any callers  In the example below, if we define variable toBeHoisted , but initialize it after function caller, then we will have an error

function caller(){
  let x = toBeHoisted;
  console.log(x+5);
}

caller()  //toBeHoisted is not defined, we get NaN

var toBeHoisted = 95;

 

To see that hoisting does affect variables, we could initialize the variable BEFORE declaring it, and then the declaration is hoisted.

toBeHoisted = 95;

function caller(){
  let x = toBeHoisted;
  console.log(x+5);
}

caller() //100

var toBeHoisted;

.

As an aside, if we change from a var decleration to let decleration, that will not be hoisted and we get an error

toBeHoisted = 95;

function caller(){
  let x = toBeHoisted;
  console.log(x+5);
}

caller() //ReferenceError: toBeHoisted is not defined

let toBeHoisted;

.

ECMAScript 2017 padEnd() and padStart()

Posted on

Two new methods implemented in the 2017 version of Javascript are padEnd and padStart. Both methods pad a string with second string, until the result is of the desired indicated length. Given that the return value of padEnd and padStart are new Strings, and the original strings are unmodified, the methods a “pure”, as they do not cause side-effects.  As you can see from the examples below, this is true as str1 in the example is unmodified.

Screen Shot 2018-09-08 at 1.04.49 AM

Now the length of our example string, str1 is 17.  If the target length is less than the size of the primary string, the primary string will be returned. If the target length is less than the size of the primary string and the added string, the added string will be truncated to fit the target length. Example below:

Screen Shot 2018-09-08 at 1.14.54 AM.png

If your browser doesn’t have these methods because it doesn’t support ECMAScript 2017 you can actually write your own methods and add them to the String prototype, extending it. I changed the styling such that it can fit in a smaller picture, so heres an example of padEnd() implemented by me: below. See also the repl link if you would like to play with it

Screen Shot 2018-09-08 at 1.37.56 AM

Screen Shot 2018-09-08 at 1.42.44 AM.png

React – onClick captures children as target rather than parent

Posted on

I placed  some data in the parent div that I wanted to use when the div was clicked.

Using event.target was not working because I was getting the children elements as the target and not the parent div as I wanted.


div  onClick={this.handleClick} name={item.name}  //want this as event target h2 
Welcome h2
h3 {item.name} h3
h4 Item found in: {Item.location} h4
/div

 

The fix was below:


handleClick = (event)=>{
event.preventDefault();
console.log(event.currentTarget);
const target = event.target

 

Heroku: No default language could be detected for this app.

Posted on

I was uploading a vanilla JavaScript application to heroku.

Looks like I will need a buildpack for it to deploy. This is so Heroku can understand what type of app it has.

Solution1: Just deploy it as a github page. 

Since its a static site, there is nothing “serving” index.html, and heroku is a cloud platform, hosting apps, not a “webhost” in the web 2.0 sense.

Since I want to keep everything on heroku for now, lets see what else we can do.

Attempted Solution: rename index.html to index.php

The least effort solution is to rename your default file to index.php and redeploy. Heroku will detect it as a PHP site and use that buildpack. – John Beynon

Very curious! Would this work? Why not try it out.

hmm appears to work! I was going to deploy a sinatra app or ry the heroku static bundle and I will probably do that anyway but this quick solution can be a real timesaver!

Fix to : Links must not point to “#”. Use a more descriptive href or use a button instead jsx-a11y/href-no-hash

Posted on

Getting warning:

Links must not point to “#”. Use a more descriptive href or use a button instead jsx-a11y/href-no-hash

While its only a warning in the browser window, I still wanted to see if there was a way to fix it.

BEFORE:

<a href=”#” onClick={this.handleClick} >Link to something</a>

FIX

<a tabIndex=”0″onClick={this.handleClick}>Link to something</a>

Using # , while a HTML staple, is considered broken in React.

Found thanks to afercia at this comment

event.target vs event.currentTarget

Posted on

 A good explanation of target vs currentTarget

  • target is whatever you actually clicked on. It can vary, as this can be within an element that the event was bound to.
  • currentTarget is the element you actually bound the event to. This will never change.

If you are clicking a component and the onClick is on the parent but are getting back the child,  try currentTarget

explanation from here