Пошаговое руководство по обработке ошибок в JavaScript

  • Статья

Предупреждение

С 1 июня 2020 г. платформа монетизации Microsoft Ad для приложений UWP для Windows будет закрыта. Подробнее

В этом руководстве рассматривается перехват связанных с рекламой ошибок в приложении на JavaScript. В этом руководстве используется элемент управления AdControl для отображения баннера, но изложенные в нем общие принципы также применимы к межстраничным и собственным объявлениям.

Эти примеры составлены с учетом того, что у вас есть приложение на JavaScript, которое содержит элемент управления AdControl. Пошаговые инструкции по добавлению AdControl в приложение см. в статье AdControl в HTML 5 и JavaScript. Полный пример проекта, демонстрирующий добавление рекламных баннеров в приложение JavaScript/HTML, см. в [рекламных примерах на сайте GitHub]https://github.com/microsoft/Windows-universal-samples/tree/b1cb20f191d3fd99ce89df50c5b7d1a6e2382c01/archived/Advertising).

  1. В файле default.html file добавьте значение для события onErrorOccurred, где свойство data-win-optionsдля элемента AdControl определяется в div. Найдите следующий код в файле default.html. 
    <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 300px; height: 250px; z-index: 1"
  data-win-control="MicrosoftNSJS.Advertising.AdControl"
  data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test'}">
</div>
    После атрибута adUnitId добавьте значение для события onErrorOccurred. 
    <div id="myAd" style="position: absolute; top: 53px; left: 0px; width: 300px; height: 250px; z-index: 1"
  data-win-control="MicrosoftNSJS.Advertising.AdControl"
  data-win-options="{applicationId: '3f83fe91-d6be-434d-a0ae-7351c5a997f1', adUnitId: 'test', onErrorOccurred: errorLogger}">
```

  1. Создайте div, который будет отображать текст, чтобы можно было просматривать создаваемые сообщения. Для этого добавьте следующий код для myAd после div.

    <div style="position:absolute; width:100%; height:130px; top:300px; left:0px">
    <b>Ad Events</b><br />
    <div id="adEvents" style="width:100%; height:110px; overflow:auto"></div>
</div>

  2. Создайте элемент AdControl, который инициирует событие ошибки. Для всех объектов AdControl в приложении можно использовать только один ИД приложения, поэтому создание дополнительного элемента управления с другим ИД приложения вызовет ошибку во время выполнения. Для этого после предыдущих добавленных разделов div добавьте следующий код в основную часть страницы default.html.

    <!-- Because only one applicationId can be used, the following ad control will fire an error event. -->
<div id="liveAd" style="position: absolute; top:500px; left:0px; width:480px; height:80px"
  data-win-control="MicrosoftNSJS.Advertising.AdControl"
  data-win-options="{applicationId: '00000000-0000-0000-0000-000000000000', adUnitId: 'test', onErrorOccurred: errorLogger }" >
</div>

  3. В файле default.js проекта после функции инициализации по умолчанию будет добавлен обработчик событий для errorLogger. Прокрутите до конца файла и вставьте следующий код после последней точкой с запятой.

    WinJS.Utilities.markSupportedForProcessing(
window.errorLogger = function (sender, evt) {
    adEvents.innerHTML = (new Date()).toLocaleTimeString() + ": " +
    sender.element.id + " error: " + evt.errorMessage + " error code: " +
    evt.errorCode + "<br>" + adEvents.innerHTML;
    console.log("errorhandler hit. \n");
});

  4. Сборка и запуск файла. Вы увидите первоначальное рекламное объявление из созданного ранее примера приложения и текст под этим объявлением с описанием ошибки. Вы не увидите рекламное объявление с идентификатором liveAd.