Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for A Dumpster-Fire Alert for Your JavaScript Errors
TrackJS profile imageTodd H. Gardner
Todd H. Gardner forTrackJS

Posted on • Originally published attrackjs.com on

     

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.

Dumpster Hardware

The Firmware

We need to load some firmware on our Photon device. Luckily, Kristina left me some detailed notes on cat stationary.

Kristina's Instructions

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.

Dumpster Firmware

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}}}" }
Enter fullscreen modeExit fullscreen mode

Once the webhook started running and the device booted, I saw a stream of events coming into my Particle console.

Dumpster Polling Events

And the dumpster started on fire. Burn baby burn.

Dumpsterfire in action


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)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Some comments may only be visible to logged-in visitors.Sign in to view all comments.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

JavaScript Error Tracking

What to buildbetter web applications? TrackJS helps you understand how systems fail.

More fromTrackJS

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp