Open bratsos opened 1 year ago
We've done this and still doesn't work for us. Any other ideas?
I have done the workaround using craco, its still does not seem to capture any metrics, any idea how I can further debug it
@pateketu , as a debugging step, you can try to follow the measure web-vitals in JavaScript.
sendToAnalytics
to use console.log
instead of actually sending data to an analytics serviceweb-vitals
, because it's already a dependency of @shopify/app-bridge
Can you please try it and report back? 🙏
hi @joeyfreund Actually I am outputting the web vitals using the "reportWebVitals" that comes out-of-the-box with create-react-app and I can see them in the console, however, I just noticed that there are web-vitals being reported by Sentry.io on console, I am thinking that might interfere with App Bridge's web-vitals?
UPDATE
I can confirm I can see web-vistals being printed from my sendToAnalytics method, React app actually has an older version of web-vitals, I updated it to 3.0.1 which same version used by app-bridge
I have attempted to debug app-bridge code and I cannot see the following code ever being called, which I am guessing is the bit that sends data back to Shopify
Is there any way to manually call "initializeWebVitals" from our code?
hi @joeyfreund Actually I am outputting the web vitals using the "reportWebVitals" that comes out-of-the-box with create-react-app and I can see them in the console, however, I just noticed that there are web-vitals being reported by Sentry.io on console, I am thinking that might interfere with App Bridge's web-vitals?
UPDATE
I can confirm I can see web-vistals being printed from my sendToAnalytics method, React app actually has an older version of web-vitals, I updated it to 3.0.1 which same version used by app-bridge
I have attempted to debug app-bridge code and I cannot see the following code ever being called, which I am guessing is the bit that sends data back to Shopify
Is there any way to manually call "initializeWebVitals" from our code?
i have the same problem every think ok from console logs but to it is not sending data to admin performance tab
Like others, I implemented the craco
workaround as suggested and still get no metrics.
Edit: It took a while but metrics started showing up now.
Like others, I implemented the
craco
workaround as suggested and still get no metrics.Edit: It took a while but metrics started showing up now.
hey @pencil may I know what you did to get the metrics?
I added craco
to dev dependencies via npm i -D @craco/craco
. Since I'm using TypeScript, I added craco.config.ts
(instead of craco.config.js
) to the root of the repository with the following content:
/* eslint-disable import/no-anonymous-default-export */
export default {
webpack: {
configure: (config: any) => ({
...config,
module: {
...config.module,
rules: config.module.rules.map((rule: any) => {
if (rule.oneOf instanceof Array) {
rule.oneOf[rule.oneOf.length - 1].exclude = [
/\.(js|mjs|jsx|cjs|ts|tsx)$/,
/\.html$/,
/\.json$/,
];
}
return rule;
}),
},
}),
},
};
Then I deployed my app, clicked around in the admin UI of my app to generate some events (make sure you disable any privacy/ad block extensions that might interfere with tracking). A day or two later, metrics started showing up on the "Insights" page in Shopify Partners.
recently from november 6th i cant able to see webvitals update only the time is getting updated but the data in the chart is not getting updated anyone facing the same issue?
No performance metrics in my partner dashboard as well. Did anyone find a solution since May 2023 ? You need those metrics to be listed as "Built for Shopify", we can't be the only one with this issue :sweat_smile:
It's been almost 1 year and still facing the same issues after implementing suggested solutions. Is there any alternative solution for this?
Describe the bug
We received some reports about apps that are missing performance metrics in the Partners dashboard (see image below). This happen although these apps are using a recent
app-bridge
version that supports the collection ofweb-vitals
metrics.After some investigation (thanks, @ascherkus), it seems that the problem is with how
react-scripts@5
(popularly used bycreate-react-app
) cannot properly resolve.cjs
files (see this issue).You can track the progress of this issue here. However, as of the time of writing, we would advise trying one of the following workarounds.
Workarounds
Please make sure to use the following snippets only as a reference, and adjust the code to fit your specific needs!
Modify
react-scripts
webpack configThere are some options to modify the webpack config of create-react-app using either craco (repo link) or react-app-rewired (repo link). You can follow the installation steps on their respective repos and use something like the following in your config to properly resolve .cjs files:
Eject from
create-react-app
⚠️Warning: This cannot be undone!You can get the underlying webpack.config.js files if you eject from create-react-app. You can read more on CRA's documentation here.
In your webpack.config.js, there's an asset/resource loader that explicitly excludes some file types from your static files. Change it to look like this:
Please let us know if these workarounds have helped you, if you're still experiencing any issues after correctly applying one of them, or if you have found another way to fix this issue. We appreciate your feedback!