App missing performance metrics in Partners dashboard

[bratsos]

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 of web-vitals metrics.

After some investigation (thanks, @ascherkus), it seems that the problem is with how react-scripts@5 (popularly used by create-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 config

There 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:

// craco

export default {
  webpack: {
    configure: config => ({
      ...config,
      module: {
        ...config.module,
        rules: config.module.rules.map(rule => {
          if (rule.oneOf instanceof Array) {
            // eslint-disable-next-line no-param-reassign
            rule.oneOf[rule.oneOf.length - 1].exclude = [
              /\.(js|mjs|jsx|cjs|ts|tsx)$/,
              /\.html$/,
              /\.json$/,
            ];
          }
          return rule;
        }),
      },
    }),
  },
};

// react-app-rewired

module.exports = {
  webpack: function (config, env) {
    config.module.rules = config.module.rules.map(rule => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
      }
      return rule;
    });
    return config;
  },
}

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:

            {
              // Exclude `js` files to keep "css" loader working as it injects
              // its runtime that would otherwise be processed through "file" loader.
              // Also exclude `html` and `json` extensions so they get processed
              // by webpacks internal loaders.
              exclude: [/^$/, /\.(js|cjs|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
              type: 'asset/resource',
            },

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!

[loudhippobrady]

We've done this and still doesn't work for us. Any other ideas?

[pateketu]

I have done the workaround using craco, its still does not seem to capture any metrics, any idea how I can further debug it

[joeyfreund]

@pateketu , as a debugging step, you can try to follow the measure web-vitals in JavaScript.
- You can implement sendToAnalytics to use console.log instead of actually sending data to an analytics service
- You should be able to import from web-vitals, because it's already a dependency of @shopify/app-bridge

Can you please try it and report back? 🙏

[pateketu]

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?

[shahramsoft]

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

[pencil]

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.

[VijayaLakshmi210800]

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?

[pencil]

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.

[VijayaLakshmi210800]

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?

[debuss]

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 😅

[little-isaac]

It's been almost 1 year and still facing the same issues after implementing suggested solutions.
Is there any alternative solution for this?