Skywalking: Skywalking Client JS - ES module

[margauxcabrera]

Please answer these questions before submitting your issue.

• Why do you submit this issue?
• [ ] Question or discussion
• [X] Bug
• [ ] Requirement
• [ ] Feature or performance improvement

---

Question

• What do you want to know?
  Can you help me resolve the issue I'm encountering while following the steps in the documentation to use Skywalking Client JS (https://github.com/apache/skywalking-client-js/tree/v0.2.0).

---

Bug

• Which version of SkyWalking, OS, and JRE?
  Skywalking Client JS 0.3.0

• Which company or project?

• What happened?
  If possible, provide a way to reproduce the error. e.g. demo application, component version.
  I am encountering this error:

skywalking-client-js/index.js:18
import './lib/index';
^^^^^^
SyntaxError: Cannot use import statement outside a module

I can add "type":"module" bin package.json, however, I don't think that's a good idea cause node_modules are not supposed to be included in the deployment. And when I add it, another issue comes up:

Cannot find module '.../node_modules/skywalking-client-js/lib/index' imported from .../node_modules/skywalking-client-js/index.js

---

Requirement or improvement

• Please describe your requirements or improvement suggestions.

[Fine0830]

I have no your problem in my projects. Could you provide your way to reproduce the error?

[margauxcabrera]

Hi,

Here are the steps I took:

1. Initialise a new project: npm init -y
2. Install skywalking-client-js: npm install skywalking-client-js --save-dev
3. Create index.js and add the following code:

import ClientMonitor from 'skywalking-client-js';
ClientMonitor.register({
  collector: 'http://127.0.0.1:8080',
  service: 'local',
  pagePath: '/',
  serviceVersion: 'v1.0.0',
});

1. Run node index

Here are my node and npm versions in case you need them:
skywalking-client % node --version
v15.6.0
skywalking-client % npm --version
7.4.0

[Fine0830]

Ah... skywalking-client-js is browser agent. Probably your case suit for https://github.com/apache/skywalking-nodejs.

[margauxcabrera]

Ah. Thanks! We were able to add it and we can see that register already worked. We were also able to create a proxy for /browser/perfData. By any chance, is there a documentation for these other APIs:

/browser/errorLog
/browser/errorLogs
/v3/segment
/v3/segments

I notice that these are also called and we're currently encountering some issues since we also need to create proxies for these methods.

Thanks a lot!

[margauxcabrera]

