Error Boundary를 이용해서 에러 처리 개선하기

1
const useApiError = <TError = Error>({
2
  errorHandlers,
3
  ignoreBoundaryErrors,
4
}: {
5
  errorHandlers?: ErrorHandlers;
6
  ignoreBoundaryErrors?: IgnoreBoundaryErrors;
7
}) => {
8
  const handlers = useMemo(
9
    () => ({ ...defaultHandlers, ...errorHandlers }),
10
    [errorHandlers]
11
  );
12

13
  // customErrorHandlers를 우선 처리하고, defaultHandler를 처리합니다.
14
  const handleError = useCallback(
15
    (error: TError) => {
16
      if (isAxiosError(error)) {
17
        const status = error.response?.status;
18
        if (status) {
19
          const customHandler = handlers[status] || handlers.default;
20
          customHandler();
21
        } else {
22
          handlers.default();
23
        }
24
      } else {
25
        handlers.default();
26
      }
27
    },
28
    [handlers]
29
  );
30

31
  // ignoreBoundaryErrors에 포함된 에러코드인지 확인합니다.
32
  const shouldThrowError = useCallback(
33
    (error: TError) => {
34
      if (isAxiosError(error)) {
35
        const status = error.response?.status;
36
        if (status) {
37
          return !ignoreBoundaryErrors?.includes(status);
38
        }
39
      }
40
      return true;
41
    },
42
    [ignoreBoundaryErrors]
43
  );
44

45
  return { handleError, shouldThrowError };
46
};

1
const useQueryWithHandlers = <
2
  TQueryFnData = unknown,
3
  TError = Error,
4
  TData = TQueryFnData,
5
  TQueryKey extends QueryKey = QueryKey,
6
>(
7
  options: UseQueryWithHandlersOptions<TQueryFnData, TError, TData, TQueryKey>,
8
  queryClient?: QueryClient
9
) => {
10
  const { errorHandlers, ignoreBoundaryErrors, ...restOptions } = options;
11
  // 인자로 전달받은 커스텀 에러 핸들러 호출과 ErrorBoundary 예외 처리를 위한 훅
12
  const { handleError, shouldThrowError } = useApiError<TError>({
13
    errorHandlers,
14
    ignoreBoundaryErrors,
15
  });
16

17
  // throwOnError 옵션에 shouldThrowError를 연결해서 ErrorBoundary 사용 여부 제어
18
  const query = useQuery(
19
    { ...restOptions, throwOnError: shouldThrowError },
20
    queryClient
21
  );
22

23
  // 쿼리에서 에러가 발생하면 handleError를 호출
24
  // 에러에 해당하는 적절한 에러 핸들러를 호출하는 부분 (useApiError)
25
  useEffect(() => {
26
    if (query.error) {
27
      handleError(query.error);
28
    }
29
  }, [query.error, handleError]);
30

31
  return query;
32
};

1
const useGetGroupBasicInfo = (
2
  groupToken: string,
3
  errorHandlers: ErrorHandlers,
4
  ignoreBoundaryErrors: IgnoreBoundaryErrors
5
) => {
6
  return useQueryWithHandlers({
7
    queryKey: ['groupBasicInfo', groupToken],
8
    queryFn: () => group.get(groupToken),
9
    errorHandlers, // ✅
10
    ignoreBoundaryErrors, // ✅
11
  });
12
};
13

14
const { data, isLoading, isError } = useGetGroupBasicInfo(
15
    groupToken,
16
    {
17
      // 403 에러에 호출할 에러 핸들러 -> 에러 바운더리에서 처리할 커스텀 에러를 던진다.
18
      403: () => {
19
        throw new BoundaryError({
20
          title: '접근 권한이 없어요',
21
          description: '모임의 총무만 참여자를 추가할 수 있어요.',
22
        });
23
      },
24
    },
25
    [403] // 403 에러는 에러 바운더리로 바로 전달하지 않는다. (커스텀 핸들러에서 처리)
26
  );

1
const useMutationWithHandlers = <
2
  TData = unknown,
3
  TError = Error,
4
  TVariables = void,
5
  TContext = unknown,
6
>(
7
  options: UseMutationWithHandlersOptions<TData, TError, TVariables, TContext>,
8
  queryClient?: QueryClient
9
) => {
10
  const { errorHandlers, ignoreBoundaryErrors, ...restOptions } = options;
11
  const { handleError, shouldThrowError } = useApiError<TError>({
12
    errorHandlers, // ✅
13
    ignoreBoundaryErrors, // ✅
14
  });
15

16
  return useMutation(
17
    { ...restOptions, onError: handleError, throwOnError: shouldThrowError },
18
    queryClient
19
  );
20
};

1
const useAddGroupMember = (
2
  groupToken: string,
3
  errorHandlers: ErrorHandlers,
4
  ignoreBoundaryErrors: IgnoreBoundaryErrors
5
) => {
6
  const queryClient = useQueryClient();
7

8
  return useMutationWithHandlers({
9
    mutationFn: groupMembers.put,
10
    onSuccess: () => {
11
      queryClient.invalidateQueries({
12
        queryKey: ['groupBasicInfo', groupToken],
13
      });
14
    },
15
    errorHandlers,
16
    ignoreBoundaryErrors,
17
  });
18
};
19

20
const addMutation = useAddGroupMember(
21
groupToken,
22
{
23
  // 409 에러에 호출할 에러 핸들러 -> 에러 토스트를 띄운다.
24
  409: () =>
25
	showToast({
26
	  type: 'error',
27
	  content:
28
		'이미 같은 이름의 참여자가 있어요. 다른 이름으로 입력해 주세요.',
29
	}),
30
},
31
[409] // 409 에러는 에러 바운더리로 바로 전달하지 않는다. (커스텀 핸들러에서 처리)
32
);

1
new QueryClient({
2
  defaultOptions: {
3
    mutations: {
4
      onError: handleMutationError,
5
      throwOnError: true, // 기본적으로 RouteErrorBoundary로 에러를 던집니다.
6
    },
7
    queries: {
8
      throwOnError: true, // 기본적으로 RouteErrorBoundary로 에러를 던집니다.
9
    },
10
  },
11
  queryCache: new QueryCache({
12
    onError: handleQueryError,
13
  }),
14
})

1
        <GlobalErrorBoundary> {/* 🚨 여기서 에러 캐치! */}
2
          <QueryClientProvider client={queryClient}>
3
            <Layout> {/* 💥 여기서 에러 발생 */}
4
              <GlobalStyles />
5
              <AppRouter /> {/* 👈 여기에 Router! */}
6
              <ReactQueryDevtools />
7
              <Toast />
8
            </Layout>
9
          </QueryClientProvider>
10
        </GlobalErrorBoundary>

1
throw new BoundaryError({
2
	title: "접근 권한이 없어요",
3
	description: "모임의 총무만 참여자를 추가할 수 있어요.",
4
});

1
const router = createBrowserRouter([
2
    {
3
      path: '',
4
      element: (
5
        <RouteErrorBoundary>
6
          <Outlet />
7
        </RouteErrorBoundary>
8
      ),
9
      errorElement: <RouteErrorElement />,
10
      children: []
11
    }
12
  ]
13
)