LogRocket 基础使用 #

概述 #

LogRocket 提供了丰富的 API 来帮助你监控和分析前端应用。本章将介绍最常用的基础功能。

text

┌─────────────────────────────────────────────────────────────┐
│                    LogRocket 核心功能                        │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                    自动功能                          │   │
│  ├─────────────────────────────────────────────────────┤   │
│  │  ✅ 会话录制（DOM 变化、用户交互）                    │   │
│  │  ✅ JavaScript 错误捕获                              │   │
│  │  ✅ 网络请求记录                                     │   │
│  │  ✅ 控制台日志记录                                   │   │
│  │  ✅ 性能指标收集                                     │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
│  ┌─────────────────────────────────────────────────────┐   │
│  │                    手动功能                          │   │
│  ├─────────────────────────────────────────────────────┤   │
│  │  📝 用户识别 (identify)                              │   │
│  │  📝 事件追踪 (track)                                 │   │
│  │  📝 日志记录 (log/info/warn/error)                   │   │
│  │  📝 错误捕获 (captureException)                      │   │
│  │  📝 面包屑 (breadcrumb)                              │   │
│  └─────────────────────────────────────────────────────┘   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

用户识别 #

基础用法 #

javascript

import LogRocket from 'logrocket';

LogRocket.identify('user-123', {
  name: 'John Doe',
  email: 'john@example.com'
});

用户属性 #

text

┌─────────────────────────────────────────────────────────────┐
│                    用户属性配置                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  标准属性：                                                  │
│  - name: 用户名                                             │
│  - email: 邮箱                                              │
│                                                             │
│  自定义属性：                                                │
│  - subscriptionType: 订阅类型                               │
│  - accountLevel: 账户等级                                   │
│  - createdAt: 创建时间                                      │
│  - lastLoginAt: 最后登录时间                                │
│  - totalPurchases: 总购买数                                 │
│                                                             │
│  限制：                                                     │
│  - 最多 50 个自定义属性                                     │
│  - 属性值必须是字符串、数字或布尔值                          │
│  - 属性名最多 100 个字符                                    │
│  - 属性值最多 500 个字符                                    │
│                                                             │
└─────────────────────────────────────────────────────────────┘

完整示例 #

javascript

function onUserLogin(user) {
  LogRocket.identify(user.id.toString(), {
    name: user.name,
    email: user.email,
    subscriptionType: user.subscription.type,
    accountLevel: user.account.level,
    createdAt: user.createdAt,
    lastLoginAt: new Date().toISOString(),
    totalPurchases: user.purchases.length,
    isPremium: user.subscription.type === 'premium'
  });
}

匿名用户 #

javascript

LogRocket.identify(null);

用户信息更新 #

javascript

function onUserProfileUpdate(user) {
  LogRocket.identify(user.id.toString(), {
    name: user.name,
    email: user.email,
    avatar: user.avatar
  });
}

事件追踪 #

基础用法 #

javascript

LogRocket.track('Event Name');

带属性的事件 #

javascript

LogRocket.track('Purchase Completed', {
  productId: 'prod-123',
  productName: 'Premium Plan',
  price: 99.99,
  currency: 'USD',
  paymentMethod: 'credit_card'
});

常见事件类型 #

text

┌─────────────────────────────────────────────────────────────┐
│                    常见事件类型                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  用户行为：                                                  │
│  - 'Button Clicked'                                         │
│  - 'Form Submitted'                                         │
│  - 'Page Viewed'                                            │
│  - 'Search Performed'                                       │
│                                                             │
│  业务事件：                                                  │
│  - 'Purchase Completed'                                     │
│  - 'Subscription Started'                                   │
│  - 'Item Added to Cart'                                     │
│  - 'Checkout Started'                                       │
│                                                             │
│  功能使用：                                                  │
│  - 'Feature Used'                                           │
│  - 'Help Article Viewed'                                    │
│  - 'Support Contacted'                                      │
│                                                             │
└─────────────────────────────────────────────────────────────┘

实际应用示例 #

javascript

function handlePurchase(order) {
  LogRocket.track('Purchase Completed', {
    orderId: order.id,
    total: order.total,
    items: order.items.length,
    paymentMethod: order.paymentMethod,
    discountApplied: order.discount > 0
  });
}

function handleSearch(query, results) {
  LogRocket.track('Search Performed', {
    query: query,
    resultsCount: results.length,
    hasResults: results.length > 0
  });
}

function handleFeatureUsage(featureName) {
  LogRocket.track('Feature Used', {
    feature: featureName,
    timestamp: Date.now()
  });
}

日志记录 #

日志级别 #

javascript

LogRocket.log('Regular log message');
LogRocket.info('Info message');
LogRocket.warn('Warning message');
LogRocket.error('Error message');
LogRocket.debug('Debug message');

text

┌─────────────────────────────────────────────────────────────┐
│                    日志级别说明                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  log: 普通日志，一般信息                                    │
│  info: 信息日志，重要事件                                   │
│  warn: 警告日志，潜在问题                                   │
│  error: 错误日志，错误事件                                  │
│  debug: 调试日志，开发调试                                  │
│                                                             │
│  使用场景：                                                  │
│  - log: 记录一般流程                                        │
│  - info: 记录重要业务事件                                   │
│  - warn: 记录异常但非错误的情况                             │
│  - error: 记录错误和异常                                    │
│  - debug: 开发调试（生产环境建议关闭）                      │
│                                                             │
└─────────────────────────────────────────────────────────────┘

日志最佳实践 #

javascript

function processPayment(paymentData) {
  LogRocket.info('Payment processing started', {
    orderId: paymentData.orderId,
    amount: paymentData.amount
  });
  
  try {
    const result = processPayment(paymentData);
    
    LogRocket.info('Payment processed successfully', {
      orderId: paymentData.orderId,
      transactionId: result.transactionId
    });
    
    return result;
  } catch (error) {
    LogRocket.error('Payment processing failed', {
      orderId: paymentData.orderId,
      error: error.message
    });
    
    throw error;
  }
}

结构化日志 #

javascript

function logUserAction(action, details) {
  LogRocket.info(`User Action: ${action}`, {
    action: action,
    timestamp: Date.now(),
    ...details
  });
}

logUserAction('Item Added to Cart', {
  productId: 'prod-123',
  quantity: 2,
  cartTotal: 199.99
});

错误捕获 #

captureException #

javascript

try {
  riskyOperation();
} catch (error) {
  LogRocket.captureException(error);
}

带额外信息 #

javascript

try {
  processOrder(orderData);
} catch (error) {
  LogRocket.captureException(error, {
    extra: {
      orderId: orderData.id,
      userId: orderData.userId,
      items: orderData.items
    },
    tags: {
      feature: 'checkout',
      severity: 'high'
    }
  });
}

自定义错误 #

javascript

function validateUser(user) {
  if (!user.email) {
    const error = new Error('User email is required');
    LogRocket.captureException(error, {
      extra: {
        userId: user.id,
        userName: user.name
      },
      tags: {
        feature: 'validation',
        type: 'user_data'
      }
    });
    throw error;
  }
}

text

┌─────────────────────────────────────────────────────────────┐
│                    captureException 参数                     │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  第一个参数：Error 对象                                     │
│  - 必须是 Error 实例或错误字符串                            │
│                                                             │
│  第二个参数：选项对象                                       │
│  - extra: 额外上下文信息                                   │
│  - tags: 标签（用于过滤和分组）                             │
│  - user: 用户信息（覆盖 identify 设置）                     │
│                                                             │
│  示例：                                                     │
│  LogRocket.captureException(error, {                        │
│    extra: {                                                 │
│      orderId: '123',                                        │
│      step: 'payment'                                        │
│    },                                                       │
│    tags: {                                                  │
│      feature: 'checkout',                                   │
│      priority: 'high'                                       │
│    }                                                        │
│  });                                                        │
│                                                             │
└─────────────────────────────────────────────────────────────┘

面包屑（Breadcrumbs） #

什么是面包屑？ #

text

┌─────────────────────────────────────────────────────────────┐
│                    面包屑概念                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  面包屑是用户操作的轨迹记录，帮助理解错误发生前的上下文。     │
│                                                             │
│  示例：                                                     │
│                                                             │
│  时间线：                                                    │
│  ├── 10:30:01 用户访问首页                                  │
│  ├── 10:30:15 用户点击"产品"                                │
│  ├── 10:30:22 用户搜索"手机"                                │
│  ├── 10:30:45 用户点击"加入购物车"                          │
│  ├── 10:31:02 用户点击"结算"                                │
│  └── 10:31:05 ❌ 错误：支付失败                             │
│                                                             │
│  通过面包屑可以清楚看到错误发生前的用户操作路径。            │
│                                                             │
└─────────────────────────────────────────────────────────────┘

自动面包屑 #

LogRocket 自动记录以下面包屑：

text

自动记录的事件：
├── 用户交互（点击、输入）
├── 网络请求
├── 控制台日志
├── URL 变化
└── JavaScript 错误

手动添加面包屑 #

javascript

LogRocket.addBreadcrumb({
  category: 'ui',
  message: 'User clicked checkout button',
  level: 'info',
  data: {
    cartTotal: 199.99,
    itemCount: 3
  }
});

面包屑分类 #

javascript

function handleFormSubmit(formData) {
  LogRocket.addBreadcrumb({
    category: 'form',
    message: 'Form submitted',
    level: 'info',
    data: {
      formId: 'checkout-form',
      fields: Object.keys(formData)
    }
  });
}

function handleApiCall(url, method) {
  LogRocket.addBreadcrumb({
    category: 'fetch',
    message: `${method} ${url}`,
    level: 'info'
  });
}

function handleNavigation(from, to) {
  LogRocket.addBreadcrumb({
    category: 'navigation',
    message: `Navigate from ${from} to ${to}`,
    level: 'info'
  });
}

text

┌─────────────────────────────────────────────────────────────┐
│                    面包屑分类                                │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  常用分类：                                                  │
│  - ui: 用户界面交互                                         │
│  - fetch: 网络请求                                          │
│  - navigation: 路由导航                                     │
│  - form: 表单操作                                           │
│  - auth: 认证相关                                           │
│  - payment: 支付相关                                        │
│  - custom: 自定义分类                                       │
│                                                             │
│  日志级别：                                                  │
│  - debug: 调试信息                                          │
│  - info: 一般信息                                           │
│  - warning: 警告                                            │
│  - error: 错误                                              │
│                                                             │
└─────────────────────────────────────────────────────────────┘

会话 URL #

获取当前会话 URL #

javascript

const sessionUrl = LogRocket.sessionURL;
console.log('Current session URL:', sessionUrl);

发送会话链接到支持系统 #

javascript

async function submitSupportTicket(issue) {
  const sessionUrl = LogRocket.sessionURL;
  
  const response = await fetch('/api/support/tickets', {
    method: 'POST',
    body: JSON.stringify({
      issue: issue,
      logrocketSessionUrl: sessionUrl
    })
  });
  
  return response.json();
}

在错误报告中包含会话链接 #

javascript

window.onerror = function(message, source, lineno, colno, error) {
  const sessionUrl = LogRocket.sessionURL;
  
  fetch('/api/errors', {
    method: 'POST',
    body: JSON.stringify({
      message: message,
      source: source,
      lineno: lineno,
      colno: colno,
      error: error?.stack,
      sessionUrl: sessionUrl
    })
  });
};

标签（Tags） #

设置标签 #

javascript

LogRocket.setTag('feature', 'checkout');
LogRocket.setTag('experiment', 'new-design-v2');
LogRocket.setTag('customer_type', 'enterprise');

