[Bug] skywalking-client-js not sending errors to OAP server

Search before asking

• I had searched in the issues and found no similar issues.

Apache SkyWalking Component

NodeJS Client Side Agent (apache/skywalking-client-js)

What happened

When an error occurs in our vue app the skywalking client doesn’t appear to report it to the skywalking dashboard.

It is discussed in this topic however I have done more troubleshooting today. https://github.com/apache/skywalking/discussions/8723

What you expected to happen

If an error happens in our vue app the skywalking-client-js will report the error to the OPM server and the error will appear in the trace or the errors chart.

How to reproduce

I have made a vue app with the following bits of code to activate skywalkings

main.js

Vue.config.productionTip = false;
Vue.config.errorHandler = (error) => {
    console.trace("Error Event Happened: ", error);
    ClientMonitor.reportFrameErrors(
        {
            collector: "https://skywalking",
            service: name,
            pagePath: router.currentRoute,
            serviceVersion: `v${version}`,
            vue: true,
        },
        error,
    );
};

router.js

router.beforeEach(async (to, _from, next) => {
    ClientMonitor.setPerformance({
        collector: "https://skywalking",
        service: name,
        pagePath: to.path,
        serviceVersion: `v${version}`,
        useFmp: true,
        vue: true,
    });

    return next();
});

Page to make a fake error (Should be reported into skywalking dashboard.)

<template>
    <v-container fluid fill-height>
        <v-row>
            <v-col class="d-flex flex-column align-center justify-center text-center">
                <h1>404: Page Not Found!</h1>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import axios from "axios";

export default {
    created() {
        // Axios call to a non existent domain to make error in console log
        console.log("Making an Error");
        axios.get("https://domain.not.exist.com/error-page");
    },
};
</script>

The performance reports appear to be getting through just not the error reports.

Anything else

Only when an error is thrown in the app, the errors and traces don’t appear in the skywalking dashboard.

Are you willing to submit PR?

• Yes I am willing to submit a PR!

Code of Conduct

• I agree to follow this project’s Code of Conduct

[wu-sheng]

@Fine0830 I think this may be caused by 3rd party SAAS services, like Google’s, they put some rules about this for security, and out of users’ control. From SkyWalking perspective, we should expose some APIs to set URL whitelist which could not be traced(no header injection, and only span sending out or not). WDYT?

[Fine0830]

CORS policy is included in the doc. It is not SkyWalking’s special requirement, it is from HTTPS.

CORS is all working for both skywalking and the app, what I don’t understand is when dont have skywalking register method in the app our firebase works well and has no issues. When I add skywalking to our app then firebase breaks and complains of cors errors. The only thing I can sugguest is the way Skywalking is handling the XHR requests in modifying something that google is looking for in the http headers and is being blocked (some security setting)

Does skywalking client respect the nosniff header of the HTTP request or does it intercept all requests. I wont be able to do any more tests until Monday now but would appreciate it if you would setup a demo on your side and test with firebase as im confident this is a skywalking issue.

I found the cause of the problem. I noticed your requests aren’t simple requests, so the requests would trigger a CORS preflight. The preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers. When the skywalking-client-js set trace parameters in your app requests header, the preflight request status code is 403. As your preflight requests are fail, CORS happened here.

From my perspective, your server don’t allow you to customize parameter in the http header and you should resolve this problem.