Как писать «отказоустойчивый» клиентский js?

Question

[Максим]

Отказоустойчивый, конечно, громко сказано. Суть просто в том, что стараюсь писать модульный код, но к сожалению js устроен так, что малейшая ошибка в одном модуле всё равно крашит весь js, следующий после строки в которой она случилась. Кроме try/catch не знаю других способов, которые позволят сделать так, чтобы ошибка в одном модуле/функции не приводила к остановке всего скрипта. Есть ли какой-то хороший способ (кроме превентивного TDD, поскольку речь идёт именно о коде непосредственно в продакшене)?

Answer 1

[Владимир Сартаков]

Молодец что пишешь модульный код.
try/catch, кстати, вполне годный инструмент, если его правильно использовать.
Можно написать некий обьект или класс который этими модулями управляет, назову его Лоадер.
Этот Лоадер поочередно перебирает модули и инициализирует их(реализовать это можно по разному)
Момент инициализации модуля, оборачивается в try/catch, если при инициализации модуля возникает ошибка, Лоудер знает в каком модуле что то пошло не так и может что либо делать(высер в консоль, отправить ошибку куда либо), не запускать другие модули у которых этот модуль указан как зависимость... Любой функционал, можно в этот лоадер добавить, например измерять время инициализации каждого модуля...
Суть в том что бы try/catch - был один на весь сайт, был в Лоадере, и сами модули об этом try/catch даже не знали и не использовали.
Это при первичной инициализаци js, грубо говоря при при загрузке страницы, а по уму, основной поток выполнения(при нем любая ошибка, валит все)
А вот ошибки которые будут возникать потом в динамике, например когда пользователи нажимают кнопки или что то еще делается спустя некоторое время, уже не валят весь функционал, а только связный, то есть если это реально независимый модуль, то ошибка в нем сломает только его.

Второй способ без try catch:
Вырвать модуль из основного потока выполнения js, тогда ошибка в модуле, не будет ломать все без причин.
Есть много способов вырвать модуль из основного потока выполнения, приведу самый древний и дубовый:
setTimeout(()=>{
// здесь код модуля
}, 0)

> Как писать «отказоустойчивый» клиентский js?
- Самое главное ты уловил: "Писать модульный код", остальное мелочи

Comments

[Максим]

второй способ кстати неплох
проблема try/catch в том, что он плохо работает с асинхронностью

[Владимир Сартаков]

Максим,
Асинхронные ошибки, не валят все. А только то что завязано на результаты работы асинхронного кода. try/catch не должен ловить асинхронные ошибки.
window onerror - ловит и синхронные и асинхронные ошибки. Но не дает возможности их заглушить
С асинхроностью хорошо работают промисы. Или async await конструкции, которые являются синтаксическим сахаром на промисами. Асинхронность в js отдельная не тривиальная тема.

[Максим]

var Import = function(path) {
  var imported = document.createElement('script');
  imported.src = path+'.js';
  document.head.appendChild(imported);
}
var Register = function(name) {
  try {
    new window[name];
  } catch (error) {
    console.error(error);
  }
}
Import('modules/testmodule');
Import('modules/testmodule2');

window.onload = function() {
  Register('Testmodule');
  Register('Testmodule2');
}

try/catch отлично сработали! В Testmodule может быть любая ошибка и Testmodule2 всё равно будет работать. Теперь вот правда незнаю, куда запихнуть эту отказоустойчивость в мире фреймворков.

Answer 2

[Афанасий Захаров]

Писать код, который не крашится :D
Ну, а если серьезно, сложно представить ситуацию, в которой ошибка риалтайма была бы не формата "smth is not defined" или "cannot read property smth of undefined".
То есть в основном все ошибки будут из-за невалидных данных или из-за отсутствия каких-то методов в старых браузерах.
Решение - валидировать входные данные, проверять все на null/undefined, использовать babel.

Comments

[Сергей Соколов]

ещё пользователи ставят какие-то дикие браузерные расширения, которые могут вмешиваться в загрузку внешних скриптов. И вот, сюрприз, не загрузился JS SDK от ВКонтакте, например. Узнаёшь о таком от пользователей. Или плохо настроенный AdBlock-подобный плагин убил блок твоей разметки просто из-за неудачного id.

Чтобы разбираться с такими ситуациями, хочется как-то «видеть» консоль ошибок JS браузера пользователя.

[Максим]

Сергей Соколов думаю фоновые ajax сообщения к специальному API-логгеру это выход. Сам не раз думал об этом.

[Афанасий Захаров]

Сергей Соколов, window.onerror - и в сентри, например.