DEV Community: Fabio Peluso

Debugger Rhapsody

Fabio Peluso — Wed, 17 Feb 2021 13:48:07 +0000

Mama, just rewrote a song.
I hope I'm not breaking any copyright. If so, please tell me and I will delete this post.

Is this the real bug? Is this just regression?
Caught in a failure, no escape from deploy
Open your eyes, look up to the logs and see
I'm just a poor dev, I need no sympathy
Because I'm easy Rust, easy Go, little Spring, little Node
Any way the build blows doesn't really matter to me, to me

Mama, just spot a bug
Put a test against this build
Pulled my install, now it's blown
Mama, build had just begun
But now I've an error and thrown it all away

Mama, ooh
Didn't mean to break the feature
If I've not deployed this time tomorrow
Carry on, carry on as if servers really runs

Too late, my built is done
Sent shivers down my spine
Try-catching all the time
Goodbye, everybody, I've got to go
Gotta leave you all behind and face the boss

Mama, ooh
I don't wanna test
Sometimes I wish I'd never developed at all

Git garbage: what if your local have a lot of old branches?

Fabio Peluso — Tue, 24 Nov 2020 15:12:22 +0000

In the last few days I've seen that my local git repository had a lot of old branches that are no more on remote. So I asked Google this question:

git how to remove branch locally and not remotely

And then I come out with a solution by reading some stackoverflow stuff.

First of all: you check the branches in your local repository to discover if they are gone on the remote; you can use the following command:

git branch -vv

This will give you a list of all branches on your local repository, the current commit of the branch and the corresponding remote branch if there is one and the indication gone that indicates that the branch was deleted on remote.

Now you may want to delete all the branches that are on your local but are no longer present on remote, but if there are to many of them you will need an automated procedure. I've find that one usefull:

git fetch -p && git branch -vv | awk '/: gone]/{print $1}' | xargs git branch -d

After that my local repository was finally cleared of all the dead branches.
And you? Have you ever faced this problem? How did you faced it?
Leave a comment if you have!

A simple WebSocket between Java and React (with hooks)

Fabio Peluso — Thu, 19 Nov 2020 10:17:52 +0000

Async comunication: the phantom menace

When you are working as a Software Engineer or developer, it's only a matter of time since you encounter a great enemy: asynchronous behaviour! You can find it in communication between client and server, or maybe it's included in the programming language or in the framework that you are using.

Websockets: a new hope

During my current project we (me and my team) faced the following problem: after a certain action of the user, the application should prevent every other action and wait for an OK/KO from the server. It was unknown how much time can take the server to send a response, but the requirement was clear: no matter how much time, the user must wait until the response or call the customer service if he thinks it's taking to long.
After a small discussion we decided to try to implement a websocket to let the client wait for a message (even forever if necessary).

What is a Websocket?

I don't want to bother you with informations that you can retrieve by yourself from more authoritative sources. In simple words Websocket is a protocol that allow a full-duplex communication over TCP, allowing both client and server to send/receive message from each other and to manage events based on the message received.

Now, the Frontend is purely React + TypeScript, while the Backend is written in Java in an OSGi framework, so it is not possible to use simple solutions like socket.io that allows deleoper to use the same tech on both FE and BE.

Let's code together - Frontend

Since I was responsible for the Frontend part, I will first describe my React code. Another requirement to keep in mind was that the Websocket is opened at the start of the application.
So I decided to use a ref hook to manage the WebSocket Object and check if it is closed or open and a boolean shouldKeepWSAlive to enable/disable a function that keep alive the connection while waiting for the response:

  const connection = useRef<WebSocket>();
  const shouldKeepWSAlive = useRef<boolean>(false);

After that, we need to what is the event that start the websocket.
Now I had this variable called isWaitingSomething that is responsible for blocking the application as said before so I decided to use a useEffect hook to manage the opening of the Websocket (what is a useEffect?)

useEffect(() => {
    if (!(connection && 
        connection.current && 
        connection.current.readyState === 1))
    {
      connection.current = new WebSocket("ws://path-to-websocket");
      connection.current.onopen = () => {
          //do something, maybe just log that the websocket is open;
      }
      connection.current.onclose = () => {
          //do something, maybe just log that the websocket is closed;
      };
      connection.current.onmessage = (e) => {
        aFunction();
      };
    }
  }, [dependencies]);

Just a little explanation:

the if statement on the top helps me to check if connection is already open;
if the connection is not open, the code block inside the if open a new connection;
onopen and onclose are default events that are triggered when the connection is started and closed;
onmessage is the important part: it is the event that is triggered when a message is received on the frontend;
aFunction() is my custom function that do the logic that I want;
with the correct dependencies the Websocket is opened when the application start;
since even the Websocket do timeout, you may need to reopen it.

However, if the server takes to much time to send a message, while waiting the Websocket can timeout and close, so I've added a simple keepAlive() function in this way:

  const keepAlive = useCallback(() => {
    if (shouldKeepWSAlive.current) {
      if (connection.current !== undefined && 
          connection.current !== null &&
          connection.current.readyState === 1) 
      {
        connection.current.send("");
      }
      setTimeout(() => {
        keepAlive();
      }, 20000);
    }
  }, []);

  useEffect(() => {
    if (isWaitingVendi) {
      shouldKeepWSAlive.current = true;
      keepAlive();
    } else {
      shouldKeepWSAlive.current = false;
    }
  }, [isWaitingVendi, keepAlive]);

