要求:请在打开新问题之前查看此清单
@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"
}
堆栈信息在哨兵上看起来像这样
嗨@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
不过,我们在新的@sentry/browser
SDK 中对其进行了一些更改,因此您可能希望在我们进行更多调查之前先尝试一下。
@kamilogorek
使用@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/
我从未使用过电容器或 Ionic 4 tbh。 你能提供我可以用来调试的最小可能的复制案例吗? 我没有足够的时间来学习如何设置它。
@kamilogorek没问题我已经创建了一个测试项目来重现该问题。 电容器与科尔多瓦完全相似。 相同的调试过程。
https://github.com/stripathix/ionic-vue
要触发错误,只需单击触发错误按钮
为了运行应用程序,我在 README.md 上添加了步骤。 这很容易。 几乎类似于 Cordova 环境。
要调试混合应用程序,它与 Cordova 调试完全相同。 只需在模拟器上运行应用程序,然后从 safari 打开 Inspector 以查看在模拟器上运行的应用程序。
以下是应用程序运行混合移动应用程序时记录的错误链接。
https://sentry.io/share/issue/a19f3ecd72eb4e6fa216e4146ad91038/
嗨, @kamilogorek你有机会调查一下吗?
不是真的,这些天我没有太多空闲时间。 有一天会尝试调查它,对不起。
@kamilogorek我也遇到了这个问题。 还有其他人可以调查这个吗?
抱歉,我现在没有足够的时间来解决这个问题。
如果你想调查,我建议:
beforeSend
回调并查看它是否是第二个参数hint
,是否具有hint.originalException
属性,如果是,请调查它的堆栈并查看信息是否存在computeStackTrace
方法中设置断点,然后从那里一步一步它如何消化error.stack
信息我们在带有 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 :这解决了不正确的文件名,但是您如何处理未定义的lineno
和colno
? 像@stripathix一样,当在 iOS Web 应用程序的电容器内运行时,这些框架具有未定义的那些。 例子:
对比
尽管在我看来,它似乎不是缺少信息,而是缺少整个框架。
@kamilogorek :我可以确认 originalException 确实有列和行信息,见下文:
甚至不知道如何开始调试 tracekit,但也许有人在上面发现了一些明显的东西。
@silviogutierrez你有什么可以用来调试的小复制品吗? 理想情况下只是一个基本的科尔多瓦应用程序,其中缺少 col/line 的框架
@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
我是否应该针对 Tracekit 打开 PR 以添加电容器协议? 如果您注意到, chrome
正则表达式更灵活一些,并且似乎已经将[-a-z]
作为任意数量协议的正则表达式的一部分。 我们也应该在gecko
中尝试一下吗?
@silviogutierrez - 你有没有在这里得到任何解决方案? 如果需要,我可以使用您的修复程序进行 PR,甚至可以在本地进行测试。
我的修复奏效了。 不幸的是,我从来没有时间在之前/之后做一个小的复制回购。 但我已经成功使用了一段时间的修复程序。
剩下两个问题:
这些都是很好的问题,我也没有很好的答案。
看起来你已经用你的正则表达式弄清楚了。
我认为这只是整个 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,谢谢!
最有用的评论
@seanwu1105我没有。 我现在在生产中运行它,没有发现任何问题。