SECRET OF CSS

logging monitoring and alerting best practices


A simple way to break a frustrating loop

1*5HBieH h7VzDZ8kfoFsyuw
Photo by Austin Distel on Unsplash

When you have an idea to build a project, you’re always thinking about what your next move is going to be and what your next growth strategy will look like.

And that’s only possible if you’re confident with your current state and you can comfortably bring new features onto the table. You really don’t want to get caught up in fixing what you already have built and moved on.

If you’ve been working on any project yourself or you had a separate tech team working on it, you probably have been caught up in one of these situations before:

  1. You had to check every device and every platform with too many different versions to make sure everything worked fine on every single one of them so that you wouldn’t lose any potential users.
  2. There were some unpredictable bugs/behaviors that came up without you even noticing them even though you wrote too many unit tests to check every tiny feature on the road.
  3. You received a bug report and when you tried to debug it, you realized that the bug depended on too many different variables and environments and you couldn’t really ask that much of details from the user and you felt stuck.
  4. Something went wrong or broke down and you didn’t know what the root cause of that was, so you disturbed all the team members to find out who was responsible and who could fix the problem.

So, what’s the solution? We need the new features and stability at the same time!

What if we take the proactive approach and try to find errors and problems as fast as possible before they turn into a bigger mess and we bring the system back to a new stable version? You might say:

“Well, we don’t have all the time in the world to repeatedly test everything and check on every user and analyze every single log!”

Let’s take a step back and see what is going on here.

When you think about the process starting with a user noticing an error and reporting it to us, then we create and assign the proper task to the team members, and then we try to debug it and release the new version — that’s a frustrating loop that occurs over and over again.

If we can find a systematic way to automate this process, we no longer need to worry about instability.

The key in that process is to give enough information to the right developer as fast as possible without wasting any time or energy.

There are good options available for us with Firebase Crashlytics being one of the well-known and popular options. But if you’re concerned about using a third-party service and not knowing what exactly they’re doing, then maybe an open source approach you can run on your own server and see the whole code would make more sense to you. And then, of course, if you feel comfortable, you could go ahead and use their cloud service.

Sentry is one of those open source softwares that you can clone and give a try.

They have a custom alerting system and you are even able to see user breadcrumbs and all the variables being used.

It supports almost all the programming languages and all the frameworks so you have to do nothing but add the dependency to your code.

They have also released a docker version so you can easily install it on your server by running one command.

1*kA iv1joXa4VJjiQsGVicQ

If you’re interested, let’s set it up real quick:

1. Check out the Sentry’s Github repository to get the latest version:

git clone https://github.com/getsentry/self-hosted.git

2. After cloning the code, we need to run the following command:

./install.sh

3. The whole installation process is automated through docker. You only need to choose a username and a password for admin access during the installation.

After installation is complete, we need to run up the docker with the following command:

docker-compose up -d

4. Finally, you should be able to see the login page at your localhost on port 9000 (You can change it through the config.yml file).

http://127.0.0.1:9000
1*XW62b6Gf2vsrJpBjW2W6Mg
Sentry login page

Use the same username and password you chose during installation to log in.

1*PAUtdVJGwQdOEPb 53AGAA
Sentry dashboard page

If you want to tweak the default configuration, then check the install documentation.

As I mentioned, Sentry supports almost every platform.

Let’s check out how the React configuration works. You can check the framework support list.

1. First, we need to install the sentry package:

npm install --save @sentry/react @sentry/tracing
or
yarn add @sentry/react @sentry/tracing

2. Then we need to initialize the Sentry at the starting point of the project.

3. Just by adding that piece of code alone, Sentry will detect all the errors and exceptions and send them to the server. And that’s all we need to get started.

4. If you want to go further out, you can enable the versioning feature so that you can separate your logs. Or You can enable the Breadcrumb feature so that you could have a full list of actions before an error occurred. Check out feature list and pick what you need.

We want to free up our time to do more creative work on our project and build up our idea. The best way to free up some time is to automate tasks and processes that have a simple pattern. The process of testing the project and finding errors and fixing them could be very overwhelming and time-consuming.

Instead, we can use our user’s activity to detect errors and fix them as fast as possible. We can also eliminate all the unnecessary conversations around a new error by giving the right developer the right information directly.

Want to connect?Check out my LinkedIn profile.



News Credit

%d bloggers like this: