Installed but can't open the analytics

[kevin25]

I got these error and I can't open it

Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at uP (main.78f95494.js:18:117235)
at s (main.78f95494.js:18:59914)
at aR (main.78f95494.js:18:73377)
at u (main.78f95494.js:18:120414)
at ul (main.78f95494.js:18:111497)
at us (main.78f95494.js:18:111425)
at ua (main.78f95494.js:18:111288)
at s4 (main.78f95494.js:18:107658)
at s9 (main.78f95494.js:18:108464)
at ib (main.78f95494.js:18:47330)
ax @ main.78f95494.js:18
o.componentDidCatch.r.callback @ main.78f95494.js:18
oo @ main.78f95494.js:18
sw @ main.78f95494.js:18
sb @ main.78f95494.js:18
sb @ main.78f95494.js:18
sv @ main.78f95494.js:18
ud @ main.78f95494.js:18
uf @ main.78f95494.js:18
s9 @ main.78f95494.js:18
ib @ main.78f95494.js:18
(anonymous) @ main.78f95494.js:18
setTimeout
(anonymous) @ main.78f95494.js:10
P @ main.78f95494.js:10
C @ main.78f95494.js:10
a @ main.78f95494.js:10
batch @ main.78f95494.js:10
dispatch @ main.78f95494.js:10
setData @ main.78f95494.js:10
onSuccess @ main.78f95494.js:10
y @ main.78f95494.js:10
Promise.then
v @ main.78f95494.js:10
c @ main.78f95494.js:10
fetch @ main.78f95494.js:10
executeFetch @ main.78f95494.js:10
onSubscribe @ main.78f95494.js:10
subscribe @ main.78f95494.js:10
(anonymous) @ main.78f95494.js:10
o1 @ main.78f95494.js:18
sn @ main.78f95494.js:18
up @ main.78f95494.js:18
(anonymous) @ main.78f95494.js:18
S @ main.78f95494.js:51
A @ main.78f95494.js:51Understand this error
main.78f95494.js:27 React Router caught the following error during render Error: Minified React error #130; visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
at uP (main.78f95494.js:18:117235)
at s (main.78f95494.js:18:59914)
at aR (main.78f95494.js:18:73377)
at u (main.78f95494.js:18:120414)
at ul (main.78f95494.js:18:111497)
at us (main.78f95494.js:18:111425)
at ua (main.78f95494.js:18:111288)
at s4 (main.78f95494.js:18:107658)
at s9 (main.78f95494.js:18:108464)
at ib (main.78f95494.js:18:47330) {componentStack: '\n at Se\n at div\n at https://admin.quiltsb…quiltsbylynne.com/app/main.78f95494.js:51:155412)'}

[radoslaw-sz]

hi @kevin25 - thanks for raising the issue. Unfortunately, the error log is not showing anything useful, so we to dig into it to find the root cause.
Are you familiar maybe with "developer tools" in a browser? It will be very helpful, if you will be able firstly open it and then jump to analytics page. Error will appear, but then in the "Network" we can check if all requests went ok (you can make a screenshot of network tab and paste it here).
Does this error appear when you click "Analytics" on the sidebar?
Which version of medusa-store-analytics are you using? (I am talking about version from NPM)

Also could you please take a look at your backend logs? Maybe there we will find something useful.

[radoslaw-sz]

hi @kevin25 - any news in this topic?

[jaylinsell]

I have the same issue, so can provide additional context (or try to).

The back-end logs aren't showing any errors. The only item I assume relates, is "[10/Sep/2024:02:16:06 +0000] "GET /admin/analytics-configs HTTP/1.1" 304", but it's successful from the looks of it.

The front-end is pretty useless, it's only giving the React #130:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.[missing argument]

I'm using @rsc-labs/medusa-store-analytics v0.14.0.
Additional plugins I have are:

medusa-payment-stripe
medusa-payment-paypal
medusa-file-cloudinary
medusa-plugin-sendgrid
medusa-plugin-mailchimp

If there's anything additional I can do for you to help investigate this - let me know

[radoslaw-sz]

hi @jaylinsell - thank you for your proposal. Indeed, I would need some additional help.
Could you please tell what versions you have for medusa packages? I mean @medusajs/medusa, @medusajs/admin etc.

Additionally, could you please open network tab before clicking Analytics on the sidebar and check if any of these requests (marked in blue) have failed:

[jaylinsell]

Sure - I'll provide the whole dependancy list, just in case.

"dependencies": {
    "@medusajs/admin": "^7.1.4",
    "@medusajs/cache-inmemory": "^1.8.8",
    "@medusajs/cache-redis": "^1.8.8",
    "@medusajs/event-bus-local": "^1.9.6",
    "@medusajs/event-bus-redis": "^1.8.9",
    "@medusajs/file-local": "^1.0.2",
    "@medusajs/medusa": "^1.20.9",
    "@rsc-labs/medusa-store-analytics": "^0.14.0",
    "@tanstack/react-query": "4.22.0",
    "babel-preset-medusa-package": "^1.1.13",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "16.0.3",
    "express": "^4.17.2",
    "medusa-file-cloudinary": "^1.0.2",
    "medusa-fulfillment-manual": "^1.1.38",
    "medusa-interfaces": "^1.3.7",
    "medusa-payment-manual": "^1.0.24",
    "medusa-payment-paypal": "^6.0.2",
    "medusa-payment-stripe": "^6.0.7",
    "medusa-plugin-mailchimp": "^1.1.50",
    "medusa-plugin-sendgrid": "^1.3.12",
    "prism-react-renderer": "^2.0.4",
    "typeorm": "^0.3.16"
  },
  "devDependencies": {
    "@babel/cli": "^7.14.3",
    "@babel/core": "^7.14.3",
    "@babel/preset-typescript": "^7.21.4",
    "@medusajs/medusa-cli": "^1.3.21",
    "@types/express": "^4.17.13",
    "@types/jest": "^27.4.0",
    "@types/node": "^17.0.8",
    "babel-preset-medusa-package": "^1.1.19",
    "cross-env": "^7.0.3",
    "eslint": "^6.8.0",
    "jest": "^27.3.1",
    "rimraf": "^3.0.2",
    "ts-jest": "^27.0.7",
    "ts-loader": "^9.2.6",
    "typescript": "^4.5.2"
  }

