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

Usage notes

• After you enable the web tracking feature for a Logstore, anonymous users from the Internet are granted the write permissions on the Logstore. 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.

• You can write a maximum of 10 MB of log data at a time by sending a POST request. 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.

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

• You can deploy Simple Log Service web tracking SDK for JavaScript only to browsers. CJS and ES packaging methods are supported.

• You can install Simple Log Service web tracking SDK for JavaScript only by using the npm method. The cdn method is not supported for JavaScript ES5.

• The current version of Simple Log Service web tracking SDK for JavaScript uses the web-track-browser package and delivers better performance and stability than the previous version of Simple Log Service web tracking SDK for JavaScript that uses the js-sls-logger package. The js-sls-logger package is no longer maintained. We recommend that you use Simple Log Service web tracking SDK for JavaScript to collect browser logs.

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 parameters 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 dependency.

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

2. Import the dependent module to your project.

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

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 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 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, Simple Log Service web tracking SDK for JavaScript automatically collects logs in the log format that you specify and stores the collected logs in the Logstore that is used. Then, you can query the logs in the Simple Log Service console or by calling an API operation, such as GetLogs.

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

Log upload methods

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

What do I do if the "401 Authorization Required" error message appears when I debug code?

Cause

The web tracking feature is not enabled for your Logstore.

Solution

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. Perform the following steps to enable the web tracking feature for the Logstore and try again:

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.

References

• If the response that is returned by Log Service contains error information after you call an API operation, the call fails. You can handle errors based on the error codes that are returned when API calls fail. For more information, see Error codes.
• Alibaba Cloud OpenAPI Explorer provides debugging capabilities, SDKs, examples, and related documents. You can use OpenAPI Explorer to debug Log Service API operations without the need to manually encapsulate or sign requests. For more information, visit OpenAPI Portal.
• Log Service provides the command-line interface (CLI) to meet the requirements for automated configurations in Log Service. For more information, see Log Service CLI.