基于 IndexedDB 的前端离线日志系统

前端

2023-10-09 13:59:18

使用 IndexedDB 构建前端离线日志系统：确保日志万无一失

随着 Web 应用程序变得愈发复杂，高效且可靠的日志记录至关重要。前端日志记录有助于我们了解应用程序行为，识别错误并改善用户体验。但是，当网络连接不可靠时，日志数据可能会丢失，从而影响我们的调试和分析工作。

引入离线日志记录

为了解决这一问题，我们需要一个离线日志记录系统，它可以在网络中断时捕获和存储日志数据，并在线路恢复后将其发送到服务器。这确保了重要的日志信息不会丢失，使我们能够在任何情况下全面了解应用程序的行为。

IndexedDB：持久化数据存储的利器

IndexedDB 是一款出色的浏览器 API，允许我们在本地存储大量数据，即使在浏览器关闭或设备重启后也能持久保留。这一特性使其成为构建离线日志记录系统的理想选择。

构建离线日志记录系统：循序渐进

1. 创建 IndexedDB 数据库

首先，我们通过 indexedDB.open() 方法创建一个数据库。此方法接受数据库名称和版本号作为参数。版本号用于处理数据库架构更改，对于我们当前的目的，我们将其设置为 1。

const dbName = 'my_log_database';
const request = indexedDB.open(dbName, 1);

2. 定义日志存储架构

接下来，我们需要创建一个对象存储，用于存储日志数据。对象存储就像一个表格，它包含索引，可用于快速查找数据。我们创建名为 logs 的对象存储，并设置 id 作为主键，还创建了 timestamp、level 和 message 索引。

const db = request.result;
const store = db.createObjectStore('logs', { keyPath: 'id', autoIncrement: true });
store.createIndex('timestamp', 'timestamp', { unique: false });
store.createIndex('level', 'level', { unique: false });
store.createIndex('message', 'message', { unique: false });

3. 存储日志数据

当我们需要记录一条日志时，我们使用 add() 方法将数据添加到 logs 对象存储中。此方法接受一个日志对象作为参数，其中包含 timestamp、level 和 message 字段。

const log = {
    timestamp: Date.now(),
    level: 'error',
    message: 'An error occurred'
};
const request = store.add(log);

4. 发送日志数据

最后，当网络恢复时，我们需要将存储在 IndexedDB 中的日志数据发送到我们的服务器。我们使用 getAll() 方法获取所有日志，然后使用 fetch() API 将其发送到服务器。

const transaction = db.transaction(['logs'], 'readonly');
const store = transaction.objectStore('logs');
const request = store.getAll();

request.onsuccess = function(event) {
    const logs = request.result;

    fetch('/api/logs', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(logs)
    })
    .then(response => {
        if (response.ok) {
            // 日志数据发送成功，从 IndexedDB 中删除这些日志
            const transaction = db.transaction(['logs'], 'readwrite');
            const store = transaction.objectStore('logs');
            logs.forEach(log => {
                const request = store.delete(log.id);
            });
        }
    })
    .catch(error => {
        console.error('Log upload error', error);
    });
};