Bug Troubleshooting w/ New Tools

Tech: Ruby, TigerConnect, Splunk, SSH, CSSHX, grep, curl, HTTParty

Challenge: an application is configured to log an event in Splunk after a successful send of a TigerConnect HIPAA-compliant alert message. The entry point is working, however the alerts are not being sent AND the event is not being logged. After successful troubleshooting to determine what’s NOT wrong, I turned to CSSHX and grep to scour the logs. Why CSSHX… our production instances run on 4 servers concurrently. I want to quickly navigate in 1 terminal tab w/ 4 windows and grep the the logs!

Code:

CLI (for 4 instances) => csshx username@dserver.location.extension username@dserver.location.extension username@dserver.location.extension username@dserver.location.extension

 

grep for various strings => grep -A 10 "error" log_file.log

-A # is for number of lines after the string

-B # is for number of lines before

 

I also wanted to check my HTTParty gem code that transmits the event from app to Splunk. I used a curl statement to mimic the HTTParty call.

CLI => curl https://url.extension:####/services/collector -k -H 'content-type: application/json' -H 'authorization: XXXXXX' -d '{"event":{"app": "data"}, "sourcetype": "_json"}'

-k (–insecure) allows for insecure server connections

-H header key, values

 

I was quite proud to implement the use of these tools when troubleshooting. I have used them in different contexts and it was cool to bring everything together to discover the issue. However (and sadly), the issue was much simpler.

Ruby ENV variable are strings. Even if the string is a “boolean”. 

in .env … VAR=false

if ENV['VAR'] == false then <do something> end

=> equates to FALSE… because ENV['VAR'] exists as a string, it is TRUE.

 

slider

Undesired rc-slider onAfterChange Event

Tech: javascript, npm rc-slider, react

Challenge: The webapp designer choose to have both the rc-slider’s initial state (null), and the lowest actual value (1), be represented in the lowest/left-most node. If the User simply clicks the left-most node, the null value updates to 1 through the RcSlider onAfterChange API. The problem is whenever the next click occurs… anywhere on the page OR on any element… onAfterChange fires again, which is undesired!

Code:

The rc-slider is wrapped with a custom element. We want the rc-slider onAfterChange event to bubble up, so we pass down our “onClick” function. (Note: these elements & functions have been stripped for ease of explanation.)

onClick function:

onSliderClick = (factorIndex, value) => {

if (value === 0) {

this.props.sliderClickedFromDefault(factorIndex, 0)

}

}

React elements:

parent: <Slider onSliderClick={() => onSliderClick(factorIndex, value)} />

child: <RcSlider onAfterChange={onSliderClick} />

 

The initial click of the rc-slider works great! During troubleshooting, we capture the document.activeElement:

document_active_element_1

 

It is the second click, anywhere on the page OR on any element, that causes the issue. Here is the Redux Inspector Action Event Log:

react_log

 

After reading through known rc-slider issues, and speaking with the Great Google, I have not yet found a solid solution or explanation as to why this is happening. My workaround…

Let’s check the activeElement the second time onAfterChange fires. If it is not my desired element (the slider!), do not dispatch an action!

onSliderClick = (factorIndex, value) => {

const activeClass = document.activeElement.className

if (value === 0 && activeClass === 'rc-slider-handle rc-slider-handle-click-focused') {

this.props.sliderClickedFromDefault(factorIndex, 0)

}

}

 

Takeaway: I do not love this solution and am convinced something else is going on here. Although the workaround is effective, I am writing this post in hopes of coming back to it with a real solution & understanding.

 

References:

https://www.npmjs.com/package/rc-slider

vandelay

{React} importing & exporting

Tech: React

Challenge: while working through a tutorial, an error appears and no content is displayed!

react_import_export_error

I narrowed down the problem to the export/import of the tutorial’s js code. The tutorial is very basic, and my repo uses create-react-app, so several times I needed to troubleshoot errors that the tutorial didn’t run into since it was a different environment.
 
Code / Solution:

Here is the code supplied by the tutorial for importing the js code:

import {ReversibleList} from './ReversibleList.js'

I also saw my own code for importing React and Component:

import React, { Component } from 'react';

Why the {} sometimes, and other times not? Could this be the issue?
 
With a little help from the below article, I discovered the difference between export and export default!

If there are multiple exports, then the {} are needed. If the file uses export default, then no {}!

In code terms…

if (export default) {

// ex – export default class This extends React.component

import This from './This.js'

} else {

// ex – export class This extends React.component

import {This} from './This.js'

}

 

Reference:

https://medium.com/@thejasonfile/a-simple-intro-to-javascript-imports-and-exports-389dd53c3fac

https://github.com/lukekedz/react-armory-tutorial

 

Dockerfile: Command Placement?! (pt. 1)

Tech: Dockerfile, Sass, CSS, node, angular 1.5

Challenge: seeing curious error when building ng container

Error!

blog_dockerfile_1
 
Curious… let’s take a look at the Dockerfile…

blog_dockerfile_2

 
After not too much troubleshooting… the problem is the placement of

RUN npm rebuild node-sass

 
!! By simply placing the rebuild after line 12 ADD ., all is well. Part 2 coming… why?

{{ng}} Fork & Deploy

Tech: Angular, Kinvey, AWS S3, NPM, Gulp, CLI, Git

Challenge: take an existing Angular 1.5 repo (with Kinvey Data Store, hosted by AWS S3), fork it, and deploy! Luckily, I forked this project approximately 10 months ago. Some of the work will just be a memory jog. The challenge here is connecting the fork to Kinvey & AWS, which was previously done by another developer.

Code:

First, we use git and create a branch (git checkout -B new_app_instance master)  for the new project instance. I used the term ‘fork’ above incorrectly. In order to simplify the maintenance of multiple live, hosted instances of this “To Do List” application, we branch off of master and deploy the various instances separately to unique AWS S3 buckets.

Once on the new branch, let’s add in environment files. Three in this instance: local, dev, prod. Here is the sample format env.local.js.example:

ng_fork_deploy_env_file_ex

The local file allows localhost to connect to whatever instance you’d like, without having to muddle with official dev or prod files.

 

For dynamic elements, we use env variables and conditionals in Angular to display the appropriate text/div per instance.

ENV Variable:

<span flex>{{$ctrl.$state.current.data.title}}</span>

Conditional:

<div ng-if="$ctrl.envConfig.env == 'appInstance2' || $ctrl.envConfig.env == 'appInstance3'">

 

Next, we setup the AWS S3 bucket. Pretty simple because we clone an existing instance. The key here is to turn on static hosting! The S3 bucket will look for Angular’s index.html file as the entry point and Angular will take over.

ng_fork_deploy_static_hosting

 

Ok, the env variables, Kinvey credentials, and AWS instance are in place. Let’s add an npm command to our package.json file for easier deployment (and for this specific app instance):

"deploy:prod": "gulp build --environment prod && pushd dist && aws s3 cp --recursive . s3://to-do-app --acl public-read && popd"

 

Ready to deploy from the cli… npm run deploy:prod … aaaannnndddd error!

ng_fork_deploy_aws_error

 

Looks like there is a region mismatch. I want to check with region I am trying to deploy to:

aws s3api get-bucket-location --bucket to-do-app

 

And the same error rolls in! Something is amiss… time for some googling… I think I have to upgrade my aws version:

aws --version

pip install awscli --upgrade --user

 

Ok, once the awscli is updated, I rerun my bucket location command and realize I am trying to deploy to the wrong branch. Location:

{ "LocationConstraint": "us-east-2" } (and I want to deploy to 1)

 

So, I need to VIM into the aws config file and make an update. Since I have never done this before, I wonder where the file is!

find '.aws'

 

Vi into the .aws file, make the region update, and deploooooooooooooyy!

 

Note: spinning the instance up took 2-3 hours, and this post attempts to hit the highlights for easier fork & deploy in the future. 

