如何为TrackJS添加自定义日志？Angular5页面重定向URL追踪方法

1. 如何为TrackJS添加自定义日志？ #

TrackJS提供了非常直观的API来添加自定义日志，最常用的就是trackjs.log()方法，你可以直接传入字符串或者带上下文信息的对象，灵活度很高：

• 基础用法：如果只是记录简单的事件，直接传字符串就行，比如：

  trackjs.log("用户完成了个人信息编辑");
  

• 带上下文的日志：如果需要记录更多细节（比如用户ID、操作参数等），可以传入一个对象作为第二个参数，这些信息会和日志一起出现在TrackJS的后台，方便排查问题：

  trackjs.log("用户提交了订单", {
    userId: "user_12345",
    orderId: "order_67890",
    totalAmount: 99.99
  });
  

• 不同级别的日志：除了普通日志，还可以用trackjs.warn()和trackjs.error()来标记警告或错误级别的日志，这些日志会在TrackJS dashboard里按级别分类，方便你快速筛选和关注重要信息。

所有自定义日志都会自动关联当前会话的上下文（比如会话ID、用户代理、页面URL等），不需要额外配置就能让你在后台看到完整的事件链。

2. Angular 5中监控特定页面重定向并获取URL的实现方法 #

在Angular 5里监控重定向，最合适的切入点是路由守卫或者全局路由事件监听，结合TrackJS的日志API就能轻松实现：

在哪里添加逻辑？ #

• 路由守卫（推荐）：如果是针对特定页面的重定向（比如未登录用户访问需要权限的页面时被重定向），可以用CanActivate守卫，在重定向触发前记录相关信息。
• 全局路由事件监听：如果需要监控所有可能的重定向行为，可以在根组件（比如AppComponent）里监听路由事件，捕获导航前后的URL变化。

使用哪个TrackJS API？ #

依然用trackjs.log()（或trackjs.warn()如果要标记为警告）来记录重定向的源URL和目标URL，以及重定向原因等信息。

示例1：用路由守卫监控特定页面重定向

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const originalUrl = state.url;
    // 假设这里判断用户未登录，需要重定向到登录页
    if (!this.isUserLoggedIn()) {
      // 记录重定向信息到TrackJS
      trackjs.warn('未授权访问触发重定向', {
        fromUrl: originalUrl,
        toUrl: '/login',
        reason: '用户未登录'
      });
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }

  private isUserLoggedIn(): boolean {
    // 这里写你的登录状态判断逻辑
    return false;
  }
}

记得把这个守卫关联到需要监控的路由上，在路由配置里添加canActivate: [AuthGuard]。

示例2：全局监听所有重定向行为

import { Component, OnInit } from '@angular/core';
import { Router, NavigationStart, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  private previousUrl: string;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe(event => {
      // 记录导航开始时的URL
      if (event instanceof NavigationStart) {
        this.previousUrl = event.url;
      }
      // 导航结束时对比前后URL，判断是否发生重定向
      if (event instanceof NavigationEnd && this.previousUrl !== event.url) {
        trackjs.log('页面发生重定向', {
          fromUrl: this.previousUrl,
          toUrl: event.url
        });
      }
    });
  }
}

这样配置后，所有重定向行为都会被记录到TrackJS后台，你可以在那里查看详细的重定向路径和上下文信息。

内容的提问来源于stack exchange，提问作者Remya CV