https://github.com/fouad/recall

Simple library for tracing in JavaScript with Google's Trace Event.
https://github.com/fouad/recall

debugging-tools performance tracing

Last synced: 3 months ago
JSON representation

Simple library for tracing in JavaScript with Google's Trace Event.

• Host: GitHub
• URL: https://github.com/fouad/recall
• Owner: fouad
• License: mit
• Created: 2018-10-06T22:53:28.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-07T03:57:56.000Z (over 6 years ago)
• Last Synced: 2024-11-24T06:07:22.518Z (3 months ago)
• Topics: debugging-tools, performance, tracing
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/recall
• Size: 48.8 KB
• Stars: 3
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        


  





  Simple library for tracing JavaScript


  with Google's Trace Event.








  

    

  

  

    

  






### Getting Started

#### Installation

Install with npm:

```shell

npm install --save recall

```

Or with yarn:

```shell

yarn add recall

```

#### Examples

```javascript

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

```javascript

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

```javascript

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](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview).

### Contributing

All contributions are welcome! `recall` is [MIT-licensed](./license).