track.js | Semantic analytics event triggers for segment.io | Analytics library

You can add a new balise script via JS

Please don't judge the code quality, I made it just for the sake of testing and making it do what you initially asked about selecting the closest element.

Check this sandbox with a working example

The key here is the usage of elementFromPoint function, the sandbox should just give a general idea and you can tailor it to your needs!

Taking a general view the problem is to intercept and capture arguments supplied in calls to console.warn and complete the intention of showing warnings on the console with an indication of where the warning arose in code.

First up you can't hide from a real console.warn call where the call was made from, so simplify matters by dropping all subterfuge. The two options that remain are to produce a full or partial trace of where calls to the substituted warn function are made from.

1. Full trace.

   In the intercepted warn function make a console.trace call.

2. Partial trace.

   In the intercepted warn function create a new Error object, slice one or more lines from the object's stack property and log them to the console without using console.warn.

The biggest problem with the second option is that errorObject.stack is not standardized in web standards - while you may test it and achieve outstanding results (with minor differences) in browsers tried, there is no guarantee that it will work in all browsers.

In conclusion solutions that you implement depend on the use case - is it for in-house testing, or if on the web do you need to sniff the presence of Error Object stack properties before using them.

As a side note, console.xxx functions accept multiple parameters which the posted substitute does not record.

Here's a quick example showing the console.warn intermediate function (anonymous in the post) being called directly. Which lines to slice may need fine tuning, and if emoji are not acceptable then substitute as needed:

"retrieveData" is async function and hence returns a Promise.
What happened was it didn't finish retrieving the data and hence newData got 1 object out of all the array.

Try changing updateData like this:

Change your TrackList component to this:

You can manually create the history object that you can listen to for changes with the createHistory function. You could attach a listener and send a pageview event there.

Example

Since authInterceptor function is used as an callback function, the place where it is being invoked has set the context to be undefined i.e this will be undefined.

To fix this you can change authInterceptor function into an arrow function.

Update

Use authInterceptor: async (error) => { instead of async authInterceptor(error) {.

Alternatively you can also use bind method where you register your interceptor in constructor like this.axios.interceptors.response.use(null, this.authInterceptor.bind(this));

Not exactly sure why this is happening, but when console logging this.props.tracks in Tracklist it is the defined, passed array from SearchResults then becomes undefined, thus causing the error you see.

QUICK FIX Use Guard Pattern

Try doing it this way:

DataTrack.js: