[React Router] No `http.client` spans route navigations when fetch is called in a static function at module-level

[s1gr1d]

Description

On page reload, http.client spans are created for API requests. This does not happen on navigations (lazy and non-lazy routes) when the fetch is defined outside the component.

See the following examples, which contain the page which is navigated to.

Examples: Creates http.client span

const Component = () => {
  const [data, setData] = React.useState<{ message: string } | null>(null);

  React.useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  return (
    <div></div>
  );
};

Or when module-level fetch function is dynamic (includes parameter):

const fetchPromise = (id: string) =>
  fetch(`/api/${id}`)
    .then(res => res.json())

const Component = () => {
  const [data, setData] = React.useState<{ message: string } | null>(null);

  React.useEffect(() => {
      fetchPromise('some-id').then(setData);
  }, []);

  return (
    <div></div>
  );
};

Example: Does not create http.client span

fetch is added in a static function at module-level. This would call the endpoint before navigating to the page - the endpoint is called when the index page is loaded.

const fetchPromise = fetch('/api/data')
  .then(res => res.json())

const Component = () => {
  const [data, setData] = React.useState<{ message: string } | null>(null);

  React.useEffect(() => {
    fetchPromise.then(setData);
  }, []);

  return (
    <div></div>
  );
};

Possible Cause

• fetch might be invoked very early already and we don't catch the span

[linear-code]

JS-1951

[s1gr1d]

Closing this as this is an edge case, but we'll keep it as a reference.