web-vitals

web-vitals copied to clipboard

Hello, There may be a problem with types of attributtion.

As an example, a type error occurs in the following code in call onCLS.

import { CLSMetricWithAttribution, MetricWithAttribution, onCLS } from 'web-vitals/attribution';

const sendCLSMetrics = (metric: CLSMetricWithAttribution) => {
    console.log(metric.attribution)
}

onCLS(sendCLSMetrics); // type error

const sendMetrics = (metric: MetricWithAttribution) => {
    console.log(metric.attribution)
}

onCLS(sendMetrics); // type error

I think there is a problem with extending callback function. Sorry if there is any problem with my usage.

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

As per the README you should be importing it like this:

import {onCLS } from 'web-vitals/attribution';

const sendCLSMetrics = (attribution) => {
    console.log(attribution)
}
``

Thank you for your response.

It seems that the code you provided will work, but there might be an problem when adding the type.(I would like to add type annotations for code completion)

'onCLS' accepts 'CLSReportCallbackWithAttribution', but 'CLSReportCallbackWithAttribution' can also accept not only 'CLSMetricWithAttribution' but also 'CLSMetric' and 'Metric' types, so the 'attribution' property is not guaranteed to exist on the type.

It seems like the following approach would work, but I think 'CLSReportCallbackWithAttribution' should only accept 'CLSMetricWithAttribution'.

import { onCLS, CLSReportCallbackWithAttribution } from 'web-vitals/attribution';

const sendCLSMetrics: CLSReportCallbackWithAttribution = (param) => {
  if (!('attribution' in param)) {
    return
  }

  console.log(param.attribution)
}

onCLS(sendCLSMetrics);

I believe this has been fixed in latest main.