Tracking down tricky bugs is often the most time consuming and frustrating part of software development. Bugs by nature are unpredictable, and you never know where they’re going to surface. Having the right observability tools in place when things go wrong can save hours of frustration.
Ideally, you’ll have an observability solution that you can customize and extend for better integration within your existing stack. Fortunately, the latest developments in AI-assisted coding make extending out of the box applications easier than ever.
Dynatrace has a highly extensible platform for building custom use cases or integrations. With Dynatrace apps you can extend the out of the box functionality of Dynatrace with any use case you can imagine. For example, you can pull data from an external system that you want a tighter integration with or you could build a custom type of dashboard for an open-source project you’re working on. The possibilities are endless.
In this blog, I demonstrate how easy it is to extend the Dyntrace platform by showing how I created a quiz app that takes users on a bug finding challenge. You’ll learn how you can also quickly build your own Dynatrace app to add new functionality to the platform. And if you try out the quiz, using the GitHub repo linked at the bottom of the article, you’ll learn a bit about debugging code level issues with Dynatrace.
The Bug Finding Challenge
Gamified learning experiences have really taken off in recent years. And for good reason. Gamification eases the onboarding process of new technologies or any other learning experience. Having fun and being challenged while learning makes the entire process a much more enjoyable experience. With that in mind, I set out to build a fun bug finding challenge focused on helping developers who are interested in learning more about Dynatrace.
My goal when building out this bug finding challenge was to showcase some of the observability features of Dynatrace that can help developers reduce MTTR when tracking down those challenging bugs. That includes things like logs, traces, and live debugging capabilities. I decided to create a series of quiz questions that would take the player through a series of questions across all of these capabilities.
To start, I needed some applications where I could implant some bugs. I decided on two applications – a simple Todo App and a classic Asteroids style game that I rebranded as “Bugzappers,” where instead of shooting asteroids the player shoots bugs. I took advantage of Microsoft Copilot to do some vibe coding to create the Bugzappers app. It came out perfect and I proceeded to implant some bugs.
Building the Quiz App
I thought a Dynatrace app would be the perfect format for the quiz I wanted to build. This would allow me to integrate a fun learning experience directly within a Dyantrace environment. This was my first time building a Dynatrace app, so I found Dynatrace's guide on building your first app in five minutes and got started. And indeed, within five minutes I had a Dynatrace app running and connected to my environment.
As I did with the Bugzapper app, I used Copilot to help accelerate my work. Dynatrace apps are built with Node.js, making it very easy to build a custom interface with React, which is exactly what I did.
Once you have a functional app connected to your Dynatrace environment, it’s simply a matter of writing Node.js code to extend the app as you’d like. You can even use Copilot or another LLM powered coding accelerator to help. I started designing the app and very quickly ended up with a fully functional app that I could access directly within my Dynatrace environment.
Next, I started adding quiz questions that incorporated tracking down logs, looking at traces, and using Dynatrace’s Live Debugger to understand what the root cause of the issue was. Before I knew it, I had a multiple-choice quiz app running in my Dynatrace environment that tests challengers on tracking down bugs across a Java and Node.js application.
And lastly, I wanted to make this a competition. So, I decided to add a leaderboard to the Dynatrace App. Luckily, Dynatrace allows for storing of app and user states as a built-in capability to the app. This made it easy to save each participants score and add it to a leaderboard directly within the app. Before I knew it, I had a functioning leaderboard with a top score list that is saved across sessions.
Running the Backend
To make the challenge more meaningful and aligned to a real environment, I needed to also build the backend where the services would be hosted that the quiz taker would interact with as part of the quiz. I chose to use GitHub Codespaces to make it easy for anyone to spin up the environment on demand.
As part of the environment setup, it does the following:
- Spins up a local Kind Kubernetes cluster
- Installs the Dynatrace OneAgent
- Deploys the Todo App (Java) and BugZapper app (Node.js)
- Exposes ports that the apps run on to make them easy to access from outside the codespace directly on your local machine
- Optionally deploy the Dynatrace quiz app if it hasn’t already been deployed manually
And with that, we have a full end to end environment with built in bugs and a quiz app that runs locally in Dynatrace!
Conclusion
And that was my journey building a gamified bug finding experience built around a Dynatrace quiz app. It showcases how extensible the Dynatrace platform is and some of the interesting things you can do with it. It also aims to show the value of having a well-designed observability stack at your fingertips to help track down issues when things go wrong.
It was a fun experience, and I learned a lot about Dynatrace along the way. I hope after reading this you were able to learn something new as well!
If you’re interested in checking out the full repository, you can find it here: https://github.com/Dynatrace/demo-bug-busters
Feel free to reach out with any questions or feedback. Thanks for reading!
