I'm working on a project that my team upgraded from Vue2/Webpack to Vue3/Vite. We use a crash monitoring tool, Bugsnag, to notify us when a crash occurs. We've recently noticed that when a crash happens in Safari, the stack traces are completely invalid. When I reproduce a bug in Chrome or FireFox, the stack traces are correct, but reproducing the same bug in Safari, the stack traces are way off, e.g. they don't even report the correct file. For example, here is the stack trace for the same bug in Chrome and Safari:
Chrome
TypeError Cannot read properties of undefined (reading 'id')
src/components/LayoutInformation.vue:148:46
src/components/LayoutInformation.vue:146:21 Proxy.mergedHoleInformation
node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js:167:24 Dh.run
node_modules/#vue/reactivity/dist/reactivity.esm-bundler.js:1101:38 get value [as value]
node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:2845:29 Object.get [as mergedHoleInformation]
src/components/LayoutInformation.vue:15:22
node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:850:20 r
node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:6579:54 Jr
node_modules/#pdga-technology/ui/dist/ui.es.js:809:10
Safari
TypeError undefined is not an object (evaluating 'n.id')
src/components/official/EventHomeTournament.vue:543:48
[native code] reduce
src/components/official/EventHomeTournament.vue:543:48 mergedHoleInformation
[native code] mergedHoleInformation
node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:26:22 run
node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:26:22 value
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 get
src/components/official/EventHomeTournament.vue:543:48
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 r
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 Jr
src/components/elements/OfflineIndicator.vue:4:53
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 r
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 Jr
src/components/elements/OfflineIndicator.vue:4:53
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 r
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 bm
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 De
node_modules/#vue/runtime-core/dist/runtime-core.esm-bundler.js:26:22 run
[native code] run
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 Jo
node_modules/#vue/compiler-core/dist/compiler-core.esm-bundler.js:2236:21 BC
[native code] promiseReactionJob
In Safari, the call stack is completely wrong. For example, the crash above happened in a function named mergedHoleInformation, which Safari's stack trace shows, but it shows that function as being in the wrong file (EventHomeTournament.vue instead of LayoutInformation.vue). Sometimes the stack traces are so large in Safari that they exceed Bugsnag's limit of 1MB, and we subsequently don't get any notification in Bugsnag whatsoever. Those same errors in Chrome/FireFox have short stack traces like the one above.
In Safari, I can view the source of our JS files and Vue components and the source looks correct to me (that is, Safari seems to interpret the source maps correctly in its developer tools). I've tried making a small, reproducible example, but have so far failed. E.g. I've made a small project with Vite/Vue3 and triggered errors in a variety of ways, and the stack traces are always correct.
We don't have much in the way of customization for Vite, mainly just #vitejs/plugin-legacy for legacy browser builds, whitespace preservation in Vue's compiler options, and a few path aliases for images. The project doesn't have many dependencies:
"dependencies": {
"#bugsnag/js": "^7.16.2",
"#bugsnag/plugin-vue": "^7.16.2",
"#fortawesome/fontawesome-pro": "^5.15.4",
"axios": "^0.24.0",
"laravel-echo": "^1.11.3",
"moment": "^2.29.1",
"pusher-js": "^7.0.6",
"uikit": "^3.12.2",
"vue": "^3.2.31",
"vue-i18n": "^9.2.0-beta.29",
"vue-router": "^4.0.14",
"vue-template-compiler": "^2.6.14",
"vuex": "^4.0.2"
},
I've found these issues that report Safari as showing incorrect line numbers in stack traces, but they're all marked as resolved:
https://github.com/getsentry/sentry-javascript/issues/2550
https://bugs.webkit.org/show_bug.cgi?id=221548
https://bugs.webkit.org/show_bug.cgi?id=235607
Any help is appreciated.
Related
I have built a RN app with Firebase. When running it on IOS i sometimes receive this errror:
TypeError: registration.listener.apply is not a function. (In 'registration.listener.apply(registration.context, args)', 'registration.listener.apply' is undefined). It only sometimes appears and dismissing it will not affect the run of the app.
Does anyone know what is causing this issue and how to fix it?
My Call stack from top to bottom is:
Emit
EventEmit.js: 105:36
__callFunction
MessageQueue.js: 423:32
__guar$argument_0
MessageQueue.js: 113:26
__guard
MessageQueue.js: 367:11
callFunctionReturnFlushedQueue
MessageQueue.js: 112:17
callFunctionReturnFlushedQueue
[native code]
In Google Play Console on the dashboard of your application there
is a graph with Crashes & ANRs.
What is the best practice to solve
crashes to provide the best service to your users? My application is
written in Python in Kivy framework.
Navigate to Quality -> Android Vitals -> Crashes and ANRs.
This lists each event and on the right you will see a "->" arrow labelled "View Details".
Click this, scroll down past the graph and you'll see the Stack traces.
This is what you need to look at to fix your code.
The top line will be the error, then it'll show the line of code where the error occurred, for example:
[code]
java.lang.NullPointerException:
at com.test.MyApp.doSomethingCool (MyClass.java:123)
at com.test.MyApp.somethingElse (AnotherClass.java:321)
[/code]
Here you have some null value causing an issue in the "doSomethingCool" function of your app and that code should be on line 123 of "MyClass.java".
The trace lines after that show what called that function that failed, so above, this is showing that "doSomethingCool" was called from function "somethingElse" on line 321 and that code is in "AnotherClass.java".
This example is for Java.
--Updated--
If you are coding in Python, then the stack trace may not show you where in your own code the problem lies. Instead your best bet is to search on Google for the top line error and hope that the answer is online.
Separately from stack trace analysis I would highly recommend that you place your project into source control with GIT or SVN, specifically so that you can see what changes might have caused an error.
Update your code in the repository only when it's working and then you will always have a safe saved version that is known as working. You can then easily compare your current code and see what changes might have caused an error. This is especially useful for Android, which regularly updates versions of shared libraries.
I have integrated crashlytics using react-native-firebase, and i have uploaded all the required dSYMs into the console. So, the crashes are shown, but they are obfuscated and they can't be tracked down in this format.
Fatal Exception: RCTFatalException: Unhandled JS Exception: TypeError: undefined is not an object (evaluating 't.code')
This error is located at:
in O
in B
in p
in RCTView
in Portal.Host
in c
in h
in s
in v
in u
in RCTView
in RCTView
in o
0 CoreFoundation
I had no success trying to de-obfuscate them somehow. Any ideas?
This is a Javascript exception, and you have probably copied the raw text. If you check in the formatted text, it will look like something like this:
Unhandled JS Exception: TypeError: undefined is not an object (evaluating 't.code') This error is located at: in O in B in p in RCTView in Portal.Host ..., stack: value#1451:1379 value#1451:1558 value#1764:2262 value#1764:1616 Tl#161:77714
This format matches the JSC (react-native) stack trace and you can use a tool like stack-beautifier to parse it in a humanly readable form. The tool also has a nice documentation of the process needed to reach a humanly readable format. In short, you will need to:
Find or re-create the source maps using react-native bundle from the needed branch, again, detailed steps in the tool’s documentation on how to do this
Extract the JSC stack trace into a new txt file, add new lines in the proper places (i.e. first one goes after "...stack:")
Run the tool with all of the above input and you should get what you are looking for
I try to setup the source maps in a hope it will cause to show a real position of an error in Chrome developer tools.
I tried these options in vue.config.js:
configureWebpack: {
devtool: 'eval-source-map',
},
and
configureWebpack: {
devtool: 'source-map',
},
But I still get such error:
This is my package.json snippet
"scripts": {
"serve": "vue-cli-service serve",
...
"devDependencies": {
"#vue/cli-plugin-babel": "^3.12.1",
"#vue/cli-plugin-pwa": "^3.12.1",
"#vue/cli-service": "^4.2.3",
How to fix it? How does an error look with correctly set up the source map?
Update: Minimum reproducible project: https://wwww.github.com/literakl/vue-errors
It happens for the errors in vue components.
The error should look something like this if the error occurs in the javascript part of the component:
Looks like you have the correct settings, my vue.config.js looks like this:
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
I also use "#vue/cli-service": "^4.2.0"
Make sure that you have restarted the serve-script -- it won't work otherwise
I'm not sure if you are already using the VueJS devtool extension, but you should definitely use that in your overall workflow as well. Available for Chrome and Firefox.
The reason I'm advising to use this is simply that sometimes your code might be correct, but as it is written in your error example "Cannot read property 'poll' of undefined" it looks like the prop poll is not being filled correctly by the parent component, or whatever is pushing data to the PollHeading.vue file.
With the Vue devtools you can inspect data, props and computed properties of a single component, watch events as they unfold and visually follow data streams throughout your application.
Escpecially with complex transfers of data this can get a little out of hand and a good tool to visualize this is a real life saver.
That said, getting explicit line numbers of an error in Vue2 is kind of a hit or miss situation; with Vue 2.5 and onward you're able to place an errorHandler() hook inside your component that will give you a detailed stacktrace. Try placing one in the PollHeading.vue file and see what output it'll give you. Should be much more detailed than the default output you got.
Your error seems to be from the template part of the component.
Maps won't work on template errors as the template is converted to a big javascript function (render) and the connection between template and the render function is lost.
Your best is to set up an error handler and log it.
I've been working on modifying the Aurelia skeleton app, and things have been going along fine. Then I added in two new jspm dependencies, bootstrap-material and aurelia-validation. Once I did that, I started getting the following two errors.
ERROR [app-router] TypeError: Cannot assign to read only property 'delegatedHandlers' of aurelia-dom-boundary
ERROR [app-router] Router navigation failed, and no previous location could be restored.
I cannot get past this. I've tried removing those dependencies, reverting things back to when they were working and I still get the errors. Any idea what could be causing it?
I believe this is just a regression in Aurelia binding library caused by this commit: https://github.com/aurelia/binding/commit/8d33813eb340c2136198916a4a757a2c577f5aab
let boundary = target.domBoundary || document,
delegatedHandlers = boundary.delegatedHandlers || (boundary.delegatedHandlers = {}),
...
I have made a comment, but did not open an Issue.
I rolled back the binding library from 0.8.4 to 0.8.2 until a fix is released.
Edit: they have fixed the issue