🔟Обработка ошибок

⚡ 1) Intro

Документация

⚡ 2) RTK query обработка ошибок

⚡ 2.1) Теперь попробуем допустить ошибку

// let { packId } = useParams<{ packId: string }>();
let packId = "dasdsad";

⚡ 2.2) Поставим debugger и напишем возвращаемый тип ошибки

type ErrorDataType = {
error: string;
  errorObject: Object;
  in: string;
  info: string;
}

type CustomerError = {
  data: ErrorDataType; 
  status: number;
};

⚡ 2.3) Теперь попробуем вывести ошибку

Cards.tsx

import { useGetCardsQuery } from "features/cards/services/cards.api";
import LinearProgress from "@mui/material/LinearProgress";

export const Cards = () => {
  // let { packId } = useParams<{ packId: string }>();
  let packId = "dasdsad";

  const { data, error, isLoading } = useGetCardsQuery(packId ?? "");

  if (isLoading) return <LinearProgress color={"secondary"} />;

  if (error) {
    return <h1>{error.data.error}</h1>;
  }

  return (
    <div>
      <h1>Cards</h1>
      <div>{JSON.stringify(data)}</div>
    </div>
  );
};

Получим вот такой результат

⚡ 2.4) Обратимся к документации и попробуем понять что с этим делать

Когда ошибка корректно передается из base query, RTK Query предоставляет ошибку напрямую.

Если пользовательский код вызывает неожиданную ошибку, а не обработанную ошибку, эта ошибка будет преобразована в формат SerializedError.

Пользователи должны убедиться, что они проверяют, с каким типом ошибки они имеют дело, прежде чем пытаться получить доступ к ее свойствам.

Это можно сделать при помощи сужения типов или используя предикатные функции

⚡ 3) The in operator narrowing

Оператор in в TypeScript используется для проверки наличия свойства в объекте или наличия элемента в массиве. Он выполняет проверку и возвращает логическое значение true или false.

Вот примеры использования оператора in:

1. Проверка наличия свойства в объекте:

type Person = {
  name: string
  age: number
}

const person: Person = { name: "John", age: 25 };

console.log("name" in person); // true
console.log("address" in person); // false

В этом примере мы проверяем наличие свойств "name" и "address" в объекте person. Оператор in возвращает true, если свойство присутствует, и false, если свойство отсутствует.

2. Проверка наличия элемента в массиве:

const numbers = [1, 2, 3, 4, 5];

console.log(2 in numbers); // true
console.log(5 in numbers); // false

Здесь мы проверяем наличие элемента с индексом 2 и 5 в массиве numbers. Оператор in возвращает true, если элемент с указанным индексом присутствует, и false, если элемент отсутствует.

3. Проверка наличия свойства в объекте с использованием условного оператора:

interface Car {
  brand: string;
  model?: string;
}

function printCarModel(car: Car): void {
  if ("model" in car) {
    console.log(`Car model: ${car.model}`);
  } else {
    console.log("Car model not available");
  }
}

const car1: Car = { brand: "Toyota" };
const car2: Car = { brand: "Honda", model: "Civic" };

printCarModel(car1); // Car model not available
printCarModel(car2); // Car model: Civic

В этом примере мы проверяем наличие свойства "model" в объекте car. Если свойство присутствует, мы выводим его значение. В противном случае выводится сообщение о том, что модель автомобиля недоступна.

Таким образом, оператор in в TypeScript является полезным инструментом для проверки наличия свойства в объекте или элемента в массиве перед его использованием.

⚡ 4) Возвращаемся к документации

Пробуем применить пример к нашему коду. Разберем вот этот кусок кода

if ("status" in error) {
  const errMsg = 'error' in error ? error.error  ? JSON.stringify(error.data)
}

Проанализировав, можно придти вот к такому решению

if (error) {
    if ("data" in error) {
      const errMsg = error.data as ErrorDataType;
      if ("error" in errMsg) {
        return <h1>{errMsg.error}</h1>;
     }
   }
}

Выглядит конечно так себе... Но такое решение нам диктует документация... Можно конечно сделать вот так

if (error) {
    const err = error as CustomerError;
    return <h1>{err.data.error}</h1>;
}

Но из плюсов 1 варианта мы все таки страхуемся от непредвиденных случаев, а во втором варианте просто полагаемся, что ошибка может быть именно такой...

⚡ 5) Глобальная обработка ошибок

Ну так может не будем обрабатывать ошибку из хука, а будем обрабатывать глобально в app.slice.ts

В общей обработке ошибок не получится сделать, т.к. мы там завязывались на санки, но никто нам запрещает сделать еще один addMatcher

.addMatcher(
    (action) => action.type.endsWith("executeQuery/rejected"),
    (state, action) => {
       state.error = action.payload.data.error;
   }
 )

⚡ 6) Inline error handling example

Мы рассмотрели вариант типизации ошибки, которая приходит с хука, но если мы ошибку обрабатываем в catch, то становится еще хуже 😁

Тут нам понадобятся знания про предикатные типы

⚡ 7) Type predicates

В TypeScript "type predicates" — это специальные выражения, которые позволяют уточнить тип переменной во время выполнения кода. Они помогают более точно определить тип данных в условных выражениях, основываясь на свойствах или структуре объекта.

Основная идея состоит в том, что вы можете проверить, является ли переменная экземпляром определенного типа, и затем использовать эту информацию для более точного определения типа переменной в блоке кода.

Для создания типовых предикатов в TS используется специальный синтаксис с использованием оператора is. Вот пример:

function isNumber(value: unknown): value is number {
  return typeof value === 'number';
}

В этом примере isNumber — это типовый предикат. Он принимает значение типа unknown и возвращает true, если значение является числом, или false в противном случае.

Далее, после определения типового предиката, вы можете использовать его в условных выражениях для уточнения типа переменной. Например:

function multiplyIfNumber(value: unknown, multiplier: number): number | undefined {
  if (isNumber(value)) {
    // TypeScript понимает, что value имеет тип number в этом блоке кода
    return value * multiplier; 
  }
  return undefined;
}

В этом примере, если значение value является числом, то TypeScript позволяет умножить его на multiplier, так как тип переменной value уточнен внутри блока if с помощью типового предиката isNumber.

Типовые предикаты позволяют более точно работать с типами в TypeScript, делая код более безопасным и позволяя избегать ошибок типизации.

❗Рассмотрим пример из документации и сделаем выводы