After that my Websockt was working and performing well.

Let's code together - Backend

In this section I will briefly describe the Java part of the Websocket.
The BE was managed by another team member, so I will not insert detailed explanations, but I've asked him to write a dedicated post.

We are developing in OSGi framework and we use Jetty. The list of required imports is quite long (I have hidden some...):

import com.google.gson.Gson;
import it.hiddenstuff.common.topic.TopicConstants;
import org.eclipse.jetty.websocket.api.RemoteEndpoint;
import org.eclipse.jetty.websocket.api.Session;
import org.eclipse.jetty.websocket.api.annotations.OnWebSocketClose;
import org.eclipse.jetty.websocket.api.annotations.OnWebSocketConnect;
import org.eclipse.jetty.websocket.api.annotations.OnWebSocketMessage;
import org.eclipse.jetty.websocket.api.annotations.WebSocket;
import org.osgi.framework.BundleContext;
import org.osgi.framework.FrameworkUtil;
import org.osgi.service.event.Event;
import org.osgi.service.event.EventAdmin;
import org.osgi.service.event.EventConstants;
import org.osgi.service.event.EventHandler;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import java.util.Hashtable;

and here you have the declaration of the Class with correct annotations and the constructor:

@WebSocket
public class SellWebSocket implements EventHandler {

    public SellWebSocket() {
        BundleContext bundleContext = FrameworkUtil.
            getBundle(SellWebSocket.class).getBundleContext();
        Hashtable<String, String> stringStringHashMap = new Hashtable<>();
        stringStringHashMap.
            put( EventConstants.EVENT_TOPIC , TopicConstants.TOPIC_END_SELL);
        bundleContext.
            registerService(EventHandler.class , this ,  stringStringHashMap);
    }
}

Then you need to add some declarations to manage the session, the logs and the endpoints:

    private Session session;
    private RemoteEndpoint remote;
    private Logger log = LoggerFactory.getLogger(getClass());

    public Session getSession() {
        return session;
    }

    public void setSession(Session session) {
        this.session = session;
    }

    public RemoteEndpoint getRemote() {
        return remote;
    }

As for the Frontend, you need to listen to the events (open, close, send, receive):

    @OnWebSocketConnect
    public void onConnect(Session session) {
        setSession(session);
        this.remote = session.getRemote();
    }

    @OnWebSocketClose
    public void onClose(int statusCode, String reason) {
        this.session = null;
    }

    @OnWebSocketMessage
    public void onText(String message) {
        if (session == null) {
            log.debug("null session");
            // no connection, do nothing.
            // this is possible due to async behavior
            return;
        }
        //do something
    }

    /**
     * Called by the {@link EventAdmin} service to notify the listener of an
     * event.
     *
     * @param event The event that occurred.
     */
    @Override
    public void handleEvent(Event event) {
        //do what you need to do
    }

Conclusions

Before that, I was not quite familiar with all this stuff, and googleing made me a little crazy since it was hard to find a solution with all the right characteristics: sometimes you find socket.io, sometimes you find old React classes while you need Hooks, and some problems like that.
Anyway I managed to pack all together coming out with this solution. Since I don't pretend to be an expert, feel free to comment and add usefull suggestions.
If instead you think this article is usefull, I'd very happy to know 😀

How to clone a GitLab repository after enabling 2FA

Fabio Peluso — Wed, 23 Sep 2020 12:25:55 +0000

I've recently started to enable 2FA (Two Factor Authentication) on most of my online accounts, including GitLab. But what happen when you try to clone a repository against https after that?

When I tried the first time I run the usual git clone:

 git clone https://gitlab.com/username/project.git

but it didn't work, giving me this output:

Cloning into 'mypersonalbalance'...
remote: HTTP Basic: Access denied
remote: You must use a personal access token with 'read_repository' or 'write_repository' scope for Git over HTTP.
remote: You can generate one at https://gitlab.com/profile/personal_access_tokens
fatal: Authentication failed for 'https://gitlab.com/f.peluso/mypersonalbalance.git/'

I googled a little bit, finding that the problems was the 2 factor authentication, and then I found the following solution:

Log in into the GitLab account;
Go to the Settings section (at the moment, top right, hover the profile image and wait for the menu);
Go to Access Tokens;
Now here you can create a temporary token; if you need to pull/push you must enable read_repository and write_repository flags.
A token is shown in the page. Don't close or refresh the page, or you won't be able to retrieve the same token again!!!
Save the token somewhere safe if you need to use it more than once (I needed only once, so I just copypasted it, and then deleted it).

After these steps you can clone the repository using

git clone https://oauth2:PERSONAL_ACCESS_TOKEN@gitlab.com/username/project.git

where PERSONAL_ACCESS_TOKEN is the token you retrieved before.

GitLab explains that the tokens act like passwords after one enables the 2FA, so, in order to improve your security, you can manage one of more tokens to work with different repositories, devices and applications.