Is there an API for get segments? I saw in this documentation (https://github.com/apache/skywalking/blob/master/docs/en/protocols/HTTP-API-Protocol.md) that there are POST requests. However, the client is also calling GET

What is the expectation there? Thanks in advance!

[Fine0830]

You can read https://github.com/apache/skywalking-client-js/tree/v0.2.0#parameters and add collect parameter.

[margauxcabrera]

Yes. I did that. However, from the documentations I've seen, I only have POST to /broswer/perfData. I can't find any documentation for the other URLs especially for GET /v3/segments. This specific GET request is throwing an error on our app during login. I replaced register with setPerformance and we are no longer encountering the issue and it's also not calling GET /v3/segments. However, I think that's just a workaround. It would be good to know how to handle GET /v3/segments call.

[wu-sheng]

0.2.0 doesn't call segment reporting. It is latest feature of 0.3.0. Check the changelog.

[margauxcabrera]

Here's the call for your reference:

    var full = location.protocol+'//'+location.hostname+(location.port ? ':'+location.port: '');
    ClientMonitor.setPerformance({
        collector: full,
        service: "nodeid" + ${nodeId},
        serviceVersion: 'v1.0.0',
        pagePath: location.href
    });

[margauxcabrera]

0.2.0 doesn't call segment reporting. It is latest feature of 0.3.0. Check the changelog.

I am using 0.3.0. Should I downgrade to 0.2.0?

[wu-sheng]

/v3/segments is exposed by OAP too, using Rest port like PerfData. If you use the supported way to call your backend from the browser app, the segment data will be posted too.

[margauxcabrera]

Can you please tell me if it requires some parameters? 'Cause I've tried it in postman and got this error:

This is the error from the logs:

2021-01-20 21:32:59,905 - org.eclipse.jetty.server.HttpChannel -71700376 [qtp1493883713-77] WARN  [] - /v3/segments
java.lang.UnsupportedOperationException: null
    at org.apache.skywalking.oap.server.receiver.trace.provider.handler.v8.rest.TraceSegmentReportBaseServletHandler.doGet(TraceSegmentReportBaseServletHandler.java:64) ~[skywalking-trace-receiver-plugin-8.3.0.jar:8.3.0]
    at org.apache.skywalking.oap.server.library.server.jetty.JettyJsonHandler.doGet(JettyJsonHandler.java:44) ~[library-server-8.3.0.jar:8.3.0]
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:687) ~[javax.servlet-api-3.1.0.jar:3.1.0]
    at org.apache.skywalking.oap.server.library.server.jetty.JettyJsonHandler.service(JettyJsonHandler.java:107) ~[library-server-8.3.0.jar:8.3.0]
    at javax.servlet.http.HttpServlet.service(HttpServlet.java:790) ~[javax.servlet-api-3.1.0.jar:3.1.0]
    at org.apache.skywalking.oap.server.library.server.jetty.JettyJsonHandler.service(JettyJsonHandler.java:112) ~[library-server-8.3.0.jar:8.3.0]
    at org.eclipse.jetty.servlet.ServletHolder.handle(ServletHolder.java:763) ~[jetty-servlet-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.servlet.ServletHandler.doHandle(ServletHandler.java:551) ~[jetty-servlet-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.handler.ScopedHandler.nextHandle(ScopedHandler.java:233) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.handler.ContextHandler.doHandle(ContextHandler.java:1363) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.handler.ScopedHandler.nextScope(ScopedHandler.java:188) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.servlet.ServletHandler.doScope(ServletHandler.java:489) ~[jetty-servlet-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.handler.ScopedHandler.nextScope(ScopedHandler.java:186) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.handler.ContextHandler.doScope(ContextHandler.java:1278) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.handler.ScopedHandler.handle(ScopedHandler.java:141) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.handler.HandlerWrapper.handle(HandlerWrapper.java:127) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.Server.handle(Server.java:500) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.HttpChannel.lambda$handle$1(HttpChannel.java:383) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.HttpChannel.dispatch(HttpChannel.java:547) ~[jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.HttpChannel.handle(HttpChannel.java:375) [jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.server.HttpConnection.onFillable(HttpConnection.java:273) [jetty-server-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.io.AbstractConnection$ReadCallback.succeeded(AbstractConnection.java:311) [jetty-io-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.io.FillInterest.fillable(FillInterest.java:103) [jetty-io-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.io.ChannelEndPoint$2.run(ChannelEndPoint.java:117) [jetty-io-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.util.thread.strategy.EatWhatYouKill.runTask(EatWhatYouKill.java:336) [jetty-util-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.util.thread.strategy.EatWhatYouKill.doProduce(EatWhatYouKill.java:313) [jetty-util-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.util.thread.strategy.EatWhatYouKill.tryProduce(EatWhatYouKill.java:171) [jetty-util-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.util.thread.strategy.EatWhatYouKill.run(EatWhatYouKill.java:129) [jetty-util-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.util.thread.ReservedThreadExecutor$ReservedThread.run(ReservedThreadExecutor.java:375) [jetty-util-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.util.thread.QueuedThreadPool.runJob(QueuedThreadPool.java:806) [jetty-util-9.4.28.v20200408.jar:9.4.28.v20200408]
    at org.eclipse.jetty.util.thread.QueuedThreadPool$Runner.run(QueuedThreadPool.java:938) [jetty-util-9.4.28.v20200408.jar:9.4.28.v20200408]
    at java.lang.Thread.run(Thread.java:834) [?:?]

[wu-sheng]

If you want to send the data by your self, read the protocol doc. For segments, it is https://github.com/apache/skywalking/blob/v8.3.0/docs/en/protocols/HTTP-API-Protocol.md