Error! Is port 5432 allocated?

Tech: PostgreSQL, Docker, Rails, Ruby, grep

Challenge: seeing error messages when launching PostgreSQL. I have been seeing this in a few different scenarios. One is when Docker is/was running a PG container, and the computer has slept or been closed. 

HINT:  Is another postmaster already running on port 5432? If not, wait a few seconds and retry.

LOG:  could not bind IPv4 socket: Address already in use</code>

HINT:  Is another postmaster already running on port 5432? If not, wait a few seconds and retry.

WARNING:  could not create listen socket for "localhost"

FATAL:  could not create any TCP/IP sockets

LOG:  database system is shut down

Code:

In the case of a Docker/Rails Server conflict, I have been grepping for PG instances and shutting them down.

ps -ef | grep postgres

What’s going on here? …

ps = process select

-ef = every process

Let’s take out PG and start over…

sudo pkill -u postgres

 

Challenge: another time, a similar error when the Rails database file was not fully configured.

could not connect to server: No such file or directory
Is the server running locally and accepting
connections on Unix domain socket "/var/pgsql_socket/.s.PGSQL.5432"?

Code:

I tried the above, encountered the same problem, and then looked to the database.yml file:

simply add… host: localhost

 

Reference:

http://stackoverflow.com/questions/18721149/check-if-a-particular-service-is-running-on-ubuntu

http://askubuntu.com/questions/547434/how-to-nicely-stop-all-postgres-processes

Rails: JS Not Loading in Template?

Tech: Rails, Ruby, JavaScript

Challenge: when user initially logs in and navigates to page with HTML/AJAX post forms, JS file not properly loading. The page is a Rails template, and I suspect the jQuery events are not being implemented… thus when clicking to submit the form, an unknown route error is generated instead of a successful AJAX call. If the page is refreshed once navigated to, the listener events/AJAX run perfectly.

Solution: let’s ‘force’ load the JS file to ensure the jQuery listener events are active. I experienced a similar issue here, and that led to a very quick solution this time around. Only two lines of code:

At the top of the _template.html.erb file:

<%= javascript_include_tag('yourJsFile.js') %>

In /config/initializers/assets.rb:

Rails.application.config.assets.precompile += %w(yourJsFile.js )

 

Takeaway: this is the second time running into problems with Rails’ templates not loading code. Are these workarounds correct? Or is there a better ‘Rails’ way?

Reference:

https://stackoverflow.com/questions/18533969/how-to-load-a-javascript-file-to-rails-html-erb

 

ActionController::InvalidAuthenticityToken

Tech: Rails, Ruby

Error: if you are a Rails developer, you’ve definitely seen this:

invalid_auth_token_error

 

To fix, just skip the verification in the controller of the post route:

skip_before_action :verify_authenticity_token

 

Easy and done, right? WRONG! CSRF can be deadly to a website/application. I admittedly have done this in the past (although never on a viable production application, ie – at work!). No more… time to properly understand and fix.

What was especially perplexing is I know Rails has built-in security specifically for CSRF and other items. I thought by including in <%= csrf_meta_tags %> in /layouts/application.html.erb, everything would be set.

Wrong again. This assumes you are implementing forms with Rails form_helper, which automatically includes the auth token. If you define a traditional HTML form, the auth token is not included!

 

The actual, simple solution is to include the auth token inside the form… hidden, with rails/ruby interpolation:

<%= hidden_field_tag :authenticity_token, form_authenticity_token %>

 

Reference:

https://stackoverflow.com/questions/3364492/actioncontrollerinvalidauthenticitytoken

 

Error! {{ng2}} ng build Unexpected Token

Tech: Angular2, ng-cli, nvm (Node Version Manager)

Error! On ng build:

ng_build_error

 

Solution (quite easy, but this is a band-aid for now):

nvm ls

nvm use -version-

nvm use v6.10.1

 

Resulting in:

ng_build_version

 
 

Takeaway: need to explore further! It seems to revert to the earlier version when laptop goes into sleep mode.