foreign-sapphire

Globally logging user interactions

Does anyone have any idea or strategy for logging user interactions with Form elements on a global scale instead of at the form field or button?

13 Replies

harsh-harlequin•8mo ago

I suppose you could wrap your useFrom in a custom hook lets call it useLoggingForm and have your custom logging code wrapping it. I'm not a maintainer but I would imagine their response is that "Form is meant to be a headless library, it gives the core logic and the building blocks so that anyone can build their own custom logic and UI on top". So in keeping with that, I would wrap it in a custom hook and call it a day. Its actually something I'm doing currently.🤟

foreign-sapphireOP•7mo ago

Would you mind sharing an example? Did you run into any limitations? Just trying to get a headstart before implementing 🙂

harsh-harlequin•7mo ago

sure thing, if you give me a few hours... I'm at work and I'm getting pretty crunched with a deadline 🙃

harsh-harlequin•7mo ago

ah here, just have this..... it's relatively strait forward, just wrap the useForm hook in you own custom hook and remember to pass along the generics then return the form and you can use the useLoggingForm like the regular useForm.

harsh-harlequin•7mo ago

So instead of my get data and mapping functions you can put your logging functionality inside the custom hook... (bare in mind this was thrown together) you could probably do a better job of extending the Ts interface with the ReactExtendedApi interface then passing along the props so the props of your custom hook maps 1 to 1 with the useFrom I'll try throw a better example together in a bit... but for now this kind of gives you the idea

foreign-sapphireOP•7mo ago

Oh sweet, thank you very much. I'll play around with it later today

harsh-harlequin•7mo ago

I might of misunderstood you... anyways, I was going to suggest something like this

import { FormOptions, useForm, Validator } from '@tanstack/react-form';

export default function useTurtleOh<
  TFormData,
  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
>(props: FormOptions<TFormData, TFormValidator>) {
  const form = useForm<TFormData, TFormValidator>(props);

  // your logging logic goes here
  // I suppose you could subscribe to useStore and return the field changes or form.Subscribe

  return form;
}

import { FormOptions, useForm, Validator } from '@tanstack/react-form';

export default function useTurtleOh<
  TFormData,
  TFormValidator extends Validator<TFormData, unknown> | undefined = undefined,
>(props: FormOptions<TFormData, TFormValidator>) {
  const form = useForm<TFormData, TFormValidator>(props);

  // your logging logic goes here
  // I suppose you could subscribe to useStore and return the field changes or form.Subscribe

  return form;
}

then use that hook instead of use form, so you could sort of piggy back useForm. But, now that I re-read what you posted I'm guessing you want something to bind onto the form.setFieldValue utility and call back the field and changes made correct?.

foreign-sapphireOP•7mo ago

I'm not sure what you mean by "call back the field and changes made", but the idea was to log field changes and form submissions to give me a way to recreate states for debugging in production. Although this may be overkill if I handle form/field validation properly. I was picturing log entries for a field change, for instance, and utilizing the form/field context to create part of the log but unsure how I can use a hook like you showed to fetch some of that info dynamically? If I understand your first example properly, that will create a new entry for logging DB table anytime the nested forms are submitted, but is there something in the form I can access to template the log entry?

harsh-harlequin•7mo ago

yeah, I get what you mean... I'm pretty sure we're on the same level now...

harsh-harlequin•7mo ago

Basically what you want is like what I did with the field.listeneres https://tanstack.com/form/latest/docs/framework/react/guides/listeners (specifically onChange)... But at a form level so you don't have to repeat it on every field.

Side effects for event triggers | TanStack Form React Docs

For situations where you want to "affect" or "react" to triggers, there's the listener API. For example, if you, as the developer, want to reset a form field as a result of another field changing, you...

foreign-sapphireOP•7mo ago

Ya, maybe something that can get field name to log with the changed value

harsh-harlequin•7mo ago

so for a little bit of background, when you call field.handleChange under the hood what you're basically doing is form.setFieldValue with some extra fluff.... what I guess you could do it insert a "form.listener" into the form.setFieldValue like you do on field.listener onChange handler. If it was an async function you could fire off a logging update to your backend, with the field name and field value. But, my question would be how granular would you need it, would just the name and value be enough? I suppose you could supplement this with the formApi like you do on the Field.listener, and decide for your self what to send....

harsh-harlequin•7mo ago

@crutchcorn would this be something that your intrested in? form.listenters, I suppose use cases would be logging and also could be used for debugging, if I follow the same api structure as the file listener’s then theres also commonality there.

Gaming

Programming

Globally logging user interactions

Did you find this page helpful?