DEV Community

loading...
Cover image for I built an entire monitoring service while being in Covid-19 quarantine πŸ“ˆπŸš€

I built an entire monitoring service while being in Covid-19 quarantine πŸ“ˆπŸš€

jz222 profile image Timo Zimmermann ・2 min read

After reading posts here for several years now, I decided to write my first one too. πŸ˜€ I hope everyone is doing fine in the current situation. For my part, I've been in quarantine for around two and a half weeks now. To use my time productively, I decided to create an app called LOGGY that monitors different kinds of web services and catches errors in production.

There are already several monitoring services, but I wanted to see what I can come up with within just two weeks. My goal was to create a highly scalable and flexible service that is easy to deploy. I decided to write the backend in Go to learn the language a bit better. I also believe that Go is quite a powerful tool for these type of applications. The frontend is written in React.

services

To get started there needs to be at least one service. A service can be anything like an Express server, a mobile app or your frontend. All services belong to an organization. Admins of that organization are able to invite and remove additional users to their organization. There are also adapters that can be installed on the service, to automatically catch and report errors. It also gives you the flexibility to write your own adapter and error reporting logic in whatever language you prefer.

errors

When selecting a service, it shows all the errors that were reported by that particular service with a couple of details. Each service has a so-called ticket, which is used to assign the reported event to the service.

header

You can click on an error for further insights. It is also possible to add custom information to the event, which can be handy if you, for example, run your service in different clusters and want to add the name of the cluster to the event.

evolution

It will also give you detailed information when and how often the error was reported.

stacktrace

Besides the raw stack trace, it will show clearly where the error occurred. Furthermore, you will see previous console logs and information about the adapter.

If you want to check it out, you can create your own organization on a demo instance I deployed here and give it a try. Currently, there is a NodeJS adapter available and I'm already working on an adapter for common frontend frameworks. In the repositories, you will find information on how to create an adapter in any other language or host the service yourself.

πŸš€ Backend

πŸ’» Dashboard

πŸ“‘ NodeJS Adapter

✨ Demo

Thanks for reading πŸ™πŸΌ

Discussion (36)

Collapse
shofol profile image
Anower Jahan Shofol • Edited

I am mostly amazed by the timeframe! How did you finish it in a short period? Can you share? Didn't you anything other than this?

The design and animations look so neat and lovely. Did you make a sketch before or go along the way? As I am a Frontend developer, I am so interested to know about the design process which came in a short amount of time.

Collapse
jz222 profile image
Timo Zimmermann Author

Hi, thank you very much. As this is just a hobby project, I didn't really plan it out. I just started and decided on the design spontaneously. :) I've done quite a few projects in the past, so it became quite an intuitive process.

Collapse
shofol profile image
Anower Jahan Shofol

Thanks for the reply Timo. I was checking some codes in the repo. Would you mind if I reach you about my queries?

Thread Thread
jz222 profile image
Thread Thread
shofol profile image
Anower Jahan Shofol

Thank you very much, Timo. Will knock you :) Best of luck.

Collapse
xavierbeillas profile image
xavierbeillas

Good job ! How did you proceed for the design of the front ? :)

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you! Since this is just a hobby project, I didn’t really plan it out. I just got started and tried to present the information as clear as possible.

Collapse
xavierbeillas profile image
xavierbeillas

Cool :)
Did you use a css framework ?

Thread Thread
jz222 profile image
Timo Zimmermann Author

No, I didn’t. I wrote all UI components myself. You can find them in β€œsrc/components/UI/β€œ. :)

Thread Thread
Sloan, the sloth mascot
Comment deleted
jz222 profile image
Timo Zimmermann Author

Thank you very much, Cody!

Collapse
nyashanziramasanga profile image
Nyasha (Nash) Nziramasanga

Hi Timo, great work you are a beast of an all-rounder software engineer this is a great project with an awesome design, code structure, and very clean documentation. I reckon you make a video about how you built it the project :)

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you very much for your kind words. What would you like to see?

Collapse
nyashanziramasanga profile image
Nyasha (Nash) Nziramasanga

Just the whole process from conception, design choices, to build stages to get an MVP out

Collapse
ashokgelal profile image
Ashok Gelal

Nice job! Looks very polished and I like that you made it extensible by allowing adapters. I was thinking of writing something very similar for alpas.dev/ framework but I think I can just write an adapter now without having to write everything from scratch.

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you very much! I would highly appreciate it. If you need any assistance you can contact me at hello@timo.engineer :)

Collapse
ben profile image
Ben Halpern

Wow, so well done

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you Ben, glad you like it. It was interesting to see how much can be done in just two weeks.

Collapse
jlohani profile image
Jayant Lohani

The interface is so good. Nowadays i am coming across such amazing projects that involve React. Going to jump on React as soon as i complete my Maximilian's JavaScript Course. Really hyped to work on React.
And this project may be your hobby project but it looks premium and has a lot of potential. Amazing job. ✌

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you for your kind words. Maximillian is an outstanding teacher. Feel free to contact me, if you need some guidance. :)

Collapse
eri7775 profile image
EV

Your demo does not work. It doesn't accept any password, no matter what you type. I've followed directions and still no luck. It shouldn't be too hard to type a password for a demo :(

Collapse
jz222 profile image
Timo Zimmermann Author

Do you mean while setting up a new organization? The password should have between 12 and 20 characters, contain upper and lower case characters, numbers and special characters. After setting up an organization you will be redirected to the sign-in where you need to provide the email and password that you used to set up your organization.

Collapse
eri7775 profile image
EV

Yes, that's what I mean. I do type between 12 and 20 chars, upper and lower case , numbers and the chars from the list and still no luck.

Thread Thread
jz222 profile image
Timo Zimmermann Author

Would you mind emailing me the password at hello@timo.engineer? Would help me to find out why you are having issues. :) Thanks

Collapse
wolfmaster8 profile image
Felipe Lobo

Wow! Very impressive! I know this started as a hobby project, but this has potential! BTW, loved the animations on the front.

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you, Felipe. I used Framer Motion for the animations. It’s the first time I used the library but it seems to be very powerful.

Collapse
jcoelho profile image
JosΓ© Coelho

Wow awesome project! Kudos on making it open source!

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you, glad you like it!

Collapse
magarcia profile image
Martin Garcia

Awesome!!!πŸ‘πŸ‘πŸ‘

It looks like a project build by a team during months.

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you very much, Martin!

Collapse
yo profile image
Yogi

Awesome work! πŸŽ‰

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you very much :)

Collapse
kavinda1995 profile image
Kavinda Jayakody

Perfecto <3. I always wanted to write my own, but as time is limit - I sticked to third party provider. Your project motivated me to do it in this quarantine time. Let's see :D

Collapse
jz222 profile image
Timo Zimmermann Author

Thank you. It's indeed quite an interesting topic to work on!

Collapse
fr0stf0x profile image
fr0stf0x • Edited

I'm testing loggy adapter for nodejs with demo app but not working

EDIT: i figured out. it's working like a charm, the demo app. thank you for sharing. can i use this demo app for my pet projects?

Collapse
jz222 profile image
Timo Zimmermann Author • Edited

Thank you very much for testing it. Of course you can. You can send me an email at hello@timo.engineer so I can set you up on the production instance, which is even faster.

Forem Open with the Forem app