Apollo Angular客户端错误捕获问题求助

嘿，我之前也踩过apollo-angular错误捕获的坑！咱们一步步来捋清楚问题，同时给你几个实用的解决方案和替代方案～

一、先检查你的apollo-link-error配置是否正确 #

很多时候抓不到错误都是因为链接顺序不对，或者集成方式有问题。先给你一个标准的正确配置示例，对比看看你的代码哪里不一样：

import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpClientModule } from '@angular/common/http';
import { InMemoryCache } from '@apollo/client/core';
import { ApolloClientOptions } from '@apollo/client/core';
import { HttpLink } from 'apollo-angular/http';
import { onError } from '@apollo/client/link/error';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Injector } from '@angular/core';

export function createApollo(httpLink: HttpLink, injector: Injector): ApolloClientOptions<any> {
  // 错误处理链接
  const errorLink = onError(({ graphQLErrors, networkError }) => {
    const snackBar = injector.get(MatSnackBar); // 用Injector获取Angular服务，避免依赖注入问题
    
    if (graphQLErrors) {
      graphQLErrors.forEach(({ message }) => {
        console.log(`GraphQL错误: ${message}`);
        snackBar.open(`请求出错：${message}`, '关闭', { duration: 3000 });
      });
    }
    if (networkError) {
      console.log(`网络错误: ${networkError}`);
      snackBar.open('网络连接失败，请检查网络状态', '关闭', { duration: 3000 });
    }
  });

  // 重点！errorLink必须放在所有业务链接的最前面，才能捕获所有错误
  const link = errorLink.concat(httpLink.create({ uri: '/your-graphql-endpoint' }));

  return {
    link,
    cache: new InMemoryCache(),
  };
}

@NgModule({
  imports: [ApolloModule, HttpClientModule],
  providers: [
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink, Injector], // 注入需要的依赖
    },
  ],
})
export class AppModule {}

这里几个容易踩的坑：

• 链接顺序错误：errorLink必须在httpLink、authLink等其他链接的前面，否则错误会直接流向业务链接，errorLink根本抓不到
• Angular服务注入问题：如果要在errorLink里用SnackBar这类Angular服务，不能直接new，得用Injector获取，或者把服务加到useFactory的deps里
• 忽略错误类型：要同时处理graphQLErrors（服务器返回的GraphQL格式错误）和networkError（网络层面的错误，比如断网、跨域）

二、调试小技巧 #

如果配置没问题还是抓不到错误，可以试试这些方法排查：

• 在errorLink的回调里加console.log('进入错误处理')，确认是否真的触发了这个逻辑
• 用Apollo DevTools（Chrome浏览器扩展）查看请求详情，看看错误是否真的返回给了客户端
• 检查GraphQL服务器返回的错误格式是否符合标准，有些自定义服务器可能返回非标准格式的错误，导致apollo-link-error识别不了

三、apollo-link-error的替代方案 #

如果还是解决不了，或者想要更灵活的错误处理方式，这些方案可以试试：

1. 单个请求单独处理错误 #

每个query/mutation都在subscribe的时候直接处理错误，适合需要针对不同请求做不同提示的场景：

this.apollo.query({ query: YOUR_QUERY })
  .subscribe({
    next: (result) => { /* 处理成功逻辑 */ },
    error: (err) => {
      console.error('请求错误:', err);
      // 这里给用户提示
      this.snackBar.open('查询失败，请稍后重试', '关闭');
    }
  });

2. Angular HTTP拦截器 #

因为GraphQL请求本质也是HTTP请求，所以可以用Angular的HttpInterceptor全局拦截所有请求和错误：

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';
import { MatSnackBar } from '@angular/material/snack-bar';

@Injectable()
export class GraphQLInterceptor implements HttpInterceptor {

  constructor(private snackBar: MatSnackBar) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    // 只拦截GraphQL请求，避免影响其他HTTP请求
    if (request.url.includes('/graphql')) {
      return next.handle(request).pipe(
        catchError((error: HttpErrorResponse) => {
          let errorMsg = '请求出错';
          // 解析GraphQL错误
          if (error.error?.errors?.length) {
            errorMsg = error.error.errors[0].message;
          } else if (error.status === 0) {
            errorMsg = '网络连接失败';
          } else {
            errorMsg = `服务器错误：${error.status}`;
          }
          this.snackBar.open(errorMsg, '关闭', { duration: 3000 });
          return throwError(() => new Error(errorMsg));
        })
      );
    }
    return next.handle(request);
  }
}

然后在AppModule里注册拦截器：

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

3. 自定义Apollo ErrorHandler #

Apollo Angular提供了ApolloErrorHandler接口，可以全局自定义错误处理逻辑：

import { ApolloErrorHandler } from 'apollo-angular';
import { Injectable } from '@angular/core';
import { MatSnackBar } from '@angular/material/snack-bar';

@Injectable()
export class CustomApolloErrorHandler implements ApolloErrorHandler {
  constructor(private snackBar: MatSnackBar) {}

  handleError(error: any): void {
    let tipMsg = '请求失败';
    if (error.graphQLErrors?.length) {
      tipMsg = error.graphQLErrors[0].message;
    } else if (error.networkError) {
      tipMsg = '网络连接异常，请检查网络';
    }
    this.snackBar.open(tipMsg, '关闭', { duration: 3000 });
    console.error('Apollo错误详情:', error);
  }
}

在AppModule里提供这个自定义处理器：

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

如果你的代码里还有其他特殊配置（比如用了多个链接组合），记得把errorLink放在链接链的最前端，确保所有错误都能被捕获。试试看上面的方法，应该能解决你的问题～

内容的提问来源于stack exchange，提问作者Galactic Ranger