Azure / Azure/monaco-kusto

semanticHighlighting having references to disposed model and leading to model disposed error if model is disposed after setting the schema

Open
#498 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
84
Forks
36
PR merge metrics
No merged PRs in 30d

Description

In the latest version, we are using semanticHighlighting, but this is causing a model disposed error when the current editor is disposed after setting the schema. We dispose of the editor on unmount. Due to some dependency changes, the component unmount is happening twice frequently and remounting back. After setting the schema, the editor is getting disposed of, leading to a model disposed error. I do not see this error if I remove the semanticHighlighting property.

```
const setSchema = useCallback((editor: any) => {
//eslint-disable-next-line @typescript-eslint/no-explicit-any
window.monaco.languages.kusto.getKustoWorker().then((workerAccessor: any) => {
const model = editor?.getModel();
//eslint-disable-next-line @typescript-eslint/no-explicit-any
workerAccessor(model?.uri).then((worker: any) => {
worker.setSchemaFromShowSchema(
props.schema,
props.kustoUrl,
props.kustoDb
);
});
});
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [props.schema, props.kustoUrl, props.kustoDb]);

const loadKustoEditor = useCallback((query?: string) => {
//eslint-disable-next-line @typescript-eslint/no-explicit-any
init().then((monacoInstance: any) => {
const wrapper = document.getElementById('monaco-root');
const properties = {
value: query ? query : ``,
language: 'kusto',
minimap: { enabled: false },
theme: isDark ? "kusto-dark" : "kusto-light",
automaticLayout: true,
'semanticHighlighting.enabled':true
};

//if there is no existing instance then only new instance create
const editor = monacoInstance.editor?.create(wrapper, properties);
editorRef.current=editor;
setSchema(editor);
//if there was a queryParam in url and not loaded from shared queries that is props.kustoQuery is empty
editorDidMount(editor, !!queryParam && !kustoQuery);
});
//eslint-disable-next-line react-hooks/exhaustive-deps
}, [setSchema, queryParam, kustoQuery, isDark])

useEffect(() => {
if (props.kustoQuery) {
loadKustoEditor(props.kustoQuery)
}
else if (queryParam && !props.kustoQuery) {
//if navigation url has query param
loadKustoEditor(queryParam);
} else {
const defaultTabUpdatedQuery = localStorage.getItem(LOCAL_STORAGE_KEYS.DEFAULT_TAB_UPDATED_QUERY);
if (defaultTabUpdatedQuery && defaultTabUpdatedQuery != undefined) {
loadKustoEditor(JSON.parse(defaultTabUpdatedQuery));
}
else {
loadKustoEditor();

}
}
return () => {
editor.dispose();
};
}, [props.kustoQuery, queryParam, loadKustoEditor]);
```

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the supplied setSchema, loadKustoEditor, and useEffect flow, reproducing the semanticHighlighting case while the editor is unmounted and remounted. Trace the asynchronous worker and model references around editor.dispose(); done means the schema can be set without a model disposed error after disposal.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.