Getting Started

Installation

Install with npm:

npm install --save recall

Or with yarn:

yarn add recall

Examples

import { Tracer } from 'recall'

const trace = new Tracer()

trace.begin('app.render')
trace.begin('app.fetchData')

// Start fetching data, while the rest of the app tries to render
trace.end('app.render')
trace.end('app.fetchData')

// Time the re-render with data
trace.begin('app.render.withData')
trace.end('app.render.withData')

// Log as a table
console.table(trace.table())

Usage

Generating a trace event

import { Tracer, getEvent } from 'recall'

const trace = new Tracer()

// You can either use a string as your message
// with optional properties to add context
trace.begin('myapp.some-random.eventName', {
  variant: 'A'
})

// Or you can pass in an `analytics-event` compatible object
trace.end({
  name: 'myapp.some-random.eventName',
  props: {
    variant: 'A'
  }
})

// Or you can manually generate the event
trace.push(
  getEvent({
    type: 'end',
    name: 'myapp.some-random.eventName',
    props: {
      variant: 'A'
    }
  })
)

Logging the trace

import { Tracer } from 'recall'

const trace = new Tracer({
  flush: async record => {
    await fetch('/api/traces', {
      data: JSON.stringify(record),
      method: 'post',
      headers: {
        'content-type': 'application/json'
      }
    })
  }
})

trace.begin('http.request.1')
trace.begin('http.request.2')

trace.end('http.request.1', {
  httpRequest: {
    statusCode: 200
  }
})

trace.end('http.request.2', {
  httpRequest: {
    statusCode: 500
  }
})

// When you're ready to send the trace
trace.complete()
// Or if the user navigates off the page
window.onbeforeload = () => trace.cancel()

Frequently Asked Questions

What is Google Trace Event?

The Google Trace Event Format is a data representation that is processed by the Google Trace Viewer application. These are the same events that are used in Google Chrome and Node.js tracing. You can read more here.

Contributing

All contributions are welcome! recall is MIT-licensed.