@awesome-logger/client v1.0.2
Client Package
The client package is a powerful and flexible component of the Awesome Logger project, designed to simplify logging for client-side applications. It offers a plugin-based architecture and built-in support for common reporting fields, making it an ideal choice for diverse scenarios and effective user issue troubleshooting.
Features
- Plugin-Based Architecture: Easily extend functionality by integrating plugins for various logging needs.
- Built-In Reporting Fields: Automatically includes common fields like
release,env, anduidfor consistent and comprehensive logs. - Multi-Level Logging: Supports
info,warn, anderrorlevels for granular log management. - Configurable Outputs: Flexible options for output formats and destinations.
- Seamless Ecosystem Integration: Works effortlessly with the Awesome Logger ecosystem.
Installation
Install the client package along with its dependencies using the following command:
npm install @awesome-logger/client @awesome-logger/core @awesome-logger/plugin-slsBuilt-In Fields
The client package automatically includes the following built-in fields in every log, ensuring comprehensive and standardized logging:
| Field | Type | Description |
|---|---|---|
uid | string | number | User's unique identifier |
release | string | Frontend application version |
env | string | Environment: local, pre, prod |
type | string | Log type: info, warn, error |
key | string | Log key to identify a log record |
data | Record<string, any> | Data associated with the log key |
ua | string | Browser's user agent information |
url | string | Current page URL |
os | string | Operating system of the device |
osVersion | string | Operating system version |
traceId | string | UUID for tracing issues across systems |
sessionId | string | Session ID for grouping logs within a session |
browser | string | Browser name: Chrome, Safari, etc. |
browserVersion | string | Browser version information |
device | string | Device type: phone, desktop, etc. |
clientTime | string | number | Client-side timestamp |
Usage
Below is an example demonstrating the ease of use and powerful capabilities of the client package with the sls plugin:
import Client from '@awesome-logger/client';
import { Logger } from '@awesome-logger/core';
import { SLSLogPlugin } from '@awesome-logger/plugin-sls';
// create logger
const logger = new Logger({
uid: 'test_user_1',
release: '1.0.0',
env: 'production',
});
// Configure base fields for all logs
const client = new Client(logger);
// you can also use logger.setBaseField function for some async scene
logger.setBaseField({ uid: 'user_001' });
// Register the Alibaba Cloud SLS plugin
const slsPlugin = new SLSLogPlugin({
endpoint: 'your-sls-endpoint',
accessKeyId: 'your-access-key-id',
accessKeySecret: 'your-access-key-secret',
project: 'your-project',
logstore: 'your-logstore'
});
client.usePlugin(slsPlugin);
// Log an informational message
client.info('enter_home_page', { page: 'home' });
// Log a warning
client.warn('api_timeout', { latency: 500 });
// Log an error
client.error('api_fail', { errorCode: 500, endpoint: '/api/data' });Documentation
For detailed documentation and advanced usage, please refer to the main project README.
Contributing
We welcome contributions! Please follow the guidelines outlined in the main project repository.
License
This package is licensed under the MIT License. See the LICENSE file for details.