This article was originally published at: github.com/bigo-fronte… Welcome to follow and reprint.

background

In order to cope with Chrome’s limitations on Flash playback, we carried out a reconstruction of Bigo Live official website in 2020, changing the original Flash Live broadcast to HTML5 playback, and transforming a project that was originally a front-end and back-end coupling project into a nuxt-based server rendering project. Because they depend on a node server rendering the background page rendering, therefore, ensure that the background can be successfully completed page assembly, not in the project operation stage error is crucial, in order to understand the operation situation of node backstage test run the health status of the background, projects using several logging methods, easy to observe the operation of the project. Since there are not many articles about Nuxt project logging, I would like to make a record and share with you some better logging methods

1. Use PM2 logs

The project uses PM2 for process management, and PM2 has its own complete log function. When viewing PM2 logs, the logs can be loaded in real time with the project running, and PM2 will automatically handle the division and integration of logs, so we can understand the running status of the program by observing PM2 logs.

View logs:
Pm2 logs --linesCopy the code

By default, 15 lines are displayed in PM2 logs. If the log content cannot be viewed in 15 lines, run –lines to set the number of lines to be viewed.

Configure the timestamp and log storage location

The PM2 log printing time is not recorded by default, but the log printing time is very important for scheduling faults. You can modify the configuration to add the timestamp and change the log location:

Module. exports = {apps: [{name: 'app', args: 'start', time: true, // Error_file: '. / err. Log ', / / the error log store address out_file: ')/out) the log ', / / output log store address}};Copy the code

In this way, logs can be stored in the specified location, and the printed logs have corresponding time stamps.

The PM2 log system does not have the functions of automatic log compression and log expiration clearing. Therefore, you need to use the plug-in PM2 – Logrotate to store and manage logs. For details, see here.

PM2 logs display content similar to command line output during development. Errors of programs and the console running in the background are also saved in PM2 logs. If an error occurs during program running, it can be found in the PM2 error log. The PM2 log displays the error stack and specific command lines, which is helpful for troubleshooting.

Sometimes you need to customize specific log information. For example, you can use nuxt-Winson-log to record logs when a request fails.

Print logs using nuxt-winson-log

Nuxt-winson-log is a log printing tool recommended by the NuxT community. The Nuxt version is based on the log printing artifact Winston. Note that nuxt-Winson-log supports log printing only on the server. Therefore, use it in a different operating environment.

Nuxt-winson-log prints a log by default when there is an access. You can customize the log name, storage location, and log classification. Different log levels have different file names. You can set the number of log files, the maximum size of a single file, etc.

Change the saving location of logs

The default save path for nuxt-winson-log is the logs folder under the current folder. Modify the configuration to save logs in a different path:

// nuxt.config.js export default {modules:[' XXXX other modules', [' nuxt-Winston-log ', {logPath: process.env.npm_lifecycle_event === 'build' || process.env.NODE_ENV === 'development' ? './logs' : `/data/weblog/nodejs/${process.env.npm_package_name}`, logName: `${process.env.npm_package_name}.log` } ] ] }Copy the code

Distinguishes between development and production log directories. Use npM_lifecycle_event and NODE_ENV instead of process.env.node_env === ‘production’ because process.env.node_env is also production during the build process, It is possible that the build failed because the log directory is not available on the build machine.

Log classification and log storage management

There are two types of logs: daily logs (INFO) and error logs. By default, nuxt-Winson-log stores both types of logs in the same log file. You can configure the two types of logs to be typed into different log files.

// nuxt.config.js import path from 'path'; import { format, transports } from 'winston'; const { combine, timestamp } = format; // Log path const infoLogPath = path.resolve(process.cwd(), './logs', 'info.log'); const errorLogPath = path.resolve(process.cwd(), './logs', `error.log`); export default { modules: ['nuxt-winston-log'], winstonLog: { loggerOptions: { transports: [ new transports.File({ format: combine(timestamp()), level: 'info', filename: infoLogPath, maxsize: 5 * 1024 * 1024, // Single log File size maxFiles: 3 // maximum File size}), new Transports.File({format: combine(timestamp()), level: 'error', filename: errorLogPath, maxsize: 5 * 1024 * 1024, maxFiles: 3 }) ] } }, }Copy the code

If the two log files are not generated during startup, you can check whether the specified save path exists. Error logs printed with $winstonlog. error and request exception logs will go to the “error” level of the code, and logs printed with $winstonlog. info and normal request logs will go to the” info” log. A log file with an incremented file name is automatically generated. If the number of log files exceeds the configured number, the old log files will be deleted automatically.

Log in axios

Because interface in the node end by asking if 500 is lead to return an error page, so do try… In addition to catch, the success and logging of the interface is also required.

// plugins/axios.js export default ({ $axios, $winstonLog}) => {$axios.onResponse((response) => {// $winstonLog exists only on server side, If ($winstonLog) {$winstonlog.info (' [${response.status}] ${response.request.path} '); } return response.data; }); $axios.onError((err) => { if ($winstonLog) { $winstonLog.error( `[${err.status}] | ${err.request.path} | ${err.message}` ); $winstonLog.error(err.response && err.response.data); }}); };Copy the code

Create a new axios.js plugin in the plugins folder, and type in the info log for normal requests and the error log for error requests.

@bigo/ Node-log +Clickhouse+Grafana build log monitoring platform

The problem of the above two log printing methods is that when you need to view project logs, you need to go to the corresponding machine and manually view the corresponding logs. If too many machines are deployed, it is undoubtedly a laborious task to view the logs. Based on our Clickhouse cluster +Grafana, we developed our own reporting tool, @Bigo/Node-log, to create a real-time log monitoring platform.

@Bigo/Node-log Supports data reporting of both eggJS and NUXT frameworks. Data reporting is supported not only from the back end, but also from the front end and both the front and back ends. Clickhouse is a columnar storage database with tens of times the performance of existing databases on the market, so it is often used in cloud computing, big data and other scenarios. Real-time data queries are well supported. Grafana is a real-time data presentation tool that supports multiple data sources and has multiple data presentation models. It can be used to visualize the real-time data collected. In addition to displaying the data, it can also be used to monitor and alarm regularly.

@bigo/node-log:

/ / {app_root} / nuxt. Config. Js modules: [[' @ bigo/node - log, {name: 'bigo. TV / / application name}]]Copy the code

Reported Examples:

// Vue Component Mounted () {this.$log.error('nuxt test ', {MSG: '6666'}); } // nuxt SSR async asyncData({$log}) {$log.error('asyncData test ', {MSG: '6666'}); }Copy the code

The log monitoring platform implemented by @bigo/ Node-log +Clickhouse+Grafana is as follows:

An alarm is configured on each monitoring chart. If an error reaches the threshold, an alarm is triggered on the wechat account of the enterprise. The alarm is monitored continuously for 24 hours, which improves the stability of project operation and ensures that the running status of the project can be checked in real time.

The above are the log reporting methods used in our project. If there are other better reporting methods, welcome to communicate with us

Reference article: PM2-logs Aaronransley/NuxT-Winston -log: Nuxt module for logging SSR errors + client-side Vue errors using winston

Welcome everyone to leave a message to discuss, wish smooth work, happy life!

I’m bigO front. See you next time.