
A Dumpster-Fire Alert for Your JavaScript Errors
Do you work with an app that’s a dumpster-fire of errors? Wishing for an appropriate alert when you need to fight down the flames? Look no further friend. Today, we’re creating a Dumpster fire notification for your JavaScript errors withParticle andTrackJS.
My friendKristina is a wizard with hardware and LEDs. Awhile back, she made the dumpster fire to present at a conference, and she printed an extra one for me! Today, we’re going to set up the hardware, configure the software, and integrate it with our errors.
Credit for this goes toKristina Durivage , who did the vast majority of the work, I just tweaked the software here and there.
The Hardware
The dumpster itself was 3D printed fromThingiverse, printed with translucent filament so the fire light will shine through. It is powered by aParticle Photon with a WS2812 LED strip. Added some acrylic batting as the garbage to diffuse the light.
The Firmware
We need to load some firmware on our Photon device. Luckily, Kristina left me some detailed notes on cat stationary.
I’d never used Particle before, so first I need to create an account and explore the UI a bit. Starting up and adding my device was pleasantly easy and straightforward. I only broke-down and read the documentation once! (Thedocumentation was pretty good too).
Now that I had an account and a device, it was time to write some code. I used the Particle Web IDE, which was surprisingly good. I created thedumpsterfire
application and pasted in the source fromKristina’s dumpster fire project.
The firmware code is basically asetup
function that initializes the device and sets up actions, and aloop
function, which will run endlessly.
For our use case, the loop is the visual frame of the fire. Each time the loop runs, the flames will change. This is powered by a dependency on theFastLED
project. Add in dependencies using the “Libraries” option in the menu.
What starts the dumpster fire though? I need to check TrackJS periodically to see if there is a dumpster fire of errors needing my attention. The firmware does this with theerrorPollingTimer
, which is setup to runpollForErrorCount
every minute. That function serializes the TrackJS credentials and query time range as JSON, and publishes an event.
In a moment, we’ll create the webhook that listens for that event and returns an error count event aserror_count
. The firmware listens for that response witherrorCountHandler
, which checks if it’s greater than some threshold, and starts the bin on fire.
To get it all working, I added my TrackJS customerID, API Key, application key, and maximum error threshold to the firmware. You can get this all from yourTrackJS account).
The Webhook
The webhook runs in the Particle cloud and glues our device Firmware to the TrackJS API. Specifically, it listens for theget_error_count
event from the firmware and makes an HTTPS request to the TrackJS API with the data provided. It parses out thetotalCount
of errors returned and fires it back to the firmware as anerror_count
event.
There’s a UI to create the webhook in the Particle Console, but it’s a lot easier to just push the configuration to your account with the Particle API.
{ "event": "get_error_count", "responseTopic": "error_count", "errorResponseTopic": "error_count_fail", "integration_type": "Webhook", "url": "https://api.trackjs.com/{{{customerId}}}/v1/errors/", "requestType": "GET", "headers": { "Authorization": "{{{apiKey}}}" }, "query": { "size": "1", "startDate": "{{{startDate}}}", "endDate": "{{{endDate}}}", "application": "{{{application}}}" }, "noDefaults": true, "responseTemplate": "{{{metadata.totalCount}}}" }
Once the webhook started running and the device booted, I saw a stream of events coming into my Particle console.
And the dumpster started on fire. Burn baby burn.
This was a fun project from Kristina Durivage. We integrated an important feed of information fromTrackJS about our production errors into a wonderfully funny real-world alert. If you’d like to build your own dumpster fire, let us know! All the links and code is available, linked from this post.
Top comments(0)
Some comments may only be visible to logged-in visitors.Sign in to view all comments.
For further actions, you may consider blocking this person and/orreporting abuse