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 no AccessKey pair is required to perform authentication.

• 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 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 Log Service endpoint. 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 the logs. 
     source: 'source',
     tags: {
       tags: 'tags',
     },
   }

   Parameter	Required	Description
   host	Yes	The Simple Log Service endpoint. 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 the logs. You can specify a custom topic to identify the logs.
   source	No	The source of the logs. You can specify a custom source to identify the logs.
   tag	No	The tag information about the logs. You can specify a custom tag to identify the logs.

4. Create an SlsTracker object.

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

   const tracker = new SlsTracker(opts)

5. Upload logs.

   In this step, you must specify the logic for log upload. You can also specify the details of the 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 in the specified log format and saves the collected logs to the corresponding Logstore. You can query logs in the Simple Log Service console or by calling the GetLogs operation.

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,
  },
])