Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@kano/kbc-telemetry
Advanced tools
Telemetry module for boilerplate apps, using react-tracking
. For more information, see NYTimes React Tracking.
kbc-telemetry also handles when the application goes offline, and refreshes the session (default: set to 1 minute interval checks and ends session after 10 minutes of inactivity).
Import and use TelemetryProvider component as a wrapper for your app:
import { TelemetryProvider } from '@kano/kbc-telemetry';
Wrap your app in <TelemetryProvider>
(this should be the top level wrapper) and pass config information. Also to recieve the start of session event and to create your session_id
you will need to pass the trackUser
function as props to your App component. If the app is user-less, you can set this to null
on app first load.
const config = {
app: app.name,
appVersion: app.version
url: app.url,
env: app.env
interval: 10000 // How frequently you want the telemetry data sent to your database
sessionTimeout?: number in milliseconds; // Optional
refreshInterval?: number in milliseconds; // Optional
}
render() {
return (
<TelemetryProvider config={config}>
{(trackUser) => (
<App trackUser={(userId) => trackUser(userId)} />
)}
</TelemetryProvider>
);
}
Tracking data can be sent in multiple ways:
Either on component level or at method level.
import { track } from '@kano/kbc-telemetry';
@track({ event: 'name_of_your_event' })
class MyComponent extends Component {
@track({ event: 'I_did_something', action: 'click' })
handleSomething() {
// I run something
}
}
Above shows the initial parameter as an object. But it can also be sent as a function, which accesses 3 parameters component props
, component state
, function arguments as an array, for example:
@track((props, state, args) => ({ event: props.event, data: { something: state.something, args: args[0] } })
handleSomething(iAmArgsZero) {
// I run something
}
For decorators, there are explict fields that can be set as follows:
Decorator | Field Options |
---|---|
@track() | event?: String data?: Any action?: String module?: String userId?: String page?: String |
@trackError() | error: { name: String, stack: String, message: String } |
You can also use as props: this.props.tracking.trackEvent({})
. This currently doesn't enforce the field options above.
To use tracking in props, the component must be either exported by wrapping it in track()
, as follows:
import { track, ITrackingProps } from '@kano/kbc-telemetry';
const FooPage = (props: ITrackingProps) => {
return <div onClick={() => props.tracking.trackEvent({ action: 'click' })} />;
}
export default track({
page: 'FooPage',
})(FooPage);
Wrapped in a decorator:
import { track, ITrackingProps } from '@kano/kbc-telemetry';
@track({ page: 'MyComponent' })
class MyComponent extends Component<any, ITrackingProps> {
handleSomething() {
this.props.tracking.trackEvent({ event: 'i_handle_something' })
}
}
Currently trackError
can only be used as a decorator. See below and see field options in the table above.
@trackError({ error: { name: 'handle_error', stack: 'stack', message: 'message' } })
handleError() {
// I handle an error
}
If you want to track errors using props, you can follow the same principles as above (using trackEvent
as the function):
handleSomething() {
this.props.tracking.trackEvent({ error: { name: 'handle_error', stack: 'stack', message: 'message' } })
}
FAQs
Telemetry module for boilerplate apps, using react-tracking
The npm package @kano/kbc-telemetry receives a total of 9 weekly downloads. As such, @kano/kbc-telemetry popularity was classified as not popular.
We found that @kano/kbc-telemetry demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 17 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.