Tracing

AGIFlow js-sdk support both manual and automatic tracing. Automatic tracing is great to get started but if you need fine-grain control of tracking tag and grouping, manual tracing is a better option.

Automatic Tracing

To enable automatic tracing, add additional setting when intialise SDK liked below:

agiflowClient.init('<CLIENT_KEY>', {
  autoTrace: true,
});

When autoTrace is enabled, we will wrap global fetch request and send x-agiflow-trace-id and x-agiflow-auto-trace headers to backend.

Manual Tracing

Similar to other analytics tools, Agiflow provides track method to collect useful user metrics on frontend. We take this approach to the next level by allowing you to associate frontend-metrics to backend traces by passing specific headers to backend API. See below for different ways of doing this:

As an application expert, you might already design your system in a way that make it easy to identify particular task. By using manual tracking, you can eliminate guessing error and make your metric more relevant to your target users task.

Simply use the following snippet to get started:

Async Tracking

If you want to automatically capture dom mutation and display it to user when collecting feedback, wrap your tracking within trackAsync method liked below.

const res = await agiflowClient.trackAsync(
    'summary', // A defined task name
    async (actionId, headers) => {
    return await fetch(`...`, {
        headers,
    });
    },
);

Here is a quick explaination of trackAsync function:

• First argument is the label of a task.
• The callback function generated the unique action id and headers with x-agiflow-trace-id which will pass to backend for E2E tracing. (action id can be used to collect inline user feedback.)

Synchronous Tracking

If you don't want to wrap your API call in a callback; or your dom mutation happens sometime later after api return. Use track method and manually call completeAction to capture dom mutation.

const { headers, actionId } = agiflowClient.track('summary');
await fetch(`...`, {
    headers,
});
agiflowClient.completeAction(actionId);

Here is a quick explaination of track function:

• First argument is the label of a task.
• The track function return action id and headers with x-agiflow-trace-id which will pass to backend for E2E tracing. (action id can be used to collect inline user feedback.)
• If you want to capture dom mutation, call completeAction with action id

Complete a task

As described in Feedback workflow, you can explicitly mark a task as completed by user by calling completeTask method.

This will make it easier to understand how your user interact with AI products or provide more context for feedback later on.

agiflowClient.completeTask(
    'summary', // A defined task name
);