Средство анализатора сбоев

Мақала
07/16/2024

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

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

Ниже приведен пример минимальной трассировки стека, которую можно получить из веб-приложения в рабочей среде:

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Имена переменных и функций часто сокращаются, как указано выше t . URL-адреса скриптов часто указывают на встроенный однострочный файл пакета, как в приведенном prod.bundle.js выше файле.

Для сравнения ниже приведен пример неуказанной трассировки стека с исходными именами переменных и функций, а также исходными именами файлов и номерами строк:

Uncaught Error: test error
    at shorten (util.ts:9:9)
    at processUIString (util.ts:2:10)
    at todoMarkupBuilder (todo.ts:35:41)
    at Todo.render (todo.ts:24:12)
    at app.ts:36:39
    at Array.map (<anonymous>)
    at App.render (app.ts:36:22)
    at new App (app.ts:29:10)
    at index.ts:9:13
    at index.ts:9:33

Анализ минифицированных трассировок рабочего стека в средстве анализатора сбоев выполняется двумя шагами:

Во-первых, вы собираете специально отформатированные трассировки стека из веб-приложения в рабочей среде.

Существует множество способов сбора трассировок стека из браузеров, которые используют пользователи. Примеры и рекомендации приведены в разделе Сбор трассировок стека в рабочей среде ниже. В нем также объясняется, как отформатировать трассировки стека, чтобы их можно было анализировать в средстве анализатора сбоев .
Затем проанализируйте трассировки стека в средстве анализатора сбоев .

В разделе Анализ трассировок стека в средстве анализатора сбоев ниже объясняется, как сначала сделать исходные карты доступными в devTools, а затем использовать средство анализатора сбоев для анализа трассировок стека.

Сбор трассировок стека в рабочей среде

Средство анализатора сбоев не собирает трассировки стека за вас. Сначала необходимо собрать трассировки стека из веб-приложения с помощью доступных средств и служб. Вот несколько способов сбора трассировок стека в рабочей среде:

Мы рекомендуем использовать систему телеметрии, например Azure Monitor Application Insights , которая может собирать сведения о необработанных ошибках из кода JavaScript.
Вы также можете написать код JavaScript для отслеживания необработанных ошибок в веб-приложении. В следующем примере показано, как использовать window.onerror обработчик событий для записи необработанных ошибок в веб-приложении:
```
window.onerror = function (message, source, line, column, error) {
  // Get the stack trace from the error object.
  const stackTrace = error.stack;

  // Send the stack trace to your telemetry system.
  // Code not shown.
};
```

Форматирование трассировок стека для средства анализатора сбоев

Недостаточно собирать трассировки стека в рабочей среде. Средству анализатора сбоев требуются трассировки стека, чтобы включить раздел с именем Исходные модули.

Ниже приведен пример трассировки стека, которая включает раздел Исходные модули :

Uncaught Error: test error
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1344
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:1368)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2278
    at Array.map (<anonymous>)
    at t.render (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2252)
    at new t (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2063)
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2857
    at https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:1:2896

Source modules:
    https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js 8b544e37b35d920a39d0e10f70fddc29b25d0db362741f3071eff86cef8613e9

Раздел Исходные модули содержит URL-адреса файлов JavaScript, участвующих в трассировке стека, и хэш содержимого каждого файла. Хэш — это 64-значная строка шестнадцатеричных символов, соответствующая хэшу SHA-256 выполняемого скрипта. Это байт-for-byte хэш содержимого для каждого файла JavaScript. URL-адреса и хэши позволяют средству анализатора сбоев позже получить карты источника, которые использовались для отмены трассировки стека.

Чтобы добавить раздел Исходные модули в трассировки стека ошибок, используйте библиотеку поддержки анализатора сбоев Edge DevTools в веб-приложении следующим образом:

Добавьте библиотеку поддержки анализатора сбоев Edge DevTools в проект с помощью npm:
```
npm install @microsoft/edge-devtools-crash-analyzer-support
```
Импортируйте библиотеку в код JavaScript, а затем вызовите функцию installErrorStackModuleAnnotations :
```
import { installErrorStackModuleAnnotations } from '@microsoft/edge-devtools-crash-analyzer-support';

installErrorStackModuleAnnotations(Error);
```

Анализ трассировок стека в средстве анализатора сбоев

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

Создание доступных карт источников в средствах разработки

Средство анализатора сбоев использует сведения о исходном модуле в трассировке стека для получения исходных карт, соответствующих файлам скриптов в трассировке стека. Это означает, что сначала необходимо сделать исходные карты доступными в средствах разработки.

Средство анализатора сбоев лучше всего работает, если исходные карты безопасно хранятся с помощью azure Artifacts Symbol Server. Это связано с тем, что devTools может извлекать исходные карты с сервера символов Azure Artifacts по запросу при анализе ошибки. См . раздел Безопасная отладка исходного кода путем публикации исходных карт на сервере символов Azure Artifacts.

Если вы не используете сервер символов Azure Artifacts, вы по-прежнему можете использовать средство анализатора сбоев , убедившись, что исходные карты, соответствующие трассировке стека, доступны для средств разработки. Например, если вы уже загрузили карты источника с помощью //# sourceMappingURL= комментария, DevTools кэширует исходные карты для последующего повторного использования. Дополнительные сведения см. в статье Сопоставление исходного кода в средствах разработкистатьи Сопоставление обработанного кода с исходным исходным кодом для отладки.

DevTools не кэширует исходные карты, если доменное имя имеет значение localhost. Это означает, что если вы не используете azure Artifacts Symbol Server, средство анализатора сбоев будет работать только для трассировок стека, собранных из рабочих сред, а не из локальных сред разработки, использующих localhost домен.

Открытие средства анализатора сбоев

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

Чтобы открыть средство анализатора сбоев с помощью меню DevTools Дополнительные инструменты , выполните следующие действия.

В Microsoft Edge выберите Параметры и многое другое (> "Параметры и прочее") Дополнительные инструменты>Откройте средства разработчика (CTRL+SHIFT+I (Windows, Linux) или Command+OPTION+I (macOS)). Откроются средства разработчика.
В средствах разработки нажмите клавишу ESC , чтобы открыть панель инструментов быстрого просмотра внизу (если она еще не открыта). На панели быстрого просмотра нажмите кнопку Другие инструменты ( и выберите Анализатор сбоев.

Чтобы открыть средство анализатора сбоев с помощью меню команд, выполните следующие действия:

В Microsoft Edge выберите Параметры и многое другое (> "Параметры и прочее") Дополнительные инструменты>Откройте средства разработчика (CTRL+SHIFT+I (Windows, Linux) или Command+OPTION+I (macOS)). Откроются средства разработчика.
В DevTools нажмите кнопку Настройка и управление Средствами разработки ( и выберите Выполнить команду. Или, когда devTools имеет фокус, нажмите клавиши CTRL+SHIFT+P (Windows, Linux) или COMMAND+SHIFT+P (macOS). Откроется меню "Команда".
Начните вводить анализатор сбоев и выберите команду Показать анализатор сбоев [Быстрое представление] . На панели Быстрого просмотра откроется средство анализатора сбоев.

Ввод трассировки стека в средстве анализатора сбоев

Если вы хотите протестировать средство анализатора сбоев , но у вас нет трассировки стека для анализа, выполните следующие действия, чтобы собрать пример трассировки стека:

В Microsoft Edge откройте демонстрацию Анализатора сбоев DevTools в новом окне или вкладке.
Чтобы открыть средства разработчика, щелкните веб-страницу правой кнопкой мыши и выберите Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроются средства разработчика.
В средствах разработки на панели действий щелкните Консоль (). Откроется средство "Консоль ".
Выберите трассировку стека ошибок, отображаемую в средстве Консоли , и скопируйте ее.

Чтобы использовать средство анализатора сбоев в средствах разработки, выполните следующие действия.

Откройте средство анализатора сбоев devTools, как описано выше в разделе Открытие средства анализатора сбоев.
Введите специально отформатированную трассировку стека в левую область средства анализатора сбоев :
В средстве анализатора сбоев нажмите кнопку Анализ ( (или нажмите клавиши CTRL+ВВОД).

На правой панели отображаются исходные имена файлов и функций, составляющие трассировку стека:

При этом загружается исходные карты, соответствующие исходным модулям, и предпринимается попытка отменить любые кадры стека, для которых исходное содержимое JavaScript или TypeScript содержалось в исходной карте.
Если исходный код доступен в исходных картах для кадра, щелкните кадр, чтобы отобразить исходный код.

Исходный исходный код отображается в средстве "Источники ", и строка, о котором идет речь, выделена:
Чтобы скопировать неминифицированную трассировку стека, на панели инструментов вкладки Анализатор сбоев нажмите кнопку Копировать трассировку неминифицированного стека (). Это создает и копирует в буфер обмена полную неминифицированную трассировку стека в виде трассировки стека в обычном формате трассировки стека, за исключением информации, которая соответствует исходному коду, включая имена функций, имена исходных файлов, а также номера строк и столбцов:

Uncaught Error: test error
    at shorten (webpack://devtools-crash-analyzer/src/util.ts:9:9)
    at processUIString (webpack://devtools-crash-analyzer/src/util.ts:2:10)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:39)
    at Array.map (<anonymous>)
    at anonymous callback to [computed property].todos.map (webpack://devtools-crash-analyzer/src/app.ts:36:22)
    at constructor for App (webpack://devtools-crash-analyzer/src/app.ts:29:10)
    at [Global code: "webpack://devtools-crash-analyzer/src/index.ts"] (webpack://devtools-crash-analyzer/src/index.ts:9:13)
    at (anonymous function) (https://microsoftedge.github.io/Demos/devtools-crash-analyzer/app/prod.bundle.js:2:2897)

Функции пользовательского интерфейса

Средство анализатора сбоев имеет следующие функции пользовательского интерфейса:

Элемент пользовательского интерфейса	Описание
Левая область	Трассировка стека для анализа.
Правая область	Отображает исходные имена файлов и функций, составляющие трассировку стека.
Кнопка Новый анализ (	Создает пустую левую область для вставки трассировки стека.
Кнопка "Анализ	Создает новый анализ в правой области на основе трассировки стека в левой области.
Раскрывающийся	Показывает список анализов.
Кнопка Удалить этот анализ (	Удаляет настоящий анализ.
Кнопка Копировать неминифицированную трассировку стека ()	Создает и копирует в буфер обмена полную неминифицированную трассировку стека в виде трассировки стека в обычном формате трассировки стека, за исключением информации, которая соответствует исходному коду, включая имена функций, имена исходных файлов, номера строк и столбцов.
Кнопка Открыть параметры сервера символов (	Отображение или изменение параметров сервера символов Azure Artifacts.
Кнопка Как использовать (	Откроется следующая статья.