chore: adding addition telemetry to cover JSONForm widget's performance (#35229)

## 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"

### 🔍 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 -->
This commit is contained in:
Vemparala Surya Vamsi 2024-07-29 09:57:54 +05:30 committed by GitHub
parent 4bf6671cc4
commit 492fb353d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 23 additions and 4 deletions

View File

@ -87,6 +87,17 @@ export function setAttributesToSpan(
span?.setAttributes(spanAttributes); 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) { export function wrapFnWithParentTraceContext(parentSpan: Span, fn: () => any) {
const parentContext = trace.setSpan(context.active(), parentSpan); const parentContext = trace.setSpan(context.active(), parentSpan);
return context.with(parentContext, fn); return context.with(parentContext, fn);

View File

@ -7,6 +7,7 @@ import { klona } from "klona";
import FormContext from "../FormContext"; import FormContext from "../FormContext";
import type { FieldType } from "../constants"; import type { FieldType } from "../constants";
import { startAndEndSpanForFn } from "UITelemetry/generateTraces";
export interface UseRegisterFieldValidityProps { export interface UseRegisterFieldValidityProps {
isValid: boolean; isValid: boolean;
@ -34,10 +35,14 @@ function useRegisterFieldValidity({
setTimeout(() => { setTimeout(() => {
try { try {
isValid isValid
? clearErrors(fieldName) ? startAndEndSpanForFn("JSONFormWidget.clearErrors", {}, () => {
: setError(fieldName, { clearErrors(fieldName);
type: fieldType, })
message: "Invalid field", : startAndEndSpanForFn("JSONFormWidget.setError", {}, () => {
setError(fieldName, {
type: fieldType,
message: "Invalid field",
});
}); });
} catch (e) { } catch (e) {
Sentry.captureException(e); Sentry.captureException(e);

View File

@ -68,6 +68,7 @@ import {
ONSUBMIT_NOT_CONFIGURED_MESSAGE, ONSUBMIT_NOT_CONFIGURED_MESSAGE,
} from "../constants/messages"; } from "../constants/messages";
import { createMessage } from "@appsmith/constants/messages"; import { createMessage } from "@appsmith/constants/messages";
import { endSpan, startRootSpan } from "UITelemetry/generateTraces";
const SUBMIT_BUTTON_DEFAULT_STYLES = { const SUBMIT_BUTTON_DEFAULT_STYLES = {
buttonVariant: ButtonVariantTypes.PRIMARY, buttonVariant: ButtonVariantTypes.PRIMARY,
@ -651,6 +652,7 @@ class JSONFormWidget extends BaseWidget<
schema: Schema, schema: Schema,
afterUpdateAction?: ExecuteTriggerPayload, afterUpdateAction?: ExecuteTriggerPayload,
) => { ) => {
const span = startRootSpan("JSONFormWidget.parseAndSaveFieldState");
const fieldState = generateFieldState(schema, metaInternalFieldState); const fieldState = generateFieldState(schema, metaInternalFieldState);
const action = klona(afterUpdateAction); const action = klona(afterUpdateAction);
@ -664,6 +666,7 @@ class JSONFormWidget extends BaseWidget<
actionPayload, actionPayload,
); );
} }
endSpan(span);
}; };
onSubmit = (event: React.MouseEvent<HTMLElement, MouseEvent>) => { onSubmit = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {