Simple Log Service:Kumpulkan log sisi klien dengan WebTracking

WebTracking mendukung dua metode ingest. Ingest terotentikasi direkomendasikan.

• Ingest terotentikasi (direkomendasikan)
  Antarmuka depan memperoleh token STS sementara dari backend Anda. Token ini menyediakan kredensial berdurasi terbatas dengan hak istimewa minimal (AccessKey + SecurityToken) untuk permintaan log bertanda tangan ke SLS, mencegah pemalsuan dan kontaminasi data. Ideal untuk produksi.
  
  
  
  

• Ingest tanpa autentikasi
  Antarmuka depan menulis log langsung ke titik akhir WebTracking publik tanpa kredensial. Mudah dikonfigurasi, tetapi memerlukan izin tulis anonim. Jika informasi Project atau Logstore bocor, kontaminasi data mungkin terjadi. Direkomendasikan hanya untuk pengujian.
  
  
  
  

Persiapkan sumber daya cloud

Buat sumber daya cloud yang diperlukan untuk penyimpanan log.

Langkah 1: Buat project

Project adalah unit manajemen sumber daya utama di SLS yang mengisolasi sumber daya untuk aplikasi berbeda.

Prosedur: Masuk ke Konsol Layanan Log dan klik Create Project.

Parameter:

• Region: Pilih wilayah berdasarkan lokasi sumber log Anda. Pengaturan ini tidak dapat diubah setelah project dibuat.

• Project Name: Masukkan nama yang unik secara global dalam Alibaba Cloud. Nama ini tidak dapat diubah setelah project dibuat.

• Biarkan pengaturan lain pada nilai default-nya dan klik Create.

Langkah 2: Buat logstore

Logstore menyimpan log frontend yang dikumpulkan.

Prosedur: Navigasi ke project target. Di panel navigasi, pilih Log Storage, lalu klik +.

Parameter:

• Logstore Name: Masukkan nama yang unik dalam project. Nama ini tidak dapat diubah nanti. Contohnya, web-tracking-logstore.

• Logstore Type: Pilih Standard atau Query sesuai kebutuhan Anda.

• Billing Mode:

  • Pay-by-feature: Cocok untuk skenario dengan volume log rendah atau untuk pengembangan dan pengujian.

  • Pay-by-ingested-data: Cocok untuk skenario dengan volume log stabil yang memerlukan analisis jangka panjang.

• Data Retention Period: Default-nya 30 hari. Rentang yang didukung adalah 1 hingga 3.650 hari.

• Biarkan pengaturan lain pada nilai default-nya dan klik OK.

Mode autentikasi STS (Direkomendasikan)

Metode ini menggunakan layanan kredensial backend untuk menghindari pengeksposan kunci di frontend. Direkomendasikan untuk produksi.

# Instal framework web Flask dan library SDK Alibaba Cloud terkait
pip3 install Flask==3.1.2
pip3 install aiohttp==3.8.4
pip3 install alibabacloud-credentials==0.3.2
pip3 install alibabacloud-sts20150401==1.1.3
pip3 install alibabacloud-tea==0.3.2
pip3 install alibabacloud-tea-openapi==0.3.7
pip3 install alibabacloud-tea-util==0.3.8
pip3 install alibabacloud-tea-xml==0.0.2

# Buat dan masuk ke direktori project
mkdir my_web_sample
cd my_web_sample
touch main.py

import json
from flask import Flask, render_template
from alibabacloud_tea_openapi.models import Config
from alibabacloud_sts20150401.client import Client as Sts20150401Client
from alibabacloud_sts20150401 import models as sts_20150401_models
from alibabacloud_credentials.client import Client as CredentialClient

app = Flask(__name__)

# ================== Konfigurasi Pengguna ==================
# Ganti dengan ARN peran RAM Anda. Format: acs:ram::${accountId}:role/${roleName}
role_arn_for_sls_upload = '<YOUR_ROLE_ARN>'

# Tetapkan nama sesi peran. Kami merekomendasikan menggunakan pengenal unik untuk sumber permintaan.
role_session_name = '<YOUR_ROLE_SESSION_NAME>'  # contoh, sls-web-session-001

# Wilayah layanan STS, seperti cn-hangzhou.
region_id = 'cn-hangzhou'
# ==============================================

@app.route("/")
def hello_world():
    return render_template('index.html')

@app.route('/get_sts_token', methods=['GET'])
def get_sts_token():
    """
    Titik Akhir: /get_sts_token
    Metode: GET
    Fungsi: Panggil API STS AssumeRole untuk mendapatkan token keamanan sementara.
    Mengembalikan: Objek Credentials dalam format JSON.
    """
    # Jika Anda tidak menentukan parameter saat menginisialisasi CredentialClient, rantai kredensial default akan digunakan.
    # Saat menjalankan program secara lokal, tentukan pasangan AccessKey dengan menggunakan variabel lingkungan ALIBABA_CLOUD_ACCESS_KEY_ID dan ALIBABA_CLOUD_ACCESS_KEY_SECRET.
    # Saat berjalan di ECS, ECI, atau Container Service, tentukan instance RAM role dengan menggunakan variabel lingkungan ALIBABA_CLOUD_ECS_METADATA. SDK secara otomatis memperoleh kredensial sementara STS.
    config = Config(
        region_id=region_id,
        credential=CredentialClient()
    )
    sts_client = Sts20150401Client(config=config)

    # Bangun permintaan AssumeRole
    assume_role_request = sts_20150401_models.AssumeRoleRequest(
        role_arn=role_arn_for_sls_upload,
        role_session_name=role_session_name,
    )
      
    # Panggil STS untuk mendapatkan kredensial sementara
    response = sts_client.assume_role(assume_role_request)
    
    token = json.dumps(response.body.credentials.to_map())
    return token


app.run(host="0.0.0.0", port=80)

ALIBABA_CLOUD_ACCESS_KEY_ID=<YOUR_AK_ID> 
ALIBABA_CLOUD_ACCESS_KEY_SECRET=<YOUR_AK_SECRET> 
python3 main.py

curl http://<your_instance_public_ip_address>/get_sts_token

{
  "AccessKeyId": "STS.L4xxxxxx",
  "AccessKeySecret": "Dcyyyyyyyy",
  "Expiration": "2025-04-05T10:30:00Z",
  "SecurityToken": "CAISzxxxxxxxxxxx..."
}

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

import SlsTracker from "@aliyun-sls/web-track-browser";
import createStsPlugin from "@aliyun-sls/web-sts-plugin";

const opts = {
  host: "${endpoint}", // Titik akhir untuk wilayah Anda. Contoh: cn-hangzhou.log.aliyuncs.com
  project: "${project}", // Nama project Anda.
  logstore: "${logstore}", // Nama logstore Anda.
  time: 10, // Interval waktu pengiriman log, dalam detik. Default: 10.
  count: 10, // Jumlah log yang dikirim dalam satu batch. Default: 10.
  topic: "topic", // Topik log kustom.
  source: "source",
  tags: {
    tags: "tags",
  },
};

const stsOpt = {
  accessKeyId: "",
  accessKeySecret: "",
  securityToken: "",
  
  // Fungsi asinkron untuk memperbarui token STS.
  refreshSTSToken: () =>
    new Promise((resolve, reject) => {
      const xhr = new window.XMLHttpRequest();
      xhr.open("GET", "http://<your_instance_public_ip_address>/get_sts_token", true);
      xhr.send();
      
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            let credential = JSON.parse(xhr.response);
            // Perbarui kredensial sementara.
            stsOpt.accessKeyId = credential.AccessKeyId;
            stsOpt.accessKeySecret = credential.AccessKeySecret;
            stsOpt.securityToken = credential.SecurityToken;
            resolve();
          } else {
            reject("Wrong status code.");
          }
        }
      };
    }),
   // (Opsional) Interval pembaruan kustom. Default: 5 menit (300.000 ms).
  // refreshSTSTokenInterval: 300000,
  
  // (Opsional) Periode sebelum token kedaluwarsa untuk memicu pembaruan, dalam milidetik.
  // stsTokenFreshTime: undefined,
};

// Buat instance pelacak.
const tracker = new SlsTracker(opts);

// Buat dan daftarkan plugin STS.
const stsPlugin = createStsPlugin(stsOpt);
tracker.useStsPlugin(stsPlugin);

document.getElementById("loginButton").addEventListener("click", () => {
  const username = document.getElementById("username").value;
  
  tracker.send({
    eventType: "login",
    username: username,
  });
  
  console.log("Login event tracked for:", username);
});

<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8" />
  <title>Contoh Pemantauan Perilaku Pengguna</title>
</head>
<body>
  <input type="text" id="username" placeholder="Masukkan username" />
  <button id="loginButton">Login</button>

  <!-- Gunakan skrip modular -->
  <script type="module" src="/static/js/index.js"></script>
</body>
</html>

Ingest tanpa autentikasi

Metode ini mengaktifkan WebTracking pada Logstore untuk memberikan akses tulis publik. Klien mengunggah log langsung tanpa kredensial melalui SDK, permintaan HTTP, atau tag HTML.

Setelah Anda mengaktifkan WebTracking, antarmuka ACL Logstore mengembalikan HTTP 200 untuk permintaan tulis anonim. Ini adalah perilaku yang diharapkan untuk ingest log anonim dan tidak menunjukkan kerentanan keamanan tingkat tinggi. Namun, ini membawa risiko kontaminasi data tingkat rendah. Untuk layanan dengan persyaratan integritas data ketat, aktifkan mode autentikasi STS. Untuk menonaktifkan akses tulis anonim, matikan sakelar WebTracking di properti Logstore. Setelah menonaktifkan WebTracking, pastikan aplikasi frontend Anda telah mengintegrasikan metode autentikasi, seperti plugin STS.

Langkah 1: Aktifkan WebTracking

1. Masuk ke Konsol SLS.

2. Di bagian Projects, klik project target.

3. Di tab Log Storage > Logstores, temukan logstore target dan pilih > Modify.

4. Di halaman Logstore Attributes, klik Modify.

5. Aktifkan WebTracking dan klik Save.

Langkah 2: Konfigurasikan ingest tanpa autentikasi dan unggah log

SLS mendukung empat metode integrasi berikut:

• Integrasikan SDK WebTracking: Impor SDK WebTracking ke kode frontend Anda dan panggil metode send() untuk mengirim log terstruktur. Metode ini ideal untuk aplikasi web dan program mini modern.

• Permintaan HTTP GET: Tambahkan data log ke parameter URL dan unggah langsung dengan permintaan GET. Metode ini mudah diimplementasikan dan ideal untuk debugging atau pengumpulan ringan sejumlah kecil log.

• Tag HTML (img): Gunakan atribut <img> src untuk memulai permintaan, dengan informasi log dikodekan dalam URL. Metode ini tidak memerlukan JavaScript, secara inheren mendukung permintaan lintas domain, dan ideal untuk halaman statis atau pelacakan email.

• Tulisan batch OpenAPI: Panggil OpenAPI SLS dengan mengirim permintaan POST. Metode ini ideal untuk mengunggah data dalam jumlah besar dari server.

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

# Untuk program mini
npm install --save @aliyun-sls/web-track-mini

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

const opts = {
  host: '${host}', // Titik akhir SLS untuk wilayah Anda. Contoh: cn-hangzhou.log.aliyuncs.com
  project: '${project}', // Nama project.
  logstore: '${logstore}', // Nama logstore.
  time: 10, // Interval waktu pengiriman log, dalam detik. Nilai default: 10.
  count: 10, // Jumlah log yang dikirim dalam satu batch. Nilai default: 10.
  topic: 'topic',// Topik log kustom.
  source: 'source',
  tags: {
    tags: 'tags',
  },
}

const tracker = new SlsTracker(opts)  // Buat objek SlsTracker

tracker.send({
  eventType:'view_product',
  productName: 'Tablet',
  price: 500
})

tracker.sendImmediate({
  eventType:'view_product',
  productName: 'Tablet',
  price: 500
})

tracker.sendBatchLogs([
  {
    eventType: 'view_product',
    productName: 'Tablet',
    price: 500
  },
  {
    eventType: 'view_product',
    productName: 'Laptop',
    price: 1200
  }
])

tracker.sendBatchLogsImmediate([
  {
    eventType:'view_product',
    productName: 'Tablet',
    price: 500
  },
  {
    eventType:'view_product',
    productName: 'Laptop',
    price: 1200
  }
])

curl --request GET 'https://${project}.${host}/logstores/${logstore}/track?APIVersion=0.6.0&key1=val1&key2=val2'

<!-- Kumpulkan bidang kustom -->
<img src='https://${project}.${host}/logstores/${logstore}/track.gif?APIVersion=0.6.0&key1=val1&key2=val2'/>
<!-- Juga kumpulkan User-Agent dan Referer -->
<img src='https://${project}.${host}/logstores/${logstore}/track_ua.gif?APIVersion=0.6.0&key1=val1&key2=val2'/>

Langkah 3: Verifikasi ingest log

Verifikasi bahwa log frontend mencapai Logstore SLS.

1. Masuk ke Konsol SLS.

2. Di daftar Projects, klik project target.

3. Di halaman logstore, klik di sebelah nama logstore target untuk memperluasnya.

4. Klik untuk membuka halaman Search & Analyze.

5. Klik Enable. Di panel yang terbuka di sebelah kanan, klik Automatic Index Generation.

6. Sistem secara otomatis mengidentifikasi struktur log dan menghasilkan konfigurasi bidang yang direkomendasikan. Konfirmasi konfigurasi dan klik OK.

7. Setelah pengindeksan diaktifkan, tunggu sekitar satu menit untuk memastikan indeks berlaku. Anda kemudian dapat mengkueri log.

Kuota dan batasan

WebTracking tidak mendukung daftar putih alamat IP atau pembatasan sumber akses. Fitur ini dirancang untuk mengumpulkan data perilaku dan tidak mencakup mekanisme penyaringan IP sumber atau daftar putih bawaan. Jika Anda memerlukan kontrol akses, gunakan mode autentikasi STS atau arahkan pengunggahan log melalui server proxy backend.

Persyaratan jaringan: WebTracking mengharuskan browser dapat mengakses langsung titik akhir publik SLS Alibaba Cloud melalui internet. Jika kebijakan jaringan atau pembatasan lintas asal mencegah klien terhubung langsung ke titik akhir SLS, WebTracking tidak dapat digunakan. Dalam kasus seperti itu, pertimbangkan untuk mengarahkan pengunggahan log melalui server proxy backend.

Batas QPS: WebTracking memberlakukan batas QPS pada ingest log. Untuk nilai spesifik, lihat dokumentasi produk SLS atau konsol. Untuk skenario pelaporan lintas batas, ketidakstabilan jaringan dapat menyebabkan kegagalan pengunggahan. Evaluasi kelayakan dan risiko stabilitas pengunggahan frekuensi tinggi dari satu alamat IP (misalnya, 300 permintaan per detik) sebelum deployment ke produksi.

Penagihan

Fitur WebTracking gratis, tetapi operasi penulisan log, penyimpanan, dan kueri dikenai biaya.

1. Mode penagihan

Saat Anda membuat Logstore, Anda dapat memilih mode penagihan:

• Pay-by-ingested-data: Cocok untuk kasus penggunaan kompleks yang memerlukan penyimpanan log jangka panjang, analisis, pemrosesan, dan konsumsi di berbagai skenario.

• Pay-by-feature: Cocok untuk kasus penggunaan ringan atau bertahap yang memerlukan kontrol biaya fleksibel.

2. Item yang dapat ditagih inti

Pay-by-ingested-data

• Volume data mentah yang diingest: Ini adalah biaya utama, ditagih berdasarkan ukuran (dalam GB) log mentah yang tidak dikompresi. Biaya ini mencakup penulisan data, pengindeksan, panggilan API, dan penyimpanan panas bulan pertama (30 hari).

• Biaya penyimpanan: Penyimpanan lebih dari 30 hari dikenai biaya tambahan.

Pay-by-feature

• Trafik indeks: Biaya satu kali berlaku saat data ditulis, berdasarkan ukuran tidak dikompresi dari log mentah. Ini adalah prasyarat agar log dapat dicari.

• Biaya penyimpanan: Ditagih sejak hari pertama berdasarkan ukuran data yang dikompresi.

• Trafik baca dan tulis, jumlah baca dan tulis, Shard aktif, dan lainnya.

FAQ

Impor CDN

Ya. Metode ini ideal untuk project frontend ringan, halaman statis, atau skenario validasi cepat tanpa proses build npm.

Risiko versi usang: Versi terbaru yang tersedia di CDN adalah 0.3.5. Versi ini mungkin tidak memiliki fitur yang tersedia di versi terbaru di npm.

Cara mengimpor:

1. Tambahkan referensi skrip berikut ke tag <head> atau <body> file HTML Anda.

   <script src="https://g.alicdn.com/sls/sls-js-sdk/0.3.5/web-track-browser.js"></script>

2. Setelah SDK dimuat, inisialisasi instance pelacak dengan objek global window.SLS_Tracker:

   if (window.SLS_Tracker) {
     const tracker = new SLS_Tracker({
       host: 'your-project.cn-hangzhou.log.aliyuncs.com',
       project: 'your-project',
       logstore: 'your-logstore',
       time: 10,
       count: 10
     });
   }
   

Apa perbedaan antara @aliyun-sls/web-browser dan @aliyun-sls/web-track-browser?

Kedua SDK tidak secara otomatis mengumpulkan error JavaScript atau data permintaan jaringan. Anda harus menulis kode secara manual untuk menangkap dan melaporkan event ini.

Pilih @aliyun-sls/web-browser jika kasus penggunaan Anda memerlukan format LogGroup untuk kompatibilitas dengan pipeline pemrosesan log SLS. Pilih @aliyun-sls/web-track-browser jika Anda lebih suka format JSON bebas yang fleksibel dengan overhead pengembangan lebih rendah.

Dokumentasi terkait

• Buat pengguna RAM

• Berikan izin kepada pengguna RAM

• Buat peran RAM yang mempercayai akun Alibaba Cloud

• Buat kebijakan kustom

• SDK JavaScript WebTracking untuk web

• Unggah log menggunakan plugin STS untuk SDK JavaScript WebTracking

Lampiran 1: Contoh STS multibahasa

Alibaba Cloud menyediakan contoh layanan STS open-source dalam Java, Node.js, PHP, dan Ruby. Setiap contoh memanggil API AssumeRole untuk menerbitkan kredensial sementara ke aplikasi frontend.

Project contoh: Java, Node.js, PHP, Ruby

Untuk menggunakan contoh, modifikasi file config.json, lalu ikuti instruksi untuk bahasa Anda untuk memulai layanan.

Lampiran 2: Contoh project frontend