Simple Log Service:Use web tracking SDK for JavaScript to collect mini program logs

Precautions

• After you enable the web tracking feature for a Logstore, the write permissions on the Logstore are granted to anonymous users from the Internet. This may generate dirty data because AccessKey pair-based authentication is not performed.

• The body of each GET request cannot exceed 16 KB in size.

• The maximum size of logs that can be written to Simple Log Service by sending a POST request is 10 MB. We recommend that the content value of each log in a log group do not exceed 1 MB in size. For more information, see PutLogs.

• To enhance security, you must set the secure communication domain name of your server in a mini program to the domain name that is used by the web tracking feature in Simple Log Service. The domain name used by the feature is in the https://${project}.${host} format. For more information about host and project, see Configure the parameters for opts. A secure communication domain name of a server is a valid domain name in a request.

• Web tracking SDK for JavaScript can provide services even without dependencies. In addition, you do not need to enable ES6 modules to perform tree shaking.

Step 1: Enable the web tracking feature

Before you can use web tracking SDK for JavaScript to write user logs to a Logstore, you must enable the web tracking feature for the Logstore.

1. Log on to the Simple Log Service console.

2. In the Projects section, click the project that you want to manage.

   

3. Choose Log Storage > Logstores. On the Logstores tab, find the Logstore that you want to manage and choose > Modify.

4. In the upper-right corner of the Logstore Attributes page, click Modify.

5. Turn on WebTracking and click Save.

Step 2: Configure log collection settings and collect logs

Before you can use web tracking SDK for JavaScript to write user logs to a Logstore, you must import the SDK and configure parameters for log collection. The parameters include the name of the project to which logs are stored, the name of your Logstore, and metrics.

1. Install the following dependency:

   npm install --save @aliyun-sls/web-track-mini

2. Import the dependent module to your project.

   import SlsTracker from '@aliyun-sls/web-track-mini'

3. Configure the parameters for opts.

   const opts = {
     host: '${host}', // The endpoint of the region where Simple Log Service resides. Example: cn-hangzhou.log.aliyuncs.com.
     project: '${project}', // The name of the project. 
     logstore: '${logstore}', // The name of the Logstore. 
     time: 10, // The interval at which logs are sent. Default value: 10. Unit: seconds. 
     count: 10, // The maximum number of logs that can be sent in each request. Default value: 10. 
     topic: 'topic',// The custom topic of logs. 
     source: 'source',
     tags: {
       tags: 'tags',
     },
   }

   Parameter	Required	Description
   host	Yes	The endpoint of the region where Simple Log Service resides. In this example, the Simple Log Service endpoint for the China (Hangzhou) region is used. Replace the parameter value with the actual endpoint. For more information, see Endpoints.
   project	Yes	The name of the project.
   logstore	Yes	The name of the Logstore.
   time	No	The interval at which logs are sent. Default value: 10. Unit: seconds.
   count	No	The maximum number of logs that can be sent in each request. Default value: 10.
   topic	No	The topic of logs. You can specify a custom topic to identify logs.
   source	No	The source of logs. You can specify a custom source to identify logs.
   tags	No	The tag information about logs. You can specify a custom tag to identify logs.

4. Create an SlsTracker object.

   You can use the object to initiate a request to upload logs to Simple Log Service.

   const tracker = new SlsTracker(opts)

   Note

   When you develop a quickApp mini program, you must add configuration items before you create an SlsTracker object based on the request module that is used.

   The following sample code shows the configuration items when the requesttask module is used:

   const quickappSDK = {
         request: requesttask.request
       }
   const tracker = new SlsTracker({
         ...opts,
         platformSDK: quickappSDK,
         platformRequestName: 'request',
       })

5. Upload logs.

   In this step, you must specify the logic for log upload. You can also specify the details of logs that you want to collect. Example:

   tracker.send({
     customer: 'zhangsan',
     product: 'iphone 12',
     price: 7998,
   })

Step 3: Deploy the SDK

If you use Webpack or Rollup to package your frontend project, the SDK code is packaged and deployed together with your business code.

Step 4: Query and analyze logs

After you perform the preceding steps, web tracking SDK for JavaScript automatically collects logs based on the log format that you specify and saves the collected logs to the specified Logstore. Then, you can query the logs in the Simple Log Service console or by calling an operation such as GetLogs.

For more information, see Query and analyze logs and GetLogs.

References

The following table describes the methods that you can use to upload logs and provides examples.

tracker.send({
  customer: 'zhangsan',
  product: 'iphone 12',
  price: 7998,
})

tracker.sendImmediate({
  customer: 'zhangsan',
  product: 'iphone 12',
  price: 7998,
})

tracker.sendBatchLogs([
  {
    customer: 'zhangsan',
    product: 'iphone 12',
    price: 7998,
  },
  {
    customer: 'zhangsan',
    product: 'iphone 12',
    price: 7998,
  },
])

tracker.sendBatchLogsImmediate([
  {
    customer: 'zhangsan',
    product: 'iphone 12',
    price: 7998,
  },
  {
    customer: 'zhangsan',
    product: 'iphone 12',
    price: 7998,
  },
])