@awesome-logger/client

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, and uid for consistent and comprehensive logs.
• Multi-Level Logging: Supports info, warn, and error levels 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-sls

Built-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.