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

bash

npm install @accitdg/axios-tracing





Usage



$3

javascript

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



const api = createAxiosInstance({

  baseURL: "https://api.example.com",

});

$3

javascript

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",

});

$3

javascript

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



export const axiosInstance = createAxiosInstance({

  baseURL: YOUR_GATEWAY_URL,

  getToken: () => YOUR_TOKEN,

});





API Reference



$3



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



$3



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

javascript

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



  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

Installation

bash
npm install @accitdg/axios-tracing

Usage

$3

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

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

$3

javascript
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",
});

$3

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

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

API Reference

$3

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:

-

: Bearer token (when token is available)
-

: Browser information (name, version, device type)
-

: Unique UUID for request tracing

Error Dialog Component

$3

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

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

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;