DEV Community


Posted on • Updated on

Senstate - Make sense of your state while debugging

Having sometimes multiple console.logs while trying to find a bug that only happens with a weird state, you kinda get lost scrolling the log up and down. Or adding a bunch of break-points and then stepping into multiple ones. In the past years this happened quite often to me, and last month I thought it needs be easier to debug / see important variables while working on your project.

Fast forward until today.

Example Senstate Gif

Senstate "Debug" Dashboard

🎊 Introducing @senstate/cli 🎉

The cli acts as an hub to accept client-events (via WebSockets) and send them to the dashboard.

Current features:

  • watch variables / state of your application
  • send logs
  • send errors
  • open dashboard via qr-code on a phone / tablet (to free up a monitor/space)

Current available client libraries:

more libraries in progress:

Add it to your project

1. Install the client

npm install @senstate/client contains the utils / methods, not actually sending anything to the hub

npm install @senstate/client-connection is used to send the data to the hub. I wanted to have it separately if for example it would send to other hubs / or different protocols.

2. Register your app:

import {setSenstateConnection} from "@senstate/client-connection";

  name: 'My Example App',
  // appId: 'customShortId' optional
}  /* , ws://localhost:3333 */); // custom hub-address, working locally you won't need to change the target address

Without calling setStenstateConnection all watchers/senders won't send anything to the Dashboard.

3. Low-Level Watcher / Senders

You can create a sender and call it how often you like to push the values to the Dashboard:

Watch (for variables): Sends a value of a tag:

const watcher = createWatchSender("myTag");

watcher(yourVariableOrValueToSend) // where you need it


const logger = createLogSender(LogLevel.Info, "optional log name")

logger("message to send", {optionalObject: 'can be empty :)'})


Un-caught window errors will be send to the hub with:
registerWindowErrorHandler() (call once)

You can use the senders above, but there is also some code-candy 🍭

4. Field decorators

Automatically sends the value on a change to the hub 🎉

class YourClass {
  public watchProperty = 0;

  public watchOtherProperty = 0;

5. RXJS pipes

import { SenstateOperators } from '@senstate/client';

myObservable$.pipe('Watcher Tag'), // Watcher

   SenstateOperators.log('Log Name')

// Measure time between pipe-operators
const time = new TimeMeasurer(tag);

   mergeMap(() => longerObservableExecution$),

🚧 Whats next?

The project is still WIP, but I hope it'll help you.

The Dashboard isn't that polished yet, but I'm sure it'll be better after a few iterations.

If there are any ideas / feature requests / issues, please tell me :)

Top comments (0)