Having sometimes multiple console.log
s 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.
🎊 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:
- C#
- Kotlin (by 🔗 dnaka91)
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";
setSenstateConnection({
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
Log
const logger = createLogSender(LogLevel.Info, "optional log name")
logger("message to send", {optionalObject: 'can be empty :)'})
Errors
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 {
@PropertyWatcher()
public watchProperty = 0;
@PropertyWatcher('otherKey')
public watchOtherProperty = 0;
}
5. RXJS pipes
import { SenstateOperators } from '@senstate/client';
myObservable$.pipe(
SenstateOperators.watch('Watcher Tag'), // Watcher
)
other$.pipe(
SenstateOperators.log('Log Name')
)
// Measure time between pipe-operators
const time = new TimeMeasurer(tag);
trigger$.pipe(
SenstateOperators.measureStart(time),
mergeMap(() => longerObservableExecution$),
SenstateOperators.measureStep(time)
)
🚧 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)