Methods for adding operation logs to uniapp (uniapp, log, file, html5+)

Preface

Recently, I am working on a uniapp project. Because the project scenario is relatively complex, when dealing with after-sales issues, I found that only the backend request log cannot meet the needs, so I started writing a method to save the operation log in the front-end.

1. How to use:

1. Global introduction ()

import {LogCat} from './utils/'
.$LogCat = LogCat

2. Initialize the log storage path ()

 onLaunch: function() {
    this.$()
}

3. Parameters

Call this.$(tag,msg) method

parameter	illustrate	Data Type	default value
tag	Log tags, by default, the following tags will be appended with ":"	string
msg	Log content	string、object、array	''

4. Use in Vue files

methods:{
   
   handleClick() {
      let data = {
        name:'Zhang San',
        age:18
      }
      this.$('Clicked',data)  //2023-04-20 14:15:30 Clicked: {name:'Zhang San',age:18}   }
}

2. The JS code is as follows:

export const LogCat = {
  main: (),
  Environment: (''),
  BufferedWriter: (''),
  File: (''),
  FileOutputStream: (''),
  OutputStreamWriter: (''),
  LogPath: '',  //Log storage directory  saveDays: 7,   //Maximum number of log storage days  
  init: function() {
    if (.MEDIA_MOUNTED || !()) {
       = (null).getPath();
    } else {
       = ().getPath();
    }
    let fileManager = new ();
    let files = ()
    let now = new Date();
    let maxSavedDay = (now -  * 24 * 60 * 60 * 1000)
    // traverse the log files in the directory and delete the logs before the maximum number of days of log storage    for (var i in files) {
      let name = files[i].getName().split('.')[0],
        time = ('_')[1]
      if (time &lt;= maxSavedDay &amp;&amp; ('log_') == 0) {
        files[i].delete()
      }
    }
    ('LogPath-&gt;', );
  },
  d: function(tag, msg = '') {
    let now = new Date();
    let date = (now);
    let datetime = (now);

    msg = (typeof msg !== 'string' ? (msg) : msg);

    //file name    let fileName =  + "/log_" + date + ".txt"
    //Written content    let content = `\n${datetime} ${tag}${msg ? ':'+msg : msg}\n`;

    let file = new ();
    if (!()) {
      (); //Create parent path    }
    let fos = null;
    let bw = null;
    try {
      fos = new (fileName, true);
      bw = new (new (fos));
      //(log);
      (content);
    } catch (e) {
      ('e-&gt;', e);
    } finally {
      try {
        if (bw != null) {
          (); //Close the buffered stream          (); //Close the file output stream        }
      } catch (closeEx) {
        ('closeEx-&gt;', closeEx);
      }
    }
  }
}

export const utils = {
  getFormatDate: (dateString) =&gt; {
    const date = new Date(dateString);
    let year = ();
    let month = () + 1;
    let day = ();
    month = month &gt; 9 ? month : '0' + month;;
    day = day &gt; 9 ? day : '0' + day;
    return `${year}-${month}-${day}`;
  },
  getFormatDateTime: (dateString) =&gt; {
    const date = new Date(dateString);
    let year = ();
    let month = () + 1;
    let day = ();
    let hour = ();
    let min = ();
    let second = ();

    month = month &gt; 9 ? month : '0' + month;;
    day = day &gt; 9 ? day : '0' + day;
    hour = hour &gt; 9 ? hour : '0' + hour;
    min = min &gt; 9 ? min : '0' + min;
    second = second &gt; 9 ? second : '0' + second;

    return `${year}-${month}-${day} ${hour}:${min}:${second}`;
  }
}

III. Explanation

The maximum log storage time (saveDays) is configured by default to 7 days, which can be modified by yourself.

4. Article reference

/plugin?id=1816

Summarize

This is the article about adding operation logs (uniapp, logs, files, html5+) on Uniapp. For more related contents of adding operation logs for Uniapp, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!