Angular集成Raygun后无法捕获XHR及JS类型等问题求助

一、捕获JavaScript核心错误（引用/语法/类型错误） #

Angular自带的ErrorHandler仅能捕获框架内部抛出的错误，原生JS的语法、引用、类型错误属于全局未捕获错误，需要额外配置Raygun监听全局错误事件：

1. 在初始化代码中添加全局错误与Promise拒绝监听：

import { ErrorHandler, NgModule } from '@angular/core';
import { RaygunErrorHandler } from './raygun-error-handler';

// 监听全局未捕获错误
window.addEventListener('error', (event) => {
  rg4js('send', {
    error: event.error,
    customData: { eventType: 'Global Uncaught Error' }
  });
});

// 监听未处理的Promise拒绝
window.addEventListener('unhandledrejection', (event) => {
  rg4js('send', {
    error: event.reason,
    customData: { eventType: 'Unhandled Promise Rejection' }
  });
});

@NgModule({
  providers: [{ provide: ErrorHandler, useClass: RaygunErrorHandler }]
})
export class AppModule { }

2. 针对加载阶段的语法错误：
   这类错误可能在Angular代码执行前触发，建议在index.html中提前引入Raygun脚本并初始化，确保错误能被捕获：

<script src="//cdn.raygun.io/raygun4js/raygun.min.js"></script>
<script>
  rg4js('apiKey', '***');
  rg4js('setVersion', '1.0.0.0');
  rg4js('enableCrashReporting', true);
</script>

二、捕获XHR/Fetch网络请求错误 #

Raygun4JS默认不自动捕获网络错误，可通过两种方式实现：

方法1：启用Raygun内置网络监控 #

Raygun提供了原生网络监控能力，启用后可自动捕获4xx、5xx类错误：

// 初始化时添加配置
rg4js('enableNetworkMonitoring', true);
// 自定义错误过滤规则（可选，默认捕获400+状态码）
rg4js('setNetworkErrorFilter', (xhr) => {
  return xhr.status >= 400;
});

方法2：Angular HTTP拦截器手动捕获 #

如果内置监控不生效，可通过Angular拦截器统一处理所有HTTP请求错误：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class RaygunHttpInterceptor implements HttpInterceptor {
  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    return next.handle(request).pipe(
      catchError((error: HttpErrorResponse) => {
        rg4js('send', {
          error: error,
          customData: {
            url: request.url,
            method: request.method,
            statusCode: error.status,
            statusText: error.statusText
          }
        });
        return throwError(() => error);
      })
    );
  }
}

在AppModule中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { RaygunHttpInterceptor } from './raygun-http-interceptor';

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

三、框架相关错误与性能类错误处理 #

• 框架相关错误：自定义的RaygunErrorHandler已覆盖Angular框架内的大部分错误，结合全局错误监听可覆盖框架边界的异常场景。
• 性能类错误：启用Raygun的真实用户监控（RUM）功能，可捕获页面加载、资源加载、API响应时间等性能数据：

rg4js('enableRealUserMonitoring', true);
// 自定义RUM配置（可选）
rg4js('setRUMConfiguration', {
  captureTimings: true,
  captureResourceTimings: true
});

四、配置验证 #

完成配置后可通过以下方式测试：

• 手动触发引用错误：调用未定义变量undefinedFunc();
• 发起返回404/500状态码的HTTP请求
• 编写语法错误代码（开发环境可能被编译工具拦截，建议在生产环境或关闭编译校验后测试）

内容的提问来源于stack exchange，提问作者Aditya Shrivastava