Sentry-javascript: حذر عند تشغيل مكثف لأن تكديس التطبيقات المختلطة لا يحتوي على أي معلومات

تم إنشاؤها على ١ فبراير ٢٠١٩  ·  28تعليقات  ·  مصدر: getsentry/sentry-javascript

المتطلبات: يرجى الاطلاع على قائمة التحقق هذه قبل فتح عدد جديد

الحزمة + الإصدار

  • [] @sentry/browser
  • [] @sentry/node
  • [*] raven-js
  • [] raven-node _ (غراب للعقدة) _
  • [ ] آخر:

الإصدار:

"raven-js": "3.27.0",

وصف

كود للتثبيت

                    .config(dsnToUse, {
                        release: "WSVue-" + AppConst.application.version + "-" + AppConst.application.bundleVersion,
                        environment: bootstrapAppService.getEnvironment(),
                        ignoreErrors: content.ignoreErrorsList,
                        tags: {appversion: appInfo.applicationVersion},
                        dataCallback: function (data) {
                            // do something to data
                            data.extra.localStorageData = getLocalStorageData();
                            return data;
                        }
                    })
                    .addPlugin(RavenVue, Vue)
                    .install();

مع بيئة الموقع تعمل بشكل رائع. لكن لدي نفس مصدر البرنامج مثل التطبيق الهجين باستخدام Capacitor.

مكثف: https://capacitor.ionicframework.com/

خطأ المعلومات التي تم تسجيلها لا تحتوي على معلومات مكدس.

بيانات الخطأ التي تم تسجيلها تبدو هكذا

{
  "project": "181355",
  "logger": "javascript",
  "platform": "javascript",
  "request": {
    "headers": {
      "User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 12_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16B91"
    },
    "url": "capacitor://localhost#/app/developer"
  },
  "exception": {
    "values": [
      {
        "type": "Error",
        "value": "Forcing error fooboo tester",
        "stacktrace": {
          "frames": [
            {
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "Promise",
              "in_app": true
            },
            {
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "initializePromise",
              "in_app": true
            },
            {
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "Promise",
              "in_app": true
            },
            {
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "initializePromise",
              "in_app": true
            },
            {
              "filename": "[native code]",
              "lineno": null,
              "colno": null,
              "function": "forceError",
              "in_app": true
            }
          ]
        }
      }
    ],
    "mechanism": {
      "type": "generic",
      "handled": true
    }
  },
  "transaction": "[native code]",
  "trimHeadFrames": 0,
  "extra": {
    "message": "Forcing error fooboo tester",
    "code": "Forcing error fooboo tester.",
    "emailTried": "Forcing error fooboo. tester",
    "name": "Forcing error fooboo tester.",
    "session:duration": 66618
  },
  "tags": {
    "appversion": "4.4.6"
  },
  "breadcrumbs": {
    "values": [
      {
        "timestamp": 1549015935.474,
        "message": "Input: enableInputBlurring",
        "level": "debug",
        "category": "console"
      },
      {
        "timestamp": 1549015935.474,
        "message": "Input: enableScrollPadding",
        "level": "debug",
        "category": "console"
      },
      {
        "timestamp": 1549015935.481,
        "type": "http",
        "category": "xhr",
        "data": {
          "method": "GET",
          "url": "static/json/airports.json",
          "status_code": 200
        }
      },
      {
        "timestamp": 1549015935.745,
        "type": "http",
        "category": "xhr",
        "data": {
          "method": "GET",
          "url": "static/json/wx.json",
          "status_code": 200
        }
      },
      {
        "timestamp": 1549015935.759,
        "message": "checkUserAuthenticated",
        "level": "log",
        "category": "console"
      },
      {
        "timestamp": 1549015935.783,
        "message": "checkUserAuthenticated:Refreshing session",
        "level": "log",
        "category": "console"
      },
      {
        "timestamp": 1549015937.922,
        "type": "http",
        "category": "fetch",
        "data": {
          "method": "POST",
          "url": "https://cognito-idp.us-east-1.amazonaws.com/",
          "status_code": 200
        }
      },
      {
        "timestamp": 1549015938.318,
        "type": "http",
        "category": "fetch",
        "data": {
          "method": "POST",
          "url": "https://cognito-idp.us-east-1.amazonaws.com/",
          "status_code": 200
        }
      },
      {
        "timestamp": 1549015939.911,
        "type": "http",
        "category": "xhr",
        "data": {
          "method": "POST",
          "url": "https://cognito-identity.us-east-1.amazonaws.com/",
          "status_code": 200
        }
      }
    ]
  },
  "user": {
    "email": "********@gmail.com"
  },
  "environment": "DEV:CORDOVA:TFXC",
  "release": "WSVue-4.4.6-0.19.02.01.04.07",
  "event_id": "f137e408f8114bdcbc013be0b04f1f6a"
}

معلومات المكدس تبدو مثل هذا على الحارس
screenshot 2019-02-01 at 6 01 19 pm

نفس الخطأ الذي تم تسجيله على الموقع يبدو لطيفًا جدًا

52032491-2975c300-2547-11e9-8800-2e0b23bc69f6

