Sentry-javascript: Sentry 在电容器上运行时作为混合应用程序堆栈竞赛没有任何信息

创建于 2019-02-01  ·  28评论  ·  资料来源: getsentry/sentry-javascript

要求:请在打开新问题之前查看此清单

  • [*] 查看文档: https ://docs.sentry.io/
  • [*] 搜索现有问题: https ://github.com/getsentry/sentry-javascript/issues
  • [*] 使用最新版本: https ://github.com/getsentry/sentry-javascript/releases

套餐+版本

  • [ ] @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

不过,我们在新的@sentry/browser SDK 中对其进行了一些更改,因此您可能希望在我们进行更多调查之前先尝试一下。

@kamilogorek
使用@sentry/browser 更糟糕的是,这就是我搬到 Raven 的原因。

下面是当应用程序使用电容器 + 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/

我从未使用过电容器或 Ionic 4 tbh。 你能提供我可以用来调试的最小可能的复制案例吗? 我没有足够的时间来学习如何设置它。

@kamilogorek没问题我已经创建了一个测试项目来重现该问题。 电容器与科尔多瓦完全相似。 相同的调试过程。

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

要触发错误,只需单击触发错误按钮
screenshot 2019-02-07 at 5 40 50 pm

为了运行应用程序,我在 README.md 上添加了步骤。 这很容易。 几乎类似于 Cordova 环境。

要调试混合应用程序,它与 Cordova 调试完全相同。 只需在模拟器上运行应用程序,然后从 safari 打开 Inspector 以查看在模拟器上运行的应用程序。

以下是应用程序运行混合移动应用程序时记录的错误链接。
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/

screenshot 2019-02-07 at 5 44 22 pm

嗨, @kamilogorek你有机会调查一下吗?

不是真的,这些天我没有太多空闲时间。 有一天会尝试调查它,对不起。

@kamilogorek我也遇到了这个问题。 还有其他人可以调查这个吗?

抱歉,我现在没有足够的时间来解决这个问题。

如果你想调查,我建议:

我们在带有 Cordova 的 Ionic Angular v4 应用程序中使用@sentry/browser ,并且在源映射堆栈跟踪方面存在类似问题。

我们确定它与Cordova 的 Ionic Web View及其在 iOS 上使用自定义方案有关(Cordova 为 $# ionic:// 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 :这解决了不正确的文件名,但是您如何处理未定义的linenocolno ? 像@stripathix一样,当在 iOS Web 应用程序的电容器内运行时,这些框架具有未定义的那些。 例子:

image

对比
image

尽管在我看来,它似乎不是缺少信息,而是缺少整个框架

@kamilogorek :我可以确认 originalException 确实有列和行信息,见下文:

image

甚至不知道如何开始调试 tracekit,但也许有人在上面发现了一些明显的东西。

@silviogutierrez你有什么可以用来调试的小复制品吗? 理想情况下只是一个基本的科尔多瓦应用程序,其中缺少 col/line 的框架

@kamilogorek :我会尝试将一个放在一起,但实际上我发现了问题。 这很简单,而且正是你猜到的地方:

就在这里: https ://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

对于电容器框架的正则表达式测试, geckochrome变量都为空。 也就是说,在 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

我是否应该针对 Tracekit 打开 PR 以添加电容器协议? 如果您注意到, chrome正则表达式更灵活一些,并且似乎已经将[-a-z]作为任意数量协议的正则表达式的一部分。 我们也应该在gecko中尝试一下吗?

@silviogutierrez - 你有没有在这里得到任何解决方案? 如果需要,我可以使用您的修复程序进行 PR,甚至可以在本地进行测试。

我的修复奏效了。 不幸的是,我从来没有时间在之前/之后做一个小的复制回购。 但我已经成功使用了一段时间的修复程序。

剩下两个问题:

  1. 这可以在哨兵方面通用吗? 像 *:// 这样的协议?
  2. 或者相反,为什么电容器坚持自己的协议(并且仅在 iOS 上)? 为什么不使用 tracekit.ts 中列出的其中之一呢?

这些都是很好的问题,我也没有很好的答案。

  1. 看起来你已经用你的正则表达式弄清楚了。

  2. 我认为这只是整个 Cordova / Ionic / Capacitor 自定义方案或其他东西的一部分。 我觉得它也与 SSL pinning 策略有关,以逃避应用程序中的 CORS 预检,但我不确定。

@kamilogorek - 我不太确定你想要什么复制品。 我猜这是我最好的镜头:

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

我分叉了这个 repo,添加了 Sentry,添加了一个 React 错误边界,添加了一个崩溃按钮。 它有 Cordova 运行指令。 它与现代 Cordova 的基线一样。 让我知道这是否是您正在寻找的。

@kamilogorek @silviogutierrez - 好的,我在这里抱怨完了。 我得出的结论是,这个问题的负担归结为 Gecko / safari 的残酷钝化错误实现。 感谢您在这里对我的耐心和帮助。

@toddtarsi抱歉,我在这里没有足够的时间,但感谢您让我知道。 让我关闭此问题,但如有必要,请随时 ping 我和/或打开新问题。 谢谢!

@kamilogorek你想让我按照@toddtarsi的建议创建一个新问题,还是只提交一个参考这个问题的公关?

正如上面@silviogutierrez的评论(https://github.com/getsentry/sentry-javascript/issues/1863#issuecomment-563364652)所指出的,这是 sentry-javascript 的 tracekit 调整版本特有的问题,并且可以轻松在这个项目中修复(https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts#L49)。

问题:电容器应用程序不会在 iOS 中发送可映射的堆栈跟踪,因为壁虎正则表达式不允许他们的电容器:// url 方案。
解决方案:将电容器 url 方案添加到壁虎正则表达式中。

我即将分叉该项目并进行更改以供我自己使用,如果您希望我提交拉取请求,请告诉我!

@seanwu1105我没有。 我现在在生产中运行它,没有发现任何问题。

@mrlowe您是否有计划进行 PR 以在下一个版本中向所有人提供该更改? 在 iOS 的混合应用程序中使用 Capacitor 时,我们面临同样的问题,这个修复https://github.com/mrlowe/sentry-javascript/commit/3a09f918e0cbadfdbc1c11d6d779d4718d597fb0对我们有用。 谢谢!

@albertinad我没有收到来自@kamilogorek的任何回复,所以我将创建 PR 并参考这个问题。 如果它没有被拾起,我想我们可以创建一个新问题。

抱歉@mrlowe回复晚了,很容易错过已经关闭的问题中的提及。 会关注PR,谢谢!

此页面是否有帮助?
0 / 5 - 0 等级