使用场景 #

text

┌─────────────────────────────────────────────────────────────┐
│                    标签使用场景                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  功能标记：                                                  │
│  LogRocket.setTag('feature', 'checkout');                   │
│                                                             │
│  实验标记：                                                  │
│  LogRocket.setTag('experiment', 'new-ui-v2');               │
│                                                             │
│  客户类型：                                                  │
│  LogRocket.setTag('customer_type', 'enterprise');           │
│                                                             │
│  环境标记：                                                  │
│  LogRocket.setTag('environment', 'production');             │
│                                                             │
│  优先级：                                                    │
│  LogRocket.setTag('priority', 'high');                      │
│                                                             │
│  用途：                                                     │
│  - 在控制台中过滤和搜索                                     │
│  - 对问题进行分组                                           │
│  - 分析特定功能的问题                                       │
│                                                             │
└─────────────────────────────────────────────────────────────┘

完整示例 #

购物流程监控 #

javascript

import LogRocket from 'logrocket';

function shoppingFlow() {
  LogRocket.identify('user-123', {
    name: 'John Doe',
    email: 'john@example.com',
    subscriptionType: 'premium'
  });
  
  LogRocket.setTag('feature', 'shopping');
  
  LogRocket.addBreadcrumb({
    category: 'navigation',
    message: 'User visited product page',
    level: 'info',
    data: { productId: 'prod-456' }
  });
  
  LogRocket.track('Product Viewed', {
    productId: 'prod-456',
    productName: 'Wireless Headphones',
    price: 99.99
  });
  
  LogRocket.addBreadcrumb({
    category: 'ui',
    message: 'User clicked add to cart',
    level: 'info',
    data: { productId: 'prod-456' }
  });
  
  LogRocket.track('Item Added to Cart', {
    productId: 'prod-456',
    quantity: 1
  });
  
  try {
    const order = processCheckout();
    
    LogRocket.track('Purchase Completed', {
      orderId: order.id,
      total: order.total
    });
    
    LogRocket.info('Purchase completed successfully', {
      orderId: order.id
    });
  } catch (error) {
    LogRocket.captureException(error, {
      extra: {
        cartItems: getCartItems()
      },
      tags: {
        feature: 'checkout',
        severity: 'high'
      }
    });
  }
}

表单提交流程 #

javascript

function handleFormSubmit(event) {
  event.preventDefault();
  
  const formData = new FormData(event.target);
  const data = Object.fromEntries(formData);
  
  LogRocket.addBreadcrumb({
    category: 'form',
    message: 'Form submission started',
    level: 'info',
    data: {
      formId: event.target.id,
      fields: Object.keys(data)
    }
  });
  
  LogRocket.track('Form Submitted', {
    formId: event.target.id
  });
  
  try {
    const result = submitForm(data);
    
    LogRocket.info('Form submitted successfully', {
      formId: event.target.id,
      resultId: result.id
    });
    
    LogRocket.track('Form Submission Success', {
      formId: event.target.id
    });
  } catch (error) {
    LogRocket.captureException(error, {
      extra: {
        formId: event.target.id,
        formData: sanitizeData(data)
      },
      tags: {
        feature: 'form',
        formType: event.target.id
      }
    });
    
    LogRocket.track('Form Submission Failed', {
      formId: event.target.id,
      error: error.message
    });
  }
}

API 速查表 #

javascript

LogRocket.init(appId, options)
LogRocket.identify(userId, userTraits)
LogRocket.track(eventName, eventProperties)
LogRocket.log(message)
LogRocket.info(message)
LogRocket.warn(message)
LogRocket.error(message)
LogRocket.debug(message)
LogRocket.captureException(error, options)
LogRocket.addBreadcrumb(breadcrumb)
LogRocket.setTag(key, value)
LogRocket.sessionURL

下一步 #

现在你已经掌握了 LogRocket 的基础使用方法，接下来学习会话回放详解深入了解如何分析和利用会话录制数据！