Mobile debuggers

2 minute read

When implementing analytics on mobile apps it’s hard to know if the events are being sent successfully or not, and if they are being sent at the correct time.

Our Mobile Debuggers provide a visual way to control the events flow in your app, making implementing analytics way easier and pleasant in mobile products.

They are distributed as a standalone open source libraries and are designed to be plugged in the Avo generated code. Each Avo function will automatically show events in the debugger with timestamp and all the properties. If Avo detects errors the mobile debugger will highlight those.

How does it look

React native debugger example

Here is a demonstration of the mobile debugger in a simple music player app.


AndroidiOSReact Native
Android debugger exampleiOS debugger exampleReact native debugger example

The debugger have 2 visual presentation modes - bubble and bar. Both are draggable, so you can place them at a suitable spot in your app. You can switch between presentation mods without loosing the data.

Avo functions are triggered when player buttons are pressed and the events are shown in the Mobile Debugger. If an error event is registered the debugger will turn red.

When the Mobile Debugger is clicked another screen opens with the list of all the events. Each event can be collapsed or expended to see the properties and error descriptions.

Note:
Source code of the app for each supported platform can be found in the git repositories.

How to enable the debugger

The following pseudocode would give you the idea, head to platform docs for specific integration instructions.

  1. Create the debugger

    JavaScript
    Copy
    1
    val debugger = Debugger()
  2. Pass the debugger when you initialize Avo

    JavaScript
    Copy
    1
    Avo.initAvo(Avo.AvoEnv.DEV, debugger)
  3. Show the debugger

    JavaScript
    Copy
    1
    debugger.showDebugger(this, DebuggerMode.bar)
  4. Pass debugger to Avo, so Avo can show all tracked events

    JavaScript
    Copy
    1
    Avo.initAvo(AvoEnv.DEV, myCustomDestination, debugger)
  5. Post your own events

    JavaScript
    Copy
    1
    2
    3
    4
    5
    6
    7
    debugger.post(
    timestamp,
    "EventName",
    errors: [{propertyId:"id0", message:"error in property 'event prop' with id 'id0'"}],
    eventProperties: [{id:"id0", name:"event prop", value:"val"}],
    userProperties: [{id:"id1", name:"user prop", value:"val"}]
    );

Platform specific repositories and integration docs

We store platform docs in the corresponding github repositories.