can't find ReportCallback or ReportHandler type

[safeamiiir]

I've just updated my web-vitals package v3.5.2 -> v4.0.0.

Now I can't use argument type for functions (onCLS, onFCP, ...)

I'm using create-react-app when I've started my application. I'm calling a function to generate a report using this code:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

The input of reportWebVitals function needs a type here which I don't have ReportCallback to use.

this is my partly updated reportWebVitals.ts page

import { ReportCallback } from "web-vitals";
//Error: Module '"web-vitals"' has no exported member 'ReportCallback'.

const reportWebVitals = (onPerfEntry?: ReportCallback) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
      onCLS(onPerfEntry);
      onINP(onPerfEntry);
      onFCP(onPerfEntry);
      onLCP(onPerfEntry);
      onTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

I couldn't find this type removal in breaking changes in the CHANGELOG file.

[safeamiiir]

To fix this we can use (metric: MetricType) => void as replacement type.

But I'm also happy to make a new PR and provide it to be imported.

The fix will make reportWebVitals.ts like this:

import { MetricType } from "web-vitals";

const reportWebVitals = (onPerfEntry?: (metric: MetricType) => void) => {
  if (onPerfEntry && onPerfEntry instanceof Function) {
    import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => {
      onCLS(onPerfEntry);
      onINP(onPerfEntry);
      onFCP(onPerfEntry);
      onLCP(onPerfEntry);
      onTTFB(onPerfEntry);
    });
  }
};

export default reportWebVitals;

[philipwalton]

To fix this we can use (metric: MetricType) => void as replacement type.

Thanks for reporting @safeamiiir. I was going to suggest that fix, but looks like you already figured it out.

Tagging in my colleague @brendankenny who reworked some of the types in this library for the v4 release to assess whether or not we need to add ReportCallback back. (At minimum we will add it to the upgrading guide.)

[safeamiiir]

Thanks for your fast reply @philipwalton.

Yes I was not able to find anything more than a line about a change here in v3.0.0

an update to the upgrading guide could help, or also bringing it back as I believe so many people are still using create-react-app (This also could be an update in that repo though).

Happy to file a PR if needed.