👀 [Frontend] 282 adding initial instrumentation setup

[xoscar]

Fixes #283.

Changes

Adds the instrumentation code for the front-end application. Changes include:

1. Adding auto instrumentation and propagation for the browser side.
2. Adding manual and auto instrumentation for the server (node.js) side.

https://www.loom.com/share/81c1c009c7e3492087ceecf8a0c6f21d

Note

This is just the initial instrumentation wire up, for quality attributes, spans, etc we can have a discussion later on

[xoscar]

Hey @puckpuck thanks for the review! 😄 I just updated the PR with your comments. Let me know what you think 😄

[puckpuck]

I'm running your branch and getting several errors in the frontend logs. I'm unable to use the UI to place an order as well.

Unhandled Promise rejection: Cannot find module for page: /product/9SIQT8TOJO ; Zone: <root> ; Task: Promise.then ; Value: PageNotFoundError: Cannot find module for page: /product/9SIQT8TOJO
    at getPagePath (/app/node_modules/next/dist/server/require.js:50:15)
    at Object.requirePage (/app/node_modules/next/dist/server/require.js:55:22)
    at /app/node_modules/next/dist/server/load-components.js:56:50
    at ZoneDelegate.invoke (/app/node_modules/zone.js/bundles/zone.umd.js:400:30)
    at Zone.run (/app/node_modules/zone.js/bundles/zone.umd.js:160:47)
    at /app/node_modules/zone.js/bundles/zone.umd.js:1318:38
    at ZoneDelegate.invokeTask (/app/node_modules/zone.js/bundles/zone.umd.js:434:35)
    at Zone.runTask (/app/node_modules/zone.js/bundles/zone.umd.js:205:51)
    at drainMicroTaskQueue (/app/node_modules/zone.js/bundles/zone.umd.js:620:39)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  code: 'ENOENT'
} Error: Cannot find module for page: /product/9SIQT8TOJO
    at getPagePath (/app/node_modules/next/dist/server/require.js:50:15)
    at Object.requirePage (/app/node_modules/next/dist/server/require.js:55:22)
    at /app/node_modules/next/dist/server/load-components.js:56:50
    at ZoneDelegate.invoke (/app/node_modules/zone.js/bundles/zone.umd.js:400:30)
    at Zone.run (/app/node_modules/zone.js/bundles/zone.umd.js:160:47)
    at /app/node_modules/zone.js/bundles/zone.umd.js:1318:38
    at ZoneDelegate.invokeTask (/app/node_modules/zone.js/bundles/zone.umd.js:434:35)
    at Zone.runTask (/app/node_modules/zone.js/bundles/zone.umd.js:205:51)
    at drainMicroTaskQueue (/app/node_modules/zone.js/bundles/zone.umd.js:620:39)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

[xoscar]

Hey @puckpuck I just updated the PR with a fix for the error you were seeing, we still need to fix the currency service issue but I think that can be done in a separate PR as the problem exists in the main branch.

The problem was that we instantiated two zone managers and Next.js already has one.

[puckpuck]

@xoscar, now that we fixed the other services, can you update this branch so we have a clean setup to work from?

[xoscar]

@puckpuck done 😃

[puckpuck]

Root spans for traces initiated from the browser are missing.

Using chrome dev tools, you can see 405 errors to send a payload of what seems to be an OTLP JSON payload.

[xoscar]

@puckpuck the latest commit I submitted has some fixes for that problem, it should now have the correct root span starting from the client side 😄

[puckpuck]

Tested it end to end on my side. Works wonderfully!

[cartersocha]

@xoscar update this branch & we'll merge next

[xoscar]

@cartersocha Done 😉

[cartersocha]

Did you implement Michael's suggestions? I'm about to resolve the conversations.

Also please add a change log entry 😀

[xoscar]

@cartersocha Yes and Done

[cartersocha]

FYI @austinlparker you might want to pull latest for your demo