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 @allcardtech/axios-tracing

Usage

Basic Usage

import createAxiosInstance from '@allcardtech/axios-tracing';

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

With Token Management

import createAxiosInstance from '@allcardtech/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 '@allcardtech/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 |

Example Usage

import { StandardErrorDialog } from '@allcardtech/axios-tracing';


  <StandardErrorDialog
    open={isApiError}
    onClose={() => handleOnClose()} 
    customErrorCode="CUSTOM_ERROR_CODE"
    traceId="YOUR_TRACE_ID"
    supportEmail="YOUR_SUPPORT_EMAIL"
  />

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