@bettercode/react-tracer v0.2.1

@bettercode/react-tracer

React Component Event Tracer

Install

# Using npm
npm install --save @bettercode/react-tracer

# Using yarn
yarn add @bettercode/react-tracer

Configure

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

import * as BetterTracer from '@bettercode/react-tracer'
BetterTracer.init({
  dsn: 'http://localhost:8080'
})

ReactDOM.render(<App />, document.getElementById('root'))

BetterTracer init Method Args

Usage

ButtonTracer

Use to wrap the tracing target button.

import React from 'react'
import {ButtonTracer} from '@bettercode/react-tracer'

const App = () => {
  //...
  return <>
    <ButtonTracer tracingId={1} additionalInformation={{memberId: 1}}>
      <button onClick={handleClick}>Test Button</button>
    </ButtonTracer>
  </>
}

export default App

HeroTracer

Use to wrap the tracing target hero banner

import React from 'react'
import {HeroTracer} from '@bettercode/react-tracer'

const App = () => {
  // ...
  return <>
    <HeroTracer tracingId={1} targetElementAttribute='alt'>
      <Banner>
        <section>
          <ButtonBase onClick={handleClick}>
            <img
              src="http://example.com/testimg1.jpg"
              alt='Hero Banner 1'
            />
          </ButtonBase>
        </section>
        <section>
          <ButtonBase onClick={handleClick}>
            <img
              src="http://example.com/testimg2.jpg"
              alt='Hero Banner 2'
            />
          </ButtonBase>
        </section>
      </Banner>
    </HeroTracer>
  </>
}

export default App