التعليق الأكثر فائدة

@ seanwu1105 لا شيء مني. لدي هذا قيد الإنتاج الآن ولم أر أي مشاكل.

ال 28 كومينتر

مرحبًا kamilogorek ، هل يمكنك المساعدة في هذا الأمر.

اسم الملف في إطارات المكدس يبدو خاطئًا

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

تبدو وحدة تحكم خطأ أخرى مثل هذا. لا يحصل Raven.js على أي معلومات عن الخطأ.

screenshot 2019-01-31 at 10 50 43 am

على الحارس يبدو مثل هذا

screenshot 2019-02-02 at 9 59 15 am

تقع على عاتق TraceKit مسؤولية استخراج معلومات الإطارات المناسبة من الخطأ نفسه - https://github.com/getsentry/sentry-javascript/blob/master/packages/raven-js/vendor/TraceKit/tracekit.js

لقد أجرينا بعض التغييرات عليه في SDK الجديد @sentry/browser ، لذلك قد ترغب في تجربته أولاً قبل إجراء المزيد من التحقيق.

تضمين التغريدة
مع @ sentry / browser ، الأمر أسوأ من ذلك ، ولهذا انتقلت إلى Raven.

فيما يلي كيف يبدو عند تشغيل التطبيق كتطبيق Hybrid باستخدام مكثف + Ionic 4 + VueJS + @ sentry / browser

screenshot 2019-02-07 at 10 32 20 am

screenshot 2019-02-07 at 10 32 12 am

يوجد أدناه رابط الخطأ الذي يتم تسجيله عند استخدام @ sentry / browser.

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

هكذا تبدو وحدة التحكم
screenshot 2019-02-07 at 11 41 18 am

إعداد الحراسة

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;
    }
});

على الرغم من أنه يبدو جميلًا عند تشغيل التطبيق ، إلا أنه يعمل كموقع ويب
screenshot 2019-02-07 at 10 30 44 am

يوجد أدناه نفس الخطأ الذي تم تسجيله عند تشغيل التطبيق كموقع ويب
https://sentry.io/share/issue/4133deab3fc240f2bc85c680fae922a0/

لم أستخدم مكثفًا ولا أيوني 4 tbh مطلقًا. هل أنت قادر على تقديم أصغر حالة يمكن استخدامها لتصحيح هذا الأمر؟ ليس لدي الوقت الكافي لتعلم كيفية إعداده.

kamilogorek ليست مشكلة لقد أنشأت مشروعًا اختباريًا لإعادة إظهار المشكلة. مكثف يشبه تماما كوردوفا. نفس عملية التصحيح.

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

لتشغيل خطأ ، ما عليك سوى النقر فوق الزر Trigger Error
screenshot 2019-02-07 at 5 40 50 pm

لتشغيل التطبيق أضفت خطوات على README.md. إنه سهل جدًا. يكاد يكون مشابهًا لبيئة كوردوفا.

لتصحيح أخطاء التطبيق المختلط ، إنه مشابه تمامًا لتصحيح أخطاء كوردوفا. ما عليك سوى تشغيل التطبيق على جهاز المحاكاة ثم من Safari افتح المفتش لتطبيق يعمل على جهاز المحاكاة.

يوجد أدناه رابط الخطأ الذي تم تسجيله عندما كان التطبيق يشغل تطبيقًا مختلطًا للهاتف المحمول.
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

screenshot 2019-02-07 at 5 44 22 pm

مرحبًا ، 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 مع كوردوفا ولدينا مشكلات مماثلة مع آثار مكدس معين المصدر.

لقد قررنا أن الأمر يتعلق بـ Ionic Web View for 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 ، تحتوي الإطارات على تلك الإطارات غير المحددة عند تشغيلها داخل مكثف على تطبيق ويب iOS. مثال:

image

ضد
image

على الرغم من أنه يبدو لي أنه لا يفتقد المعلومات ولكن الإطارات بأكملها مفقودة.

kamilogorek : يمكنني أن أؤكد أن originalException يحتوي على معلومات العمود والخط ، انظر أدناه:

image

ليس لدي أي فكرة عن كيفية البدء في تصحيح أخطاء tracekit ، ولكن ربما يكون هناك شيء ما واضح على ما ورد أعلاه.

silviogutierrez هل لديك أي ريبرو صغير يمكنني استخدامه لتصحيح هذا؟ من الناحية المثالية ، مجرد تطبيق كوردوفا أساسي به إطارات مفقودة عمود / خط

kamilogorek : سأحاول تجميع واحدة ، لكنني وجدت المشكلة بالفعل. الأمر بسيط للغاية ، وفي المكان الذي توقعته بالضبط:

هنا: https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

يعود كلا المتغيرين gecko و chrome فارغين لاختبار regex على إطارات المكثف. أي عند التشغيل على iOS ، يكون لإطارات المكثف capacitor://localhost/foo/bar و على Android http://localhost . لذلك يقوم Tracekit بإسقاط جميع الإطارات في iOS باستثناء الإطارات ذات [native code] الإطارات التي تتطابق مع regex. أتخيل أنه يعمل بشكل جيد على Android.

