diff options
author | Kristóf Marussy <marussy@mit.bme.hu> | 2021-10-02 16:53:46 +0200 |
---|---|---|
committer | Kristóf Marussy <marussy@mit.bme.hu> | 2021-10-02 16:58:31 +0200 |
commit | ea509702b6ed88951a1b7b109b5dc597ee81112d (patch) | |
tree | 241b9732e7094ef22e7860a9e97a9f67b5b63509 /language-web/src | |
parent | perf(web): split off CodeMirror chunks (diff) | |
download | refinery-ea509702b6ed88951a1b7b109b5dc597ee81112d.tar.gz refinery-ea509702b6ed88951a1b7b109b5dc597ee81112d.tar.zst refinery-ea509702b6ed88951a1b7b109b5dc597ee81112d.zip |
feat(web): add client-side logging support
Also modified langauge-web/src/main/js/xtext/ServiceBuilder.js to make
sure the new logger is used as soon as xtext is initialized.
Diffstat (limited to 'language-web/src')
-rw-r--r-- | language-web/src/main/js/editor/EditorArea.tsx | 3 | ||||
-rw-r--r-- | language-web/src/main/js/editor/EditorStore.ts | 13 | ||||
-rw-r--r-- | language-web/src/main/js/global.d.ts | 6 | ||||
-rw-r--r-- | language-web/src/main/js/logging.tsx | 49 | ||||
-rw-r--r-- | language-web/src/main/js/xtext/ServiceBuilder.js | 27 |
5 files changed, 87 insertions, 11 deletions
diff --git a/language-web/src/main/js/editor/EditorArea.tsx b/language-web/src/main/js/editor/EditorArea.tsx index f07a0ad8..531a57c9 100644 --- a/language-web/src/main/js/editor/EditorArea.tsx +++ b/language-web/src/main/js/editor/EditorArea.tsx | |||
@@ -15,8 +15,7 @@ export const EditorArea = observer(() => { | |||
15 | onChange={(e) => editorStore.updateValue(e.target.value)} | 15 | onChange={(e) => editorStore.updateValue(e.target.value)} |
16 | ref={fallbackTextarea} | 16 | ref={fallbackTextarea} |
17 | className={`problem-fallback-editor cm-s-${editorStore.codeMirrorTheme}`} | 17 | className={`problem-fallback-editor cm-s-${editorStore.codeMirrorTheme}`} |
18 | > | 18 | /> |
19 | </textarea> | ||
20 | ); | 19 | ); |
21 | } | 20 | } |
22 | 21 | ||
diff --git a/language-web/src/main/js/editor/EditorStore.ts b/language-web/src/main/js/editor/EditorStore.ts index 1ac2e79f..8b9432dd 100644 --- a/language-web/src/main/js/editor/EditorStore.ts +++ b/language-web/src/main/js/editor/EditorStore.ts | |||
@@ -8,8 +8,11 @@ import { | |||
8 | import type { IXtextOptions, IXtextServices } from 'xtext/xtext-codemirror'; | 8 | import type { IXtextOptions, IXtextServices } from 'xtext/xtext-codemirror'; |
9 | 9 | ||
10 | import type { IEditorChunk } from './editor'; | 10 | import type { IEditorChunk } from './editor'; |
11 | import { getLogger } from '../logging'; | ||
11 | import type { ThemeStore } from '../theme/ThemeStore'; | 12 | import type { ThemeStore } from '../theme/ThemeStore'; |
12 | 13 | ||
14 | const log = getLogger('EditorStore'); | ||
15 | |||
13 | const xtextLang = 'problem'; | 16 | const xtextLang = 'problem'; |
14 | 17 | ||
15 | const xtextOptions: IXtextOptions = { | 18 | const xtextOptions: IXtextOptions = { |
@@ -52,12 +55,20 @@ export class EditorStore { | |||
52 | xtextServices: observable.ref, | 55 | xtextServices: observable.ref, |
53 | initialSelection: false, | 56 | initialSelection: false, |
54 | }); | 57 | }); |
58 | this.loadChunk(); | ||
59 | } | ||
60 | |||
61 | private loadChunk(): void { | ||
62 | const loadingStartMillis = Date.now(); | ||
63 | log.info('Requesting editor chunk'); | ||
55 | import('./editor').then(({ editorChunk }) => { | 64 | import('./editor').then(({ editorChunk }) => { |
56 | runInAction(() => { | 65 | runInAction(() => { |
57 | this.chunk = editorChunk; | 66 | this.chunk = editorChunk; |
58 | }); | 67 | }); |
68 | const loadingDurationMillis = Date.now() - loadingStartMillis; | ||
69 | log.info('Loaded editor chunk in', loadingDurationMillis, 'ms'); | ||
59 | }).catch((error) => { | 70 | }).catch((error) => { |
60 | console.warn('Error while loading editor', error); | 71 | log.error('Error while loading editor', error); |
61 | }); | 72 | }); |
62 | } | 73 | } |
63 | 74 | ||
diff --git a/language-web/src/main/js/global.d.ts b/language-web/src/main/js/global.d.ts index 39bda7f3..0533a46e 100644 --- a/language-web/src/main/js/global.d.ts +++ b/language-web/src/main/js/global.d.ts | |||
@@ -1,3 +1,9 @@ | |||
1 | declare const DEBUG: boolean; | ||
2 | |||
3 | declare const PACKAGE_NAME: string; | ||
4 | |||
5 | declare const PACKAGE_VERSION: string; | ||
6 | |||
1 | declare module '*.module.scss' { | 7 | declare module '*.module.scss' { |
2 | const cssVariables: { [key in string]?: string }; | 8 | const cssVariables: { [key in string]?: string }; |
3 | // eslint-disable-next-line import/no-default-export | 9 | // eslint-disable-next-line import/no-default-export |
diff --git a/language-web/src/main/js/logging.tsx b/language-web/src/main/js/logging.tsx new file mode 100644 index 00000000..25f50f19 --- /dev/null +++ b/language-web/src/main/js/logging.tsx | |||
@@ -0,0 +1,49 @@ | |||
1 | import styles, { CSPair } from 'ansi-styles'; | ||
2 | import log from 'loglevel'; | ||
3 | import * as prefix from 'loglevel-plugin-prefix'; | ||
4 | |||
5 | const colors: Record<string, CSPair> = { | ||
6 | TRACE: styles.magenta, | ||
7 | DEBUG: styles.cyan, | ||
8 | INFO: styles.blue, | ||
9 | WARN: styles.yellow, | ||
10 | ERROR: styles.red, | ||
11 | }; | ||
12 | |||
13 | prefix.reg(log); | ||
14 | |||
15 | if (DEBUG) { | ||
16 | log.setLevel(log.levels.DEBUG); | ||
17 | } else { | ||
18 | log.setLevel(log.levels.WARN); | ||
19 | } | ||
20 | |||
21 | if ('chrome' in window) { | ||
22 | // Only Chromium supports console ANSI escape sequences. | ||
23 | prefix.apply(log, { | ||
24 | format(level, name, timestamp) { | ||
25 | const formattedTimestamp = `${styles.gray.open}[${timestamp.toString()}]${styles.gray.close}`; | ||
26 | const levelColor = colors[level.toUpperCase()] || styles.red; | ||
27 | const formattedLevel = `${levelColor.open}${level}${levelColor.close}`; | ||
28 | const formattedName = `${styles.green.open}(${name || 'root'})${styles.green.close}`; | ||
29 | return `${formattedTimestamp} ${formattedLevel} ${formattedName}`; | ||
30 | }, | ||
31 | }); | ||
32 | } else { | ||
33 | prefix.apply(log, { | ||
34 | template: '[%t] %l (%n)', | ||
35 | }); | ||
36 | } | ||
37 | |||
38 | const appLogger = log.getLogger(PACKAGE_NAME); | ||
39 | |||
40 | appLogger.info('Version:', PACKAGE_NAME, PACKAGE_VERSION); | ||
41 | appLogger.info('Debug mode:', DEBUG); | ||
42 | |||
43 | export function getLoggerFromRoot(name: string | symbol): log.Logger { | ||
44 | return log.getLogger(name); | ||
45 | } | ||
46 | |||
47 | export function getLogger(name: string | symbol): log.Logger { | ||
48 | return getLoggerFromRoot(`${PACKAGE_NAME}.${name.toString()}`); | ||
49 | } | ||
diff --git a/language-web/src/main/js/xtext/ServiceBuilder.js b/language-web/src/main/js/xtext/ServiceBuilder.js index 38b08ecc..57fcb310 100644 --- a/language-web/src/main/js/xtext/ServiceBuilder.js +++ b/language-web/src/main/js/xtext/ServiceBuilder.js | |||
@@ -18,10 +18,11 @@ define([ | |||
18 | 'xtext/services/ContentAssistService', | 18 | 'xtext/services/ContentAssistService', |
19 | 'xtext/services/HoverService', | 19 | 'xtext/services/HoverService', |
20 | 'xtext/services/OccurrencesService', | 20 | 'xtext/services/OccurrencesService', |
21 | 'xtext/services/FormattingService' | 21 | 'xtext/services/FormattingService', |
22 | '../logging', | ||
22 | ], function(jQuery, XtextService, LoadResourceService, SaveResourceService, HighlightingService, | 23 | ], function(jQuery, XtextService, LoadResourceService, SaveResourceService, HighlightingService, |
23 | ValidationService, UpdateService, ContentAssistService, HoverService, OccurrencesService, | 24 | ValidationService, UpdateService, ContentAssistService, HoverService, OccurrencesService, |
24 | FormattingService) { | 25 | FormattingService, logging) { |
25 | 26 | ||
26 | /** | 27 | /** |
27 | * Builder class for the Xtext services. | 28 | * Builder class for the Xtext services. |
@@ -179,12 +180,22 @@ define([ | |||
179 | }); | 180 | }); |
180 | } | 181 | } |
181 | 182 | ||
182 | services.successListeners = []; | 183 | const log = logging.getLoggerFromRoot('xtext.XtextService'); |
184 | services.successListeners = [function(serviceType, result) { | ||
185 | if (log.getLevel() <= log.levels.TRACE) { | ||
186 | log.trace('service', serviceType, 'request success', JSON.parse(JSON.stringify(result))); | ||
187 | } | ||
188 | }]; | ||
183 | services.errorListeners = [function(serviceType, severity, message, requestData) { | 189 | services.errorListeners = [function(serviceType, severity, message, requestData) { |
184 | if (options.showErrorDialogs) | 190 | const messageParts = ['service', serviceType, 'failed:', message || '(no message)']; |
185 | window.alert('Xtext service \'' + serviceType + '\' failed: ' + message); | 191 | if (requestData) { |
186 | else | 192 | messageParts.push(JSON.parse(JSON.stringify(requestData))); |
187 | console.log('Xtext service \'' + serviceType + '\' failed: ' + message); | 193 | } |
194 | if (severity === 'warning') { | ||
195 | log.warn(...messageParts); | ||
196 | } else { | ||
197 | log.error(...messageParts); | ||
198 | } | ||
188 | }]; | 199 | }]; |
189 | } | 200 | } |
190 | 201 | ||
@@ -271,4 +282,4 @@ define([ | |||
271 | } | 282 | } |
272 | 283 | ||
273 | return ServiceBuilder; | 284 | return ServiceBuilder; |
274 | }); \ No newline at end of file | 285 | }); |