Can high order functions (HOF) make "use cache" useless?

[Noriller]

Summary

I'm using both react cache and and this traceFunction as HOFs.

I don't know if its just the instrumentation being replayed, or since it's cached as a HOF, then it's still being called, but with the same results.

The problem is that some of the things being cached are fetch calls from other service, which shows it's being called multiple times.

I'm even adding this to the fetch calls:

 next: {
   revalidate: minutesToSeconds(90),
 }

Example of use:

async function _myFunc() {
 'use cache';
 return await fetch(...,  next: {
   revalidate: minutesToSeconds(90),
 }).then(res => res.json() as MyResponse)
}

export const myFunc = cache(traceFunction(_myFunc));

Additional information

import type { Attributes } from '@opentelemetry/api';
import { SpanKind, SpanStatusCode, trace } from '@opentelemetry/api';

import { devConsole } from './devConsole';

const tracer = trace.getTracer('doTracing');

// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Func = (...args: any[]) => any;

export function traceFunction<T extends Func>(
  functionToTrace: T,
  {
    nameForSpan = functionToTrace.name.startsWith('_')
      ? functionToTrace.name.slice(1)
      : functionToTrace.name,
    collectInput = true,
    collectOutput = false,
    collectCustom,
  }: {
    nameForSpan?: string;
    /** default true */
    collectInput?: boolean;
    /** default false */
    collectOutput?: boolean;
    collectCustom?: (
      input: Parameters<T>,
      result: Awaited<ReturnType<T>>,
    ) => Promise<Attributes> | Attributes | null;
  } = {},
) {
  return new Proxy(functionToTrace, {
    apply: async (target, thisArg, args) => {
      const span = tracer.startSpan(nameForSpan, {
        kind: SpanKind.CLIENT,
      });

      if (collectInput) {
        span.setAttribute('args', JSON.stringify(args));
      }

      try {
        const result = await target.apply(thisArg, args);

        if (collectCustom) {
          try {
            const customOutput = await collectCustom(
              args as Parameters<T>,
              result,
            );
            if (customOutput) {
              span.setAttributes(customOutput);
            }
          } catch {
            /* intentionally blank */
          }
        }

        if (collectOutput) {
          try {
            if (result) {
              span.setAttribute('result', JSON.stringify(result));
            } else {
              span.setAttribute(
                'falsyResult',
                'Falsy return from traced function',
              );
            }
          } catch {
            try {
              Object.entries(result).forEach(([key, value]) => {
                try {
                  span.setAttribute(`result.${key}`, JSON.stringify(value));
                } catch {
                  /* intentionally blank */
                }
              });
            } catch {
              /* intentionally blank */
            }
          }
        }

        span.setStatus({ code: SpanStatusCode.OK });

        return result;
      } catch (e) {
        const error = JSON.stringify({
          message: (e as Error).message,
          stack: (e as Error).stack,
          cause: (e as Error).cause,
          name: (e as Error).name,
        });

        span.setStatus({
          code: SpanStatusCode.ERROR,
          message: error,
        });

        span.recordException(error);

        span.setAttribute(`error`, error);

        devConsole.log(`🚀 ~ doTracing: ~ error:`, error);

        throw e;
      } finally {
        span.end();
      }
    },
  });
}

Example

No response

[SametDulger]

You are using both cache and traceFunction higher-order functions together. The issue is that some fetch calls are happening multiple times even though you expect caching to prevent that.

The cache function stores the result of the function based on its input parameters. When the same parameters are used again before the cache expires, the cached result is returned without calling the function again. The traceFunction wraps the original function to add tracing spans whenever the function is actually invoked.

What likely happens is that when the cache is empty or expired, the function runs and the fetch call happens, creating a trace span. When the cache is still valid, the cached result is returned directly and the function is not called, so no new trace span is created. If you observe multiple fetches, it could be due to different input parameters, cache expiration, or unintentional parameter changes.

To debug, make sure the inputs to your cached function are consistent. You can also add tracing inside the fetch itself to confirm how many times the network request runs. Remember that cache works by preventing the function from being called again for the same inputs within the cache duration. If you want to trace cache hits and misses, you will need to add instrumentation to the cache logic itself.

Using cache with traceFunction is correct and will trace real function calls. If fetch calls happen multiple times, verify the inputs and cache expiration. Let me know if you want help with an example or debugging ideas!