New Relic Angular統合ガイド - Angularアプリケーション監視の基本 ​

AngularアプリケーションでNew Relic Browser Agentを使用することで、TypeScriptベースのモダンWebアプリケーションの動作を詳細に監視できます。この記事では、Angularプロジェクトでのシンプルな統合方法と基本的な監視設定について解説します。

Angularでの監視の特徴 ​

Angularアプリケーションでは、フレームワークの特性を活用した効果的な監視が可能です。

主な監視ポイント ​

Angularアプリケーションの監視では、依存性注入システムを活用して監視機能をサービスとして実装できます。これによって、アプリケーション全体で一貫した監視を提供できます。

また、コンポーネントのライフサイクルフックを利用することで、各コンポーネントの動作状況を詳細に追跡できます。

RxJSオブザーバブルとの組み合わせにより、非同期処理やデータストリームの状態も監視対象にできます。

基本的な統合方法 ​

Browser Agentの導入 ​

AngularアプリケーションでBrowser Agentを使用するには、まずindex.htmlにNew RelicのJavaScriptスニペットを追加します。

html
<!-- index.html の head セクションに追加 -->
<script type="text/javascript">
  window.NREUM||(NREUM={});
  // New Relic Browser Agentスニペット
</script>

基本的な監視サービスの作成 ​

Angularの依存性注入システムを活用して、監視機能をサービスとして実装します。

typescript
// new-relic.service.ts
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class NewRelicService {
  trackEvent(eventName: string, attributes: any): void {
    if (typeof (window as any).newrelic !== 'undefined') {
      (window as any).newrelic.addPageAction(eventName, attributes);
    }
  }
  
  trackError(error: Error): void {
    if (typeof (window as any).newrelic !== 'undefined') {
      (window as any).newrelic.noticeError(error);
    }
  }
}

ルート変更の監視 ​

Angular RouterのイベントをNew Relicで監視する基本的な実装です。

typescript
// route-monitoring.service.ts
import { Injectable } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import { NewRelicService } from './new-relic.service';

@Injectable({ providedIn: 'root' })
export class RouteMonitoringService {
  constructor(
    private router: Router,
    private newRelic: NewRelicService
  ) {
    this.setupRouteTracking();
  }
  
  private setupRouteTracking(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.newRelic.trackEvent('page_view', {
        url: event.url,
        timestamp: Date.now()
      });
    });
  }
}

HTTPリクエストの監視 ​

AngularのHTTPインターセプターを使用して、API通信を自動監視できます。

typescript
// http-monitoring.interceptor.ts
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
import { tap } from 'rxjs/operators';

@Injectable()
export class HttpMonitoringInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler) {
    const startTime = performance.now();
    
    return next.handle(req).pipe(
      tap({
        next: () => {
          const duration = performance.now() - startTime;
          // API成功時の処理
        },
        error: (error) => {
          // エラー時の処理
          if (typeof (window as any).newrelic !== 'undefined') {
            (window as any).newrelic.noticeError(error);
          }
        }
      })
    );
  }
}

エラーハンドリングの実装 ​

Angularのエラーハンドラーを使用して、アプリケーション全体のエラーを監視します。

typescript
// error-handler.ts
import { ErrorHandler, Injectable } from '@angular/core';

@Injectable()
export class CustomErrorHandler implements ErrorHandler {
  handleError(error: any): void {
    console.error('エラーが発生しました:', error);
    
    if (typeof (window as any).newrelic !== 'undefined') {
      (window as any).newrelic.noticeError(error, {
        customErrorHandler: true,
        timestamp: Date.now()
      });
    }
  }
}

コンポーネントでの監視実装 ​

コンポーネント内で直接イベントを監視する基本的な方法です。

typescript
// app.component.ts
import { Component } from '@angular/core';
import { NewRelicService } from './new-relic.service';

@Component({
  selector: 'app-root',
  template: `
    <button (click)="onButtonClick()">クリックを追跡</button>
  `
})
export class AppComponent {
  constructor(private newRelic: NewRelicService) {}
  
  onButtonClick(): void {
    this.newRelic.trackEvent('button_click', {
      componentName: 'AppComponent',
      timestamp: Date.now()
    });
  }
}

app.module.tsでの設定 ​

作成したサービスとインターセプターをAppModuleに登録します。

typescript
// app.module.ts
import { NgModule, ErrorHandler } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { CustomErrorHandler } from './error-handler';
import { HttpMonitoringInterceptor } from './http-monitoring.interceptor';

@NgModule({
  providers: [
    {
      provide: ErrorHandler,
      useClass: CustomErrorHandler
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpMonitoringInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

実装時の注意点 ​

パフォーマンスへの配慮 ​

Browser Agentは軽量に設計されていますが、監視処理がアプリケーションのパフォーマンスに影響を与えないよう注意が必要です。

エラーハンドリングの確認 ​

New Relicが利用できない環境でもアプリケーションが正常に動作するよう、適切な条件分岐を実装しましょう。

データの取り扱い ​

機密情報が監視データに含まれないよう、送信するデータの内容を慎重に選択してください。

まとめ ​

AngularアプリケーションでのNew Relic Browser Agent統合により、TypeScriptベースのモダンWebアプリケーションの動作状況を効果的に監視できます。

基本的な統合手順は以下の通りです：

  1. HTMLページへのBrowser Agentスニペットの追加
  2. 監視サービスの作成と依存性注入での提供
  3. HTTPインターセプターによるAPI通信の自動監視
  4. グローバルエラーハンドラーによるエラー収集
  5. コンポーネント内でのカスタムイベント監視

これらの基本的な実装により、Angularアプリケーションの健全性とパフォーマンスを継続的に監視できる環境が整います。

次のステップとして、より高度な監視機能やカスタムダッシュボードの作成、アラート設定などについて学習を進めることをお勧めします。

関連記事: Core Web Vitals監視設定関連記事: Vue.js統合ガイド