From 492fb353d7e072bf498765a307a0101e0c7a635b Mon Sep 17 00:00:00 2001
From: Vemparala Surya Vamsi <121419957+vsvamsi1@users.noreply.github.com>
Date: Mon, 29 Jul 2024 09:57:54 +0530
Subject: [PATCH] chore: adding addition telemetry to cover JSONForm widget's
 performance (#35229)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description
We need to profile a few functions in JSON forms, observed that in some
customer's apps the following functions
- clearErrors
- parseAndSaveFieldState
takes as much 10% in main thread scripting. We are adding setError just
to check if this function is performant or not as well.


Fixes #35228

> [!WARNING]
> _If no issue exists, please create an issue first, and check with the
maintainers if the issue is valid._

## Automation

/ok-to-test tags="@tag.Sanity"

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/10114403810>
> Commit: 90f5c31b2fc05e225cb827ec680c4bd68dc1e95f
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=10114403810&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.Sanity`
> Spec:
> <hr>Fri, 26 Jul 2024 16:46:46 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced telemetry tracking around function executions to improve
observability and performance monitoring.
- Enhanced error-clearing logic in the form widget to include telemetry
tracing for better analysis.

- **Improvements**
- Added performance tracking to the `parseAndSaveFieldState` method in
the JSONFormWidget for optimized performance insights.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/src/UITelemetry/generateTraces.ts        | 11 +++++++++++
 .../fields/useRegisterFieldValidity.ts              | 13 +++++++++----
 .../src/widgets/JSONFormWidget/widget/index.tsx     |  3 +++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/client/src/UITelemetry/generateTraces.ts b/app/client/src/UITelemetry/generateTraces.ts
index 71b417a732..011a66632c 100644
--- a/app/client/src/UITelemetry/generateTraces.ts
+++ b/app/client/src/UITelemetry/generateTraces.ts
@@ -87,6 +87,17 @@ export function setAttributesToSpan(
   span?.setAttributes(spanAttributes);
 }
 
+export const startAndEndSpanForFn = <T>(
+  spanName: string,
+  spanAttributes: SpanAttributes = {},
+  fn: () => T,
+) => {
+  const span = startRootSpan(spanName, spanAttributes);
+  const res: T = fn();
+  span.end();
+  return res;
+};
+
 export function wrapFnWithParentTraceContext(parentSpan: Span, fn: () => any) {
   const parentContext = trace.setSpan(context.active(), parentSpan);
   return context.with(parentContext, fn);
diff --git a/app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.ts b/app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.ts
index 27c100e90a..4871e0a370 100644
--- a/app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.ts
+++ b/app/client/src/widgets/JSONFormWidget/fields/useRegisterFieldValidity.ts
@@ -7,6 +7,7 @@ import { klona } from "klona";
 
 import FormContext from "../FormContext";
 import type { FieldType } from "../constants";
+import { startAndEndSpanForFn } from "UITelemetry/generateTraces";
 
 export interface UseRegisterFieldValidityProps {
   isValid: boolean;
@@ -34,10 +35,14 @@ function useRegisterFieldValidity({
     setTimeout(() => {
       try {
         isValid
-          ? clearErrors(fieldName)
-          : setError(fieldName, {
-              type: fieldType,
-              message: "Invalid field",
+          ? startAndEndSpanForFn("JSONFormWidget.clearErrors", {}, () => {
+              clearErrors(fieldName);
+            })
+          : startAndEndSpanForFn("JSONFormWidget.setError", {}, () => {
+              setError(fieldName, {
+                type: fieldType,
+                message: "Invalid field",
+              });
             });
       } catch (e) {
         Sentry.captureException(e);
diff --git a/app/client/src/widgets/JSONFormWidget/widget/index.tsx b/app/client/src/widgets/JSONFormWidget/widget/index.tsx
index 2381507dae..0d708d98af 100644
--- a/app/client/src/widgets/JSONFormWidget/widget/index.tsx
+++ b/app/client/src/widgets/JSONFormWidget/widget/index.tsx
@@ -68,6 +68,7 @@ import {
   ONSUBMIT_NOT_CONFIGURED_MESSAGE,
 } from "../constants/messages";
 import { createMessage } from "@appsmith/constants/messages";
+import { endSpan, startRootSpan } from "UITelemetry/generateTraces";
 
 const SUBMIT_BUTTON_DEFAULT_STYLES = {
   buttonVariant: ButtonVariantTypes.PRIMARY,
@@ -651,6 +652,7 @@ class JSONFormWidget extends BaseWidget<
     schema: Schema,
     afterUpdateAction?: ExecuteTriggerPayload,
   ) => {
+    const span = startRootSpan("JSONFormWidget.parseAndSaveFieldState");
     const fieldState = generateFieldState(schema, metaInternalFieldState);
     const action = klona(afterUpdateAction);
 
@@ -664,6 +666,7 @@ class JSONFormWidget extends BaseWidget<
         actionPayload,
       );
     }
+    endSpan(span);
   };
 
   onSubmit = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {