How to get the stacktrace of an error when using rxjs? - javascript

I'm using angular-cli to build a small angular2 web app and I'm debugging with chrome dev-tools.
Clearly I'm doing something wrong if I need to guess each time where is the source of the error and what is the stack-trace of that error.
Take for example this error:
error_handler.js:45EXCEPTION: Cannot read property 'provider' of nullErrorHandler.handleError # error_handler.js:45
error_handler.js:50ORIGINAL STACKTRACE:ErrorHandler.handleError # error_handler.js:50
error_handler.js:51TypeError: Cannot read property 'provider' of null
at MapSubscriber.project (auth.effects.ts:80)
at MapSubscriber._next (map.js:77)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at DistinctUntilChangedSubscriber._next (distinctUntilChanged.js:72)
at DistinctUntilChangedSubscriber.Subscriber.next (Subscriber.js:89)
at MapSubscriber._next (map.js:83)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at MapSubscriber._next (map.js:83)
at MapSubscriber.Subscriber.next (Subscriber.js:89)
at RefCountSubscriber.Subscriber._next (Subscriber.js:125)ErrorHandler.handleError # error_handler.js:51
zone.js:355Unhandled Promise rejection: Cannot read property 'provider' of null ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'provider' of null(…) TypeError: Cannot read property 'provider' of null
at MapSubscriber.project (http://localhost:4200/main.bundle.js:35342:83)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4171:35)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at DistinctUntilChangedSubscriber._next (http://localhost:4200/main.bundle.js:25485:30)
at DistinctUntilChangedSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4177:26)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at MapSubscriber._next (http://localhost:4200/main.bundle.js:4177:26)
at MapSubscriber.Subscriber.next (http://localhost:4200/main.bundle.js:395:18)
at RefCountSubscriber.Subscriber._next (http://localhost:4200/main.bundle.js:431:26)consoleError # zone.js:355
zone.js:357Error: Uncaught (in promise): TypeError: Cannot read property 'provider' of null
at resolvePromise (http://localhost:4200/main.bundle.js:93214:31)
at http://localhost:4200/main.bundle.js:93191:13
at ZoneDelegate.invoke (http://localhost:4200/main.bundle.js:92988:28)
at Zone.run (http://localhost:4200/main.bundle.js:92881:43)
at http://localhost:4200/main.bundle.js:93247:57
at ZoneDelegate.invokeTask (http://localhost:4200/main.bundle.js:93021:37)
at Zone.runTask (http://localhost:4200/main.bundle.js:92921:47)
at drainMicroTaskQueue (http://localhost:4200/main.bundle.js:93153:35)consoleError # zone.js:357
The problem:
This errors means nothing to me. It's completely uselss and un readble.
I got lucky that I saw this line (sometimes I dont get any indication where the error is): at MapSubscriber.project (auth.effects.ts:80) - This line is the only line that usefull here to get some idea how to fix that bug.
Trying to understand the stack-trace will be pointless because its all rxjs stack-trace.
My question:
I would like to know my code's stack-trace. Is that possible?
where in my code the subscription to that observable happens.
If its an observable from ngrx, then where in my code someone dispanched that action that causes the error.
Its more general question about how to debug async code with rxjs then fixing this specific bug.

It happened in the projection method you provided to a map operator. The clue is at the top of your stack. MapSubscriber.project.
Basically you read stack traces from the top. The top most call is where the error was thrown (or rethrown).
In RxJS 5, there are usually two or three calls per operator. Each operator has a subscriber named after it that does the work. MapSubscriber.Subscriber.next MapSubscriber._next etc

Related

System is not defined with dynamic import in angular 13

I have below code for dynamic load the locales
declare var System;
let angularLocale = convertAbpLocaleToAngularLocale(abp.localization.currentLanguage.name);
System.import(`#angular/common/locales/${angularLocale}.js`)
.then(module => {
registerLocaleData(module.default);
NgxBootstrapDatePickerConfigService.registerNgxBootstrapDatePickerLocales().then(_ => {
resolve(true);
abp.ui.clearBusy();
});
}, reject);
If I don't use the System the build command throws an exception as
Module not found: Error: Package path ./locales is not exported from package ....\node_modules\#angular\common (see exports field in .....\node_modules\#angular\common\package.json)
If I use the System I get an exception in the browser console as
core.mjs:6495
ERROR Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
at registerLocales (root.module.ts:193)
at root.module.ts:64
at ZoneDelegate.invoke (zone.js:400)
at Object.onInvoke (core.mjs:25877)
at ZoneDelegate.invoke (zone.js:399)
at Zone.run (zone.js:160)
at zone.js:1318
at ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (core.mjs:25864)
at ZoneDelegate.invokeTask (zone.js:433)
at resolvePromise (zone.js:1255)
at zone.js:1325
at ZoneDelegate.invokeTask (zone.js:434)
at Object.onInvokeTask (core.mjs:25864)
at ZoneDelegate.invokeTask (zone.js:433)
at Zone.runTask (zone.js:205)
at drainMicroTaskQueue (zone.js:620)
I had the same problem with "Module not found".
In the application we use i18n.
Now I get the the country from the i18n, and then set the locale to the pipe, witch holds this information.
So I do not need the dynamic Modul loading anymore.
Maybe that helps you?

Rails 5 - Why we will get DOMException error in ReactJS?

In rails 5, I am using "react": "^15.4.1" for front-end.
I am getting an error like
Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at removeChild (http://localhost:8080/js/main.js:20902:14)
at Object.processUpdates (http://localhost:8080/js/main.js:21046:11)
at Object.dangerouslyProcessChildrenUpdates [as processChildrenUpdates] (http://localhost:8080/js/main.js:82797:27)
at processQueue (http://localhost:8080/js/main.js:85253:29)
at ReactDOMComponent._updateChildren (http://localhost:8080/js/main.js:85471:9)
at ReactDOMComponent.updateChildren (http://localhost:8080/js/main.js:85415:12)
at ReactDOMComponent._updateDOMChildren (http://localhost:8080/js/main.js:82569:12)
at ReactDOMComponent.updateComponent (http://localhost:8080/js/main.js:82387:10)
at ReactDOMComponent.receiveComponent (http://localhost:8080/js/main.js:82349:10)
at Object.receiveComponent (http://localhost:8080/js/main.js:10257:22)
And also I am getting an another error like
Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
at Function._onError (main.js:362)
at main.js:304
at <anonymous>
Why these errors will come? Please help me to solve this issue, I am new to ReactJS.

How do I trace an `EmptyError: no elements in sequence` bug in an angular project

I'm working on an Angular project that's throwing an error: core.js:1350 ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence but I can't seem to trace it to any of my app source code. The stack trace all points to rxjs classes.
Can anyone tell me how I can debug this error so that I can get to the real error in the code?
core.js:1350 ERROR Error: Uncaught (in promise): EmptyError: no elements in sequence
EmptyError: no elements in sequence
at new EmptyError (EmptyError.js:28)
at FirstSubscriber._complete (first.js:154)
at FirstSubscriber.Subscriber.complete (Subscriber.js:122)
at MergeMapSubscriber._complete (mergeMap.js:150)
at MergeMapSubscriber.Subscriber.complete (Subscriber.js:122)
at MapSubscriber.Subscriber._complete (Subscriber.js:140)
at MapSubscriber.Subscriber.complete (Subscriber.js:122)
at ArrayObservable._subscribe (ArrayObservable.js:124)
at ArrayObservable.Observable._trySubscribe (Observable.js:172)
at ArrayObservable.Observable.subscribe (Observable.js:160)
at new EmptyError (EmptyError.js:28)
at FirstSubscriber._complete (first.js:154)
at FirstSubscriber.Subscriber.complete (Subscriber.js:122)
at MergeMapSubscriber._complete (mergeMap.js:150)
at MergeMapSubscriber.Subscriber.complete (Subscriber.js:122)
at MapSubscriber.Subscriber._complete (Subscriber.js:140)
at MapSubscriber.Subscriber.complete (Subscriber.js:122)
at ArrayObservable._subscribe (ArrayObservable.js:124)
at ArrayObservable.Observable._trySubscribe (Observable.js:172)
at ArrayObservable.Observable.subscribe (Observable.js:160)
at resolvePromise (zone.js:824)
at resolvePromise (zone.js:795)
at eval (zone.js:873)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4621)
at ZoneDelegate.invokeTask (zone.js:424)
at Zone.runTask (zone.js:192)
at drainMicroTaskQueue (zone.js:602)
at <anonymous>
This bug is due to the last version of Angular's Router.
You can reverse your version or append pathMatch: 'full' to all of your routes.
See github issue.
Example

angularjs - Ionic/Angular1 Tlantic/cdv-socket-plugin error

TypeError: Cannot read property 'isConnected' of null
at PosCommunicator.isConnected (app.all.min.js:2926)
at app.all.min.js:3298
at Scope.$emit (libs.all.min.js:56256)
at Object.emit (libs.all.min.js:83720)
at Object.transition (libs.all.min.js:83550)
at libs.all.min.js:85379
at libs.all.min.js:83428
at Object.render (libs.all.min.js:83517)
at Object.init (libs.all.min.js:83427)
at Object.self.render (libs.all.min.js:85373)
Uncaught TypeError: Cannot read property 'plugins' of undefined
at app.all.min.js:40
at Array.<anonymous> (libs.all.min.js:81844)
at onPlatformReady (libs.all.min.js:28102)
at onWindowLoad (libs.all.min.js:28083)
I installed Tlantic/cdv-socket-plugin
but socketplugin method cannot loaded ('isConnected' of null)
Anyone can help me to solve this problem.
https://github.com/Tlantic/cdv-socket-plugin

TypeError in assemble helpers

Despite not using the filter helper in a template a TypeError is preventing assemble completing. It looks like the options parameter isn't being passed or is being passed as undefined.
Here's the stack trace:
Warning: Cannot read property 'data' of undefined Use --force to continue.
TypeError: Cannot read property 'data' of undefined
at Object.helpers.filter (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars-helpers/lib/helpers/helpers-collections.js:357:15)
at Object.eval (eval at <anonymous> (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:564:23), <anonymous>:41:50)
at Object.<anonymous> (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/runtime.js:30:33)
at Object.search (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:1274:21)
at Object.Handlebars.VM.invokePartial (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/runtime.js:81:28)
at Object.eval (eval at <anonymous> (/home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:564:23), <anonymous>:86:17)
at /home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/runtime.js:30:33
at /home/tim/workspace/projects/severine/node_modules/assemble/node_modules/assemble-handlebars/node_modules/handlebars/lib/handlebars/compiler/compiler.js:1274:21
at Object.render (/home/tim/workspace/ae_projects/severine/node_modules/assemble/node_modules/assemble-handlebars/index.js:38:17)
at Object.render (/home/tim/workspace/projects/severine/node_modules/assemble/lib/engine.js:87:17)
Aborted due to warnings.
If I comment out the body of the filter function, assemble runs normally.
#tim we usually see these errors when there's a conflict with a property name on the data context and a handlebars helper.
If you have filter as a property in your data context, try using {{this.filter}} instead of {{filter}} to give Handlebars a hint that it should be using the property instead of the helper.
This question is from this issue on Github. I hope this helps anyone else having the same issue.

Categories