axios-tracing

A customized Axios instance with automatic browser tracking, tracing, and token management - by Allcard Tech @2025

Features

• Automatic browser detection and tracking
• Request tracing with UUID
• Token management
• Content-type handling
• Built-in interceptors

Installation

npm install @accitdg/axios-tracing

Usage

Basic Usage

import createAxiosInstance from "@accitdg/axios-tracing";

const api = createAxiosInstance({
  baseURL: "https://api.example.com",
});

With Token Management

import createAxiosInstance from "@accitdg/axios-tracing";

// Example token getter
const getToken = () => YOUR_TOKEN;

const api = createAxiosInstance({
  baseURL: "https://api.example.com",
  getToken,
  contentType: "application/json",
});

With Environment Variables (Vite Example)

import createAxiosInstance from "@accitdg/axios-tracing";

export const axiosInstance = createAxiosInstance({
  baseURL: YOUR_GATEWAY_URL,
  getToken: () => YOUR_TOKEN,
});

API Reference

createAxiosInstance(options)

Creates a configured axios instance with tracking and token management.

Options

| Parameter | Type | Default | Description | | ----------- | -------- | ------------------ | --------------------------- | | baseURL | string | '' | Base URL for all requests | | getToken | function | null | Function that returns token | | contentType | string | 'application/json' | Default Content-Type header |

Added Headers

The instance automatically adds these headers to requests:

• Authorization: Bearer token (when token is available)
• x-browser-details: Browser information (name, version, device type)
• x-trace-id: Unique UUID for request tracing

Error Dialog Component

StandardErrorDialog

Display error messages with trace IDs and support contact information.

Props

| Prop | Type | Required | Description | | --------------- | -------- | -------- | --------------------------------------------- | | open | boolean | Yes | Controls dialog visibility | | onClose | function | Yes | Callback when dialog is closed | | customErrorCode | string | No | HTTP error code (e.g., "503") | | traceId | string | No | Unique trace ID for error tracking | | supportEmail | string | No | Support contact email | | reportBtnFn | function | Yes | Callback Fn for click the report issue button | | theme | muiTheme | No | Theme for customizations | | customTitle | string | No | Modal title for error modal | | isReported | boolean | Yes | To show "Issue Reported" prompt | | isReporting | boolean | Yes | Disables the report button |

Example Usage

import { StandardErrorDialog } from "@accitdg/axios-tracing";

<StandardErrorDialog
  onClose={handleCancel}
  open={open}
  reportBtnFn={() => {
    handleButtonClick();
  }}
  customErrorCode={customErrorCode}
  isReported={isSuccess}
  isReporting={isPending}
  supportEmail={ENV.connectAllcardEmail}
  traceId={traceId}
  theme={theme}
  customTitle="YOUR_CUSTOM_TITLE"
/>;

export default MyComponent;

Dependencies

• "@fontsource/montserrat": "^5.2.6"
• "@fontsource/roboto": "^5.2.6"
• "@fontsource/sora": "^5.2.6"
• "@mui/material": "^7.1.1"
• "axios": "^1.9.0"
• "prop-types": "^15.8.1"
• "react": "^19.1.0"
• "ua-parser-js": "^2.0.6"
• "uuid": "^13.0.0"

License

© Allcard Tech 2025