Can someone help me understand src/interceptor.js?

[umizoomi]

I'm having this uncaught exception generated in AlpineJS causing to break a certain page for this project I'm working on.

However, I'm having trouble pinpointing the root cause. It is generated in the function initInterceptors

So now I'm trying to understand what this function does.

What are interceptors in AlpineJS?

This issue seems to happen om some page loads, without AdBlocker.
Most times it works. But then at times this uncaught exception is generated. Breaking the page

I think it has something to do with some component or javascript that is incorrectly loaded. But I'm having trouble pinpointing to this issue to the root cause :(

Below is a screenshot.

[ekwoka]

Are you storing an iframe in an x-data on initialization?

The userspace way to solve this would be to attach the iframe to the data in the x-init, and not in the initial constructor.

Or do you have a stack trace?

Or is it just that you have an iframe inside of a component but it is not being stored in any way?

[ekwoka]

Okay, so the script is adding an iframe inside a component...

okay, this is a bug. the interceptors should not be looking at magics, which I think is the issue, that it's checking $el and eventually gets to the iframe and then starts checking it's properties. I'll make a PR.

So, in your thing, make sure no iframe ads are being injected into your components.

Or maybe it's not quite a bug...and that something is actually storing the iframe somehow?...or any elements? or document? or the window? anything?

[umizoomi]

hey @ekwoka,

I am unsure how to verify whether an iframe is being placed inside a component. If i look at the dom, it doesn't seem to be the case.

Perhaps I can change some code in the alpine3.js bundle to more easily find the culprit, but I first need to understand what this is suppose to be doing :P

Can you help me understand what interceptors in the AlpineJS context is?

[ekwoka]

you can use the sources tab in the devtools to add a breakpoint at the start of that function, before the first recurse call, and walk through the code and see what might be happening.

Also, update Alpine.

[umizoomi]

Thanks @ekwoka 🙏

I'm still not quite following how AlpineJS eventually starts checking the frame's properties.

However, I found the culprit by adding a try catch around the if else block that calls the recurse. This also solves the issue in this case.

try {
    if (typeof value === "object" && value !== null && value._x_interceptor) {
        obj[key] = value.initialize(data2, path, key);
    } else {
        if (isObject2(value) && value !== obj && !(value instanceof Element)) {
            recurse(value, path);
        }
    }
} catch (e) {
    if (e instanceof DOMException && e.name === 'SecurityError') {
        console.debug('Skipping cross-origin property access:', path);
        return;
    }
    throw e;
}

Anyway, this site is using AlpineJS v3.12.3.
I will check whether updating is feasible in this case, as there are many more (important) components that would have to be checked.
I'll probably look to load the script causing issues after AlpineJS is initialized

Thanks again!

[ekwoka]

You should be able to see, from the debugger the stack or path of how it got there.