None of those calls are even being made by the looks of it. Screenshot attached. I've filtered it out to only fetch/XHR calls to eliminate the noise, but in terms of analytics, analytics-configs seem to be the only request made in my case.

[radoslaw-sz]

thank you @jaylinsell . I copied dependencies which you put and tried locally on my side, but unfortunately I cannot reproduce it.. Let me think about it what we can do more - this error is really hard to catch.

[radoslaw-sz]

hi @jaylinsell - I have published 0.14.2 version - it is "blind shot", maybe it will fix the issue, maybe not.. Please kindly check.

[jaylinsell]

Thanks @radoslaw-sz . Unfortunately still a no-go for some odd reason.
If I get some time in the coming weeks, I'll see if I can import the actual repo in and do some debugging. If I find the issue I'll put up a PR

[radoslaw-sz]

hi @jaylinsell - thank you so much for your activity, I really want to fix this issue, but debugging of it from my side is nearly impossible :(

[jaylinsell]

@radoslaw-sz Circling back... I've found where the error is coming from, but I'm a little stuck progressing beyond or understanding why.

I essentially brought over the raw src files into medusa directly instead of importing your package to try debug this.
The issue seems to be related to the api/admin/routes that have been created, for example the orders-analytics/kind/route.ts.

When accessing the analytics page, the orders-number-overview (or relevant file) calls the /orders-analytics/[kind] api with useAdminCustomQuery. This seems to be throwing 404 errors on my app for some reason, regardless of what I do.

As this is returning a 404, the isError check is catching the result and returning Alert from medusajs/ui - for some strange reason, this component is what is then causing the whole page to break, giving the Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.[missing argument] error. If I change the Alert to a <h2 /> for example, or even the <Heading> component from medusajs/ui, it actually renders; even though it renders with an error state.

Does this give you any additional guidance on how to fix the issue?
I'm happy to give you access to my repo if that is helpful too.

(Image is with the <Alert /> component changed to the <Heading /> element.

[radoslaw-sz]

hi @jaylinsell - this is great analysis! I see there are two things which are really weird

1. First of all you are getting error when calling backend - this anyway shall not happen. Could you please try to console log of this error? I know that you already checked the network tab, but it looks like there is a try of calling the backend. Could you please try to check again this network tab if there is any call? If not, then this useAdminCustomQuery is not working totally..
2. Second of all, the implementation there shall gracefully handles all errors - that's why you may find there this implementation:

if (isError) {
    const trueError = error as any;
    const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${trueError?.response?.data?.message}`
    return <Alert variant="error">{errorText}</Alert>
  }

Based on above, you as mentioned in 1) you can try to make :

if (isError) {
    console.log(error) // HERE
    const trueError = error as any;
    const errorText = `Error when loading data. It shouldn't have happened - please raise an issue. For developer: ${trueError?.response?.data?.message}`
    return <Alert variant="error">{errorText}</Alert>
  }

and maybe something useful will be there.
This <Alert... thing is another weird issue.. I am not sure even how to handle it. I know there were some changes in @medusajs/ui - could you please try to add in your package.json also @medusajs/ui: '3.0.0' ? Maybe there is some mismatch in packages...

[jaylinsell]

No problem @radoslaw-sz.

The console logs are what lead me to there.
Responses below:

1. With the app not crashing, I now see the attempts for the calls. The calls return with 404.
   Note, I've removed all the other components just to narrow it down to the point things would start rendering. Though, I believe the useCustomAdminQuery is not working as intended, it's not finding the routes correctly.

2. The logged error is Error: Request failed with status code 404
3. Adding @medusajs/ui v3.0.0 doesn't solve the Alert issue (but I can at least work around that). Have also tried forcing it as a resolution in the package.json with no luck.

[radoslaw-sz]

hi @jaylinsell - thank you for your insights.
To be honest I am little stuck here - useCustomAdminQuery is a common functionality used across all our plugins and recommended by the Medusa team, so why it is not working is mystery for me.
Do you have maybe other places (other than this plugin) when you are using useCustomAdminQuery?

One thing I have noticed which looks weird - the link which you pasted - there is a count?orderStatuses... am I right?
Such route is weird, because this plugin is not using it - it uses routes like orders-analytics/count?orderStatuses.... Generally all API routes are like XXXX-analytics. Could you please double check this issue?

Another testing which you can make is something like this - you can choose one route e.g. admin/customers-analytics/history so the whole URL will be for instance http://localhost:9000/admin/customers-analytics/history. You can go to the api/admin/customers-analytics/route.ts and paste at the end of this file this:

export const AUTHENTICATE = false

Finally, after starting Medusa, you can try to paste above URL http://localhost:9000/admin/customers-analytics/history in the browser and hit. You shall be able to get the results - this will prove at least that backend is working correctly and something is on the frontend side.