يؤدي تشغيل الأمر sed (الشرير) هذا لتغيير المتغير gecko إلى إصلاح المشكلة:

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

هل يجب أن أفتح PR مقابل Tracekit لإضافة بروتوكول مكثف؟ إذا لاحظت ، فإن regex chrome أكثر مرونة ويبدو أنه يحتوي بالفعل على [-a-z] كجزء من regex لأي عدد من البروتوكولات. هل يجب أن نجرب ذلك في gecko أيضًا؟

silviogutierrez - هل حصلت على أي قرار هنا؟ إذا لزم الأمر ، يمكنني إجراء علاقات عامة مع الإصلاح الخاص بك أو حتى اختباره محليًا.

نجح الإصلاح الخاص بي. لسوء الحظ ، لم يكن لدي وقت مطلقًا لعمل إعادة استنساخ صغيرة باستخدام ما قبل / بعد. لكني كنت أستخدم الإصلاح لفترة من الوقت بنجاح.

يبقى سؤالان:

  1. هل يمكن جعل هذا عامًا من جانب الحارس؟ شيء من هذا القبيل *: // لبروتوكول؟
  2. أو بدلاً من ذلك ، لماذا يصر المكثف على بروتوكوله الخاص (وفقط على نظام iOS)؟ لماذا لا تستخدم واحدة من تلك المدرجة في tracekit.ts بالفعل؟

هذه أسئلة جيدة ، وليس لدي إجابة جيدة لأي منهما.

  1. يبدو أنك اكتشفت ذلك من خلال regex.

  2. أعتقد أن هذا مجرد جزء من المخططات المخصصة لكوردوفا / أيوني / مكثف بالكامل أو أي شيء آخر. أشعر أنه يرتبط أيضًا باستراتيجية تثبيت SSL للتهرب من اختبار CORS المبدئي من التطبيق ، لكنني لست متأكدًا.

kamilogorek - لست متأكدًا حقًا مما تريده للتعبير. أعتقد أن هذه هي أفضل لقطة لدي:

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

لقد فرقت هذا الريبو ، أضفت Sentry ، وأضفت حدود خطأ React ، وأضفت زر التعطل. يحتوي على تعليمات تشغيل كوردوفا. إنه خط الأساس الذي تحصل عليه مع كوردوفا الحديثة حقًا. اسمحوا لي أن أعرف إذا كان هذا هو ما تبحث عنه.

kamilogoreksilviogutierrez - حسنًا ، لقد انتهيت من الشكوى هنا. لقد توصلت إلى استنتاج مفاده أن عبء هذه المشكلة يعود إلى تنفيذ الخطأ المنفرج الوحشي من جانب Gecko / safari. شكرا لك على صبرك ومساعدتي هنا.

toddtarsi آسف لم يكن لدي الوقت الكافي هنا ، ولكن شكرًا لإخباري بذلك. اسمح لي بإغلاق هذه المشكلة ، ولكن لا تتردد في الاتصال بي و / أو فتح المشكلة الجديدة إذا لزم الأمر. شكرا!

kamilogorek ، هل تريد مني إنشاء عدد جديد كما هو مقترح لـ toddtarsi ، أم مجرد إرسال علاقات عامة تشير إلى هذه المشكلة؟

كما هو مشار إليه في تعليق silviogutierrez أعلاه (https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652) هذه مشكلة خاصة بالإصدار المعدل من tracekit الخاص بحارس جافا سكريبت ، ويمكن بسهولة يمكن إصلاحه في هذا المشروع (https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49).

المشكلة: لا ترسل تطبيقات Capacitor تكديسًا قابلاً للتخطيط في iOS لأن تعبير gecko لا يسمح بمكثفها: // url.
الحل: أضف مخطط url للمكثف إلى gecko regex.

أنا على وشك إنهاء المشروع وإجراء التغيير لاستخدامي الخاص ، إذا كنت تريد مني إرسال طلب سحب ، فأعلمني بذلك!

kamilogorekmrlowe أي تحديثات لطلب السحب https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0؟ سيكون من المفيد دعم المكثف الذي تمت مناقشته في المشكلة https://github.com/getsentry/sentry/issues/13169.

@ seanwu1105 لا شيء مني. لدي هذا قيد الإنتاج الآن ولم أر أي مشاكل.

mrlowe هل لديك خطط لعمل علاقات عامة لجعل هذا التغيير متاحًا للجميع في الإصدار التالي؟ نحن نواجه نفس المشكلة عند استخدام Capacitor في تطبيق مختلط في iOS ، وهذا الإصلاح https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0 يعمل معنا. شكرا!

albertinad لم أسمع أي رد من kamilogorek لذا سأقوم فقط بإنشاء العلاقات العامة والإشارة إلى هذه المشكلة. إذا لم يتم التقاطها ، فيمكننا إنشاء إصدار جديد على ما أفترض.

آسف على الرد المتأخر mrlowe ، من السهل جدًا تفويت أي ذكر في العدد الذي تم إغلاقه بالفعل. سوف تراقب العلاقات العامة ، شكرا!

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات