Sentry-javascript: Sentry при работе с конденсатором, так как stackrace гибридного приложения не имеет никакой информации

Привет @kamilogorek , не могли бы вы помочь с этим.

Имя файла в кадрах стека выглядит неправильно

{
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "forceError",
              "in_app": true
            }

Еще один пример консоли ошибок выглядит так. Raven.js не получает никакой информации об ошибке.

На карауле это выглядит так

TraceKit отвечает за извлечение правильной информации о кадрах из самой ошибки — https://github.com/getsentry/sentry-javascript/blob/master/packages/raven-js/vendor/TraceKit/tracekit.js .

Тем не менее, мы внесли в него некоторые изменения в новом SDK @sentry/browser , поэтому вы можете сначала попробовать его, прежде чем мы проведем дальнейшее расследование.

@камилогорек
С @sentry/browser еще хуже, поэтому я перешел на Raven.

Ниже показано, как это выглядит, когда приложение работает как гибридное приложение с использованием конденсатора + Ionic 4 + VueJS + @sentry/browser.

Ниже приведена ссылка на ошибку, которая регистрируется, когда я использую @sentry/browser.

https://sentry.io/share/issue/d0c7e9529ac94dba9c4b7b04e16361ba/

Вот так выглядит консоль

Настройка часового

Sentry.init({
    release: "WSVue-" + AppConst.application.version + "-" + AppConst.application.bundleVersion,
    dsn: "https://[email protected]/181356",
    transport: Sentry.Transports.FetchTransport,
    integrations: [new Sentry.Integrations.Vue({Vue})],
    environment: "DEVTEST",
    beforeSend: function (exception) {
        return exception;
    }
});

Хотя это выглядит красиво, когда приложение работает как веб-сайт.

Ниже приведена та же ошибка, зарегистрированная при запуске приложения как веб-сайта.
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

Я никогда не использовал конденсатор или ионный 4 tbh. Можете ли вы предоставить наименьший возможный репро-кейс, который я мог бы использовать для отладки? У меня нет достаточно времени, чтобы научиться его настраивать.

@kamilogorek Не проблема, я создал тестовый проект для воспроизведения проблемы. Конденсатор в точности похож на кордову. Тот же процесс отладки.

https://github.com/stripathix/ionic-vue

Чтобы вызвать ошибку, просто нажмите кнопку Trigger Error

Для запуска приложения я добавил шаги на README.md. Это довольно легко. Почти похоже на среду Cordova.

Отладка гибридного приложения аналогична отладке Кордовы. Просто запустите приложение на симуляторе, а затем из Safari откройте Inspector для приложения, работающего на симуляторе.

Ниже приведена ссылка на ошибку, зарегистрированную, когда приложение запускало гибридное мобильное приложение.
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

привет, @kamilogorek у тебя была возможность разобраться в этом?

Не совсем, у меня не так много свободного времени в эти дни. Как-нибудь постараюсь изучить, извините.

@kamilogorek Я тоже столкнулся с этой проблемой. Есть ли кто-нибудь еще, кто может изучить это?

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

Если вы хотите провести расследование, я предлагаю:

• используйте обратный вызов beforeSend и посмотрите, есть ли у него второй аргумент hint , есть ли атрибут hint.originalException , если да, исследуйте его стек и посмотрите, есть ли вообще информация
• если нет, то мы мало что можем сделать
• если это так, то установите точку останова в методе computeStackTrace https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts и шаг за шагом оттуда как он переваривает error.stack информацию

Мы используем @sentry/browser в приложении Ionic Angular v4 с Cordova, и у нас были аналогичные проблемы с трассировкой стека с сопоставлением с исходным кодом.

Мы определили, что это связано с Ionic Web View для Cordova и использованием им пользовательских схем на iOS ( ionic:// для Cordova, capacitor:// для конденсатора). Пользовательская схема в именах файлов кадров трассировки стека кажется проблематичной для деминификации.

Мы написали обходной путь, чтобы переписать схемы имен файлов с ionic:// на http:// , после чего все заработало, как и ожидалось. Вот его урезанная версия:

beforeSend = (event: Event) => {
  const exceptionValue = event.exception && event.exception.values && event.exception.values[0];

  // Approach taken from Sentry's React Native SDK.
  // See https://github.com/getsentry/sentry/issues/4719#issuecomment-333836573
  const stacktrace = event.stacktrace || (exceptionValue && exceptionValue.stacktrace);

  if (stacktrace) {
    stacktrace.frames.forEach(frame => {
      if (frame.filename !== "[native code]") {
        // The iOS webview uses a custom URL scheme for serving the web app.
        // See https://github.com/ionic-team/cordova-plugin-ionic-webview#iosscheme
        // The full URL with that scheme will be used for filenames in the stacktrace.
        // The URL begins with "ionic://localhost/".
        // The custom "ionic" scheme in the URL creates issues for source-mapped stacktraces.
        // Replacing "ionic" with "http" in the stackframe filename will enable source-mapped stacktraces.
        frame.filename = frame.filename.replace(/^ionic/, "http");
      }
    });
  }

  return event;
}

Надеюсь это поможет!

@KevinKelchen : это решает неправильное имя файла, но как вы справляетесь с неопределенными lineno и colno ? Как и @stripathix , фреймы имеют значение undefined при работе внутри конденсатора в веб-приложении iOS. Пример:

против

Хотя мне кажется, что не хватает не информации, а целых кадров .

@kamilogorek : я могу подтвердить, что originalException имеет информацию о столбцах и строках, см. Ниже:

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

@silviogutierrez , у вас есть небольшая копия, которую я мог бы использовать для отладки? В идеале просто базовое приложение Cordova с фреймами, в которых отсутствуют столбцы/строки.

@kamilogorek : я попытаюсь собрать его воедино, но на самом деле я нашел проблему. Это довольно просто, и именно там, где вы догадались:

Прямо здесь: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

Переменные gecko и chrome возвращаются пустыми для проверки регулярного выражения на кадрах конденсатора. То есть при работе на iOS фреймы конденсатора имеют capacitor://localhost/foo/bar , а на Android http://localhost . Таким образом, Tracekit отбрасывает все кадры в iOS, кроме тех, у которых [native code] соответствует регулярному выражению. Я бы предположил, что он отлично работает на Android.

Простой запуск этой (ужасной) команды sed для изменения переменной gecko устраняет проблему:

sed -i "s/moz-extension/moz-extension|capacitor/" node_modules/@sentry/browser/esm/tracekit.js

Должен ли я открыть PR против Tracekit, чтобы добавить протокол конденсатора? Если вы заметили, регулярное выражение chrome немного более гибкое и, кажется, уже содержит [-a-z] как часть регулярного выражения для любого количества протоколов. Должны ли мы попробовать это и в gecko ?

@silviogutierrez - Вы когда-нибудь получали здесь какие-либо решения? Если нужно, я могу сделать PR с вашим исправлением или даже протестировать его локально.

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

Осталось два вопроса:

1. Можно ли сделать это общим на стороне часового? Что-то вроде *:// для протокола?
2. Или вместо этого, почему конденсатор настаивает на собственном протоколе (и только на iOS)? Почему бы не использовать один из уже перечисленных в tracekit.ts?

Это хорошие вопросы, и у меня нет хорошего ответа ни на один из них.

1. Похоже, вы разобрались с вашим регулярным выражением.

2. Я думаю, что это всего лишь часть пользовательских схем Cordova / Ionic / Capacitor или что-то в этом роде. Я чувствую, что это также связано со стратегией закрепления SSL, чтобы избежать предварительной проверки CORS из приложения, но я не уверен.

@kamilogorek - я не совсем уверен, что вы хотите для репродукции. Вот мой лучший снимок, я думаю:

https://github.com/toddtarsi/cordova-create-react-app

Я разветвил это репо, добавил Sentry, добавил границу ошибки React, добавил кнопку сбоя. У него есть инструкции по запуску Cordova. Это такой же базовый уровень, как и в современной Кордове. Дайте мне знать, если это то, что вы ищете.

@kamilogorek @silviogutierrez - Хорошо, я закончил жаловаться. Я пришел к выводу, что бремя этой проблемы сводится к жестоко тупой реализации ошибок со стороны Gecko/safari. Спасибо, что были терпеливы и помогли мне здесь.

@toddtarsi извините, у меня не было достаточно времени, но спасибо, что сообщили мне. Позвольте мне закрыть эту проблему, но не стесняйтесь пинговать меня и / или открывать новую, если это необходимо. Спасибо!

@kamilogorek , вы бы хотели, чтобы я создал новую проблему, как было предложено @toddtarsi , или просто отправил PR со ссылкой на эту?

Как указано в комментарии @silviogutierrez выше (https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652), это проблема, характерная для измененной версии tracekit sentry-javascript, и ее можно легко быть исправлено в этом проекте (https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49).

Проблема: приложения Capacitor не отправляют сопоставляемые трассировки стека в iOS, потому что регулярное выражение gecko не допускает их схему URL-адреса конденсатора: //.
Решение. Добавьте схему URL-адреса конденсатора в регулярное выражение gecko.

Я собираюсь разветвить проект и внести изменения для собственного использования, если вы хотите, чтобы я отправил запрос на перенос, дайте мне знать!

@kamilogorek @mrlowe какие-либо обновления для запроса на включение https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0? Было бы полезно, если бы поддержка конденсаторов обсуждалась в выпуске https://github.com/getsentry/sentry/issues/13169.

@seanwu1105 ничего от меня. У меня это работает сейчас в производстве и не видел никаких проблем.

@mrlowe у вас есть планы сделать PR, чтобы сделать это изменение доступным для всех в следующем выпуске? Мы сталкиваемся с той же проблемой при использовании конденсатора в гибридном приложении в iOS, и это исправление https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 работает для нас. Спасибо!

@albertinad Я ничего не слышал от @kamilogorek , поэтому я просто создам PR и обращусь к этой проблеме. Если его не подхватят, я полагаю, мы можем создать новый выпуск.

Извините за поздний ответ @mrlowe , слишком легко пропустить упоминание в уже закрытой проблеме. Буду следить за пиаром, спасибо!