@sanity/telemetry
Utils for collecting telemetry data from Sanity CLI and Sanity Studio
Usage
Track a one-off event
import {defineEvent} from '@sanity/telemetry'
const ExampleEvent = defineEvent<{foo: string}>({
name: 'Example Event',
version: 1,
})
telemetry.log(ExampleEvent, {foo: 'bar'})
Track a group of events in a trace
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
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<TraceData>(ExampleTrace)
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) {
trace.error(error)
}
Trace promise helper
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:
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:
trace.await(performSomeAction(), {
foo: 'this will be logged when the action completes',
})
Trace contexts
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.
const trace = telemetry.trace(QueryCommand)
if (!loggedIn) {
await login({telemetry: trace.newContext('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.
Configuration
The telemetry store needs a single point of configuration for the environment/runtime
Browser
import {createBatchedStore, createSessionId} from '@sanity/telemetry'
const sessionId = createSessionId()
const store = createBatchedStore(sessionId, {
flushInterval: 30000,
resolveConsent: () => {
},
sendEvents: (events) => {
},
sendBeacon: (events) => {
},
})
const unregister = registerLifecycleEvents(store)
React
import {createBatchedStore, createSessionId} from '@sanity/telemetry'
const sessionId = createSessionId()
const store = createBatchedStore(sessionId, {
flushInterval: 10000,
resolveConsent: () => {
},
sendEvents: (events) => {
},
sendBeacon: (events) => {
},
})
function Root() {
return (
<TelemetryProvider store={store}>
<App />
</TelemetryProvider>
)
}
function App() {
const telemetry = useTelemetry()
const handleClick = useCallback(() => {
telemetry.log(SomeEvent, {foo: 'bar'})
}, [])
return (
<button onClick={handleClick}>Click me</button>
)
}
Node.js/CLI
import {createBatchedStore, createSessionId} from '@sanity/telemetry'
const sessionId = createSessionId()
const store = createBatchedStore(sessionId, {
flushInterval: 30000,
resolveConsent: () => {
},
sendEvents: (events) => {
},
})
process.on('beforeExit', async () => telemetryStore.end())
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.