Utils for collecting telemetry data from Sanity CLI and Sanity Studio
npm install @sanity/telemetryUtils for collecting telemetry data from Sanity CLI and Sanity Studio
``typescript
import {defineEvent} from '@sanity/telemetry'
const ExampleEvent = defineEvent<{foo: string}>({
name: 'Example Event',
version: 1,
})
telemetry.log(ExampleEvent, {foo: 'bar'})
`
A trace represents a long-lived action/task that has discrete steps and that may eventually complete or fail
A trace is useful for e.g.:
- Logging how long time a particular action takes
- Logging different events that occurs while the user is performing a certain task (e.g. search)
A trace may complete or fail or never complete at all. Trace events are submitted continuously as they happen, at the
configured flushInterval
`typescript
import {defineTrace} from '@sanity/telemetry'
const ExampleTrace = defineTrace({
name: 'Example Trace',
version: 1,
})
type TraceData = {
step: 'before-action' | 'after-action' | 'after-other'
}
const trace = logger.trace
// mark the beginning of the trace
trace.start()
try {
trace.log({step: 'before-action'})
await performSomeAction()
trace.log({step: 'after-action'})
await doSomeOtherAction()
trace.log({step: 'after-other'})
trace.complete()
} catch (error) {
// mark the trace as failed
trace.error(error)
}
`
As an alternative, you can also use the await helper to automatically mark the trace as completed or failed when
the promise resolves or rejects:
`typescript`
async function performSomeAction() {
//…
}
const trace = logger.trace(exampleTrace)
const res = trace.await(performSomeAction())
This will return the same promise as performSomeAction(), but the trace will be marked as completed or failed when the promise resolves or rejects. It will call trace.start() immediately, and will log the value the promise resolves to, or the error it rejects with. To specify a custom data to log, pass it as the second argument:
`typescript`
trace.await(performSomeAction(), {
foo: 'this will be logged when the action completes',
})
When logging events from an application, it can be useful to know more about the context of which a particular method or component has been called. Usually, an application comprises re-usable functions and components that's called from several entry points. For example, a login() helper function that logs in the current user may be invoked by both the query command and the init command. The login() function should remain agnostic about who invoked it, and be able to log telemetry events without having to attach this contextual information. To help with this, trace.newContext() returns a new TelemetryLogger interface that encapsulates this information to the event data that gets logged. This TelemetryLogger instance can then be passed on as the telemetry logger to the login() method, and in effect make the contextual information completely transparent for the login() method.
`ts
// query command
// create a trace for login
const trace = telemetry.trace(QueryCommand)
if (!loggedIn) {
await login({telemetry: trace.newContext('login')})
}
//…
`
`ts
// init command
// create a trace for login
const trace = telemetry.trace(InitCommand)
if (!loggedIn) {
await login({telemetry: trace.newContext('login')})
}
//…
`
Now, the login() method only sees a telemetry value that implements TelemetryLogger, and doesn't need to know anything about its context. The login() helper itself may also branch out to other helpers, creating new contexts for functions re-used across the application.
The telemetry store needs a single point of configuration for the environment/runtime
`typescript
import {createBatchedStore, createSessionId} from '@sanity/telemetry'
const sessionId = createSessionId()
const store = createBatchedStore(sessionId, {
// submit any pending events every 30s
flushInterval: 30000,
// implement user consent resolving
resolveConsent: () => {
//…
},
// implement sending events to backend
sendEvents: (events) => {
//…
},
// opt into a different strategy for sending events when the browser close, reload or navigate away from the current page (optional)
sendBeacon: (events) => {
//…
},
})
// This makes sure that the browser flushes any pending events before the user navigates away
// This should only be called once
// if you wish to unregister lifecycle listeners later on, (e.g. in a React hook's cleanup), you can do so by calling unregister()
const unregister = registerLifecycleEvents(store)
`
`typescript jsx
import {createBatchedStore, createSessionId} from '@sanity/telemetry'
const sessionId = createSessionId()
const store = createBatchedStore(sessionId, {
// submit any pending events every 30s
flushInterval: 10000,
// implement user consent resolving
resolveConsent: () => {
//…
},
// implement sending events to backend
sendEvents: (events) => {
//…
},
// opt into a different strategy for sending events when the browser close, reload or navigate away from the current page (recommended)
sendBeacon: (events) => {
//…
},
})
// Wrap the app in a TelemetryProvider
// This will enable usage of the useTelemetry() hook for descendants
function Root() {
return (
)
}
// Usage in a component
function App() {
const telemetry = useTelemetry()
const handleClick = useCallback(() => {
// Call the log method to log a one-off event
telemetry.log(SomeEvent, {foo: 'bar'})
}, [])
return (
//…
)
}
`
`typescript
import {createBatchedStore, createSessionId} from '@sanity/telemetry'
const sessionId = createSessionId()
const store = createBatchedStore(sessionId, {
// submit any pending events every 30s
flushInterval: 30000,
// implement user consent resolving
resolveConsent: () => {
//…
},
// implement sending events to backend
sendEvents: (events) => {
//…
},
})
// Make sure to send collected events before exiting the application
process.on('beforeExit', async () => telemetryStore.end())
// Start logging events
store.logger.log(ExampleEvent, {foo: 'bar'})
`
The store returns a logger object, that application code can use for logging telemetry events or traces by calling the .log() or .trace()` methods
defined on it.