8 распространенных сценариев защитного программирования переднего плана

JavaScript

О внешнем защитном программировании

  • В большинстве случаев мы могли столкнуться с тем, что серверная часть возникает из-за слишком большого количества одновременных запросов или слишком большого количества данных или из-за исключений, которые вызывают исключения службы, запросы интерфейса терпят неудачу, а затем появляется белый экран или сообщение об ошибке. внешний интерфейс
  • В другом случае есть какие-то дефекты в коде, написанном самим интерфейсом, и вся система недостаточно надежна, поэтому появится белый экран, или бизнес-система будет ненормальной, и пользователь может использовать ее неправильно.
  • Затем есть внешнее защитное программирование.

Распространенные проблемы и меры предосторожности

1. Наиболее распространенные проблемы:
uncaught TypeError: Cannot read property 'c' of undefined

Основная причина этой проблемы:

Когда мы инициализируем объект obj значением {}, obj.a в данный момент не определен. Мы можем напечатать obj.a, чтобы получить undefined, но когда мы напечатаем obj.a.c, возникнет вышеуказанная ошибка. Значение неинициализированного свойства в объекте js не определено, и чтение свойства из неопределенного вызовет эту ошибку (аналогично, то же самое верно и для нуля)

Как этого избежать?

И js, и ts в настоящее время имеют可选链概念,Например:

const obj = {};
console.log(obj?.b?.c?.d)

Приведенный выше код не сообщает об ошибке, причина?.Когда он встречает нулевое значение, он возвращает значение undefined.

2. Перехват механизма ошибок на уровне внешнего интерфейса

Вызовы внешнего интерфейса, как правило, более часты.В настоящее время мы можем рассмотреть возможность использования режима singleton для инкапсуляции всех запросов axios с помощью функции. Unity может ловить неизвестные ошибки в вызовах интерфейса в этой функции, псевдокод выглядит следующим образом:

function ajax(url,data,method='get'){
  const promise = axios[method](url,data)
  return  promise.then(res=>{
  }).catch(error){
  //统一处理错误
}
}

Затем, пока возникает неизвестная ошибка вызова интерфейса, она будет обрабатываться здесь.

3. Границы ошибок (Границы ошибок, когда во внешнем интерфейсе возникает неизвестная ошибка, отображается предустановленный интерфейс пользовательского интерфейса)

Возьмем React в качестве примера

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

Граница ошибки — это компонент React, который перехватывает и печатает ошибки JavaScript, возникающие в любом месте его дерева подкомпонентов, и вместо рендеринга тех подкомпонентов, которые дают сбой, он рендерит альтернативный пользовательский интерфейс. Границы ошибок улавливают ошибки во время рендеринга, в методах жизненного цикла и в конструкторах по всему дереву компонентов.

Пример использования:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

Уведомление

  • Границы ошибок не могут фиксировать ошибки, возникающие в следующих сценариях:

    • Обработка событий (Подробнее)
    • Асинхронный код (например, функции обратного вызова setTimeout или requestAnimationFrame)
    • рендеринг на стороне сервера
    • Ошибки, выдаваемые им самим (а не его подкомпонентами)
4. Ошибки, вызванные сложными асинхронными сценариями на внешнем интерфейсе
  • Эта проблема может быть намного сложнее, чем просто, но путь прост, следуйте одностороннему потоку данных для изменения данных, например:
//test.js
export const obj = {
  a:1,
  b:2
}

//使用obj
import {obj} from './test.js';
obj.a=3;

когда вы часто используете этоobjобъекта, вы не можете знать его порядок изменения (то есть, каково его значение в определенный момент) по коду, и в нем может быть много асинхронного кода, когда мы меняем путь, мы можем знать его меняй заказ, и нам удобнееdebug

Например:

//test.js
export const obj = {
  a:1,
  b:2
}
export function setObj (key,value)  {
  console.log(key,value)
  obj[key] = value
}

Итак, мы сделали это

5. Front-end фокус на «front-end»
  • Для некоторых конфиденциальных данных, таких как статус входа в систему, связанных с аутентификацией. Передок надо постараться сделать незаметным форвардингом и переносом (чтобы не было проблем с безопасностью)
6. Страницу можно понизить
  • Для некоторых только в новом бизнесе, или существует риск сервисного модуля, или могут быть получены ненадежные интерфейсы, такие как сторонние интерфейсы, на этот раз на этаже, чтобы сделать понижение, после сбоя интерфейса, такого как корреспонденция отклонения вызова модуль дисплея, чтобы пользователь не воспринимал использование
7. Умело пользуйтесь загрузкой и отключением
  • После пользовательских операций необходимо вовремя загружать и отключать, чтобы гарантировать, что пользователям не разрешено повторяться, и предотвратить ошибки на стороне бизнеса.
8. Используйте innerHTML с осторожностью
  • Он подвержен дырам в безопасности, например, если интерфейс возвращает скрипт JavaScript, он будет выполнен немедленно. В настоящее время, если скрипт является вредоносным, будут непредсказуемые последствия, особенно в индустрии электронной коммерции, обратите особое внимание на

❤️ После прочтения трех вещей

  • Если вы найдете этот контент вдохновляющим, я хотел бы пригласить вас сделать мне три небольших одолжения:

  • Нажмите "Нравится", чтобы этот контент увидело больше людей (нравится вам это или нет, это все хулиганство -_-)

  • Следуйте за мной, и давайте будем долгосрочными отношениями

  • Обратите внимание на паблик "Front-end Peak", и продолжайте выкладывать для вас избранные хорошие статьи.Так же вы можете добавить меня в друзья и общаться в любое время.

Категории