Merge pull request #8218 from ckeditor/i/8140

Other (utils): Make custom errors more readable in the console. Closes #8140. MINOR BREAKING CHANGE (utils): The `attachLinkToDocumentiation()` helper was removed. To log errors to the console with attached link to the documentation use `logWarning()` and `logError()`.
ckeditor · Oct 14, 2020 · 40801ba · 40801ba
2 parents 9849ea2 + feed194
commit 40801ba
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 85 deletions.
diff --git a/packages/ckeditor5-core/src/plugincollection.js b/packages/ckeditor5-core/src/plugincollection.js
@@ -7,9 +7,7 @@
  * @module core/plugincollection
  */
 
-/* globals console */
-
-import CKEditorError, { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import CKEditorError, { logError } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 import EmitterMixin from '@ckeditor/ckeditor5-utils/src/emittermixin';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
@@ -207,7 +205,7 @@ export default class PluginCollection {
 			const errorId = 'plugincollection-plugin-not-found';
 
 			// Log the error, so it's more visible on the console. Hopefully, for better DX.
-			console.error( attachLinkToDocumentation( errorId ), { plugins: missingPlugins } );
+			logError( errorId, { plugins: missingPlugins } );
 
 			return Promise.reject( new CKEditorError( errorId, context, { plugins: missingPlugins } ) );
 		}
@@ -249,7 +247,7 @@ export default class PluginCollection {
 					 * @error plugincollection-load
 					 * @param {String} plugin The name of the plugin that could not be loaded.
 					 */
-					console.error( attachLinkToDocumentation( 'plugincollection-load' ), { plugin: PluginConstructor } );
+					logError( 'plugincollection-load', { plugin: PluginConstructor } );
 
 					throw err;
 				} );

diff --git a/packages/ckeditor5-engine/src/conversion/upcasthelpers.js b/packages/ckeditor5-engine/src/conversion/upcasthelpers.js
@@ -7,13 +7,11 @@ import Matcher from '../view/matcher';
 import ConversionHelpers from './conversionhelpers';
 
 import { cloneDeep } from 'lodash-es';
-import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 import priorities from '@ckeditor/ckeditor5-utils/src/priorities';
 import { isParagraphable, wrapInParagraph } from '../model/utils/autoparagraphing';
 
-/* global console */
-
 /**
  * Contains {@link module:engine/view/view view} to {@link module:engine/model/model model} converters for
  * {@link module:engine/conversion/upcastdispatcher~UpcastDispatcher}.
@@ -349,7 +347,7 @@ export default class UpcastHelpers extends ConversionHelpers {
 		 *
 		 * @error upcast-helpers-element-to-marker-deprecated
 		 */
-		console.warn( attachLinkToDocumentation( 'upcast-helpers-element-to-marker-deprecated' ) );
+		logWarning( 'upcast-helpers-element-to-marker-deprecated' );
 
 		return this.add( upcastElementToMarker( config ) );
 	}

diff --git a/packages/ckeditor5-image/src/imagestyle/utils.js b/packages/ckeditor5-image/src/imagestyle/utils.js
@@ -7,13 +7,11 @@
  * @module image/imagestyle/utils
  */
 
-/* globals console */
-
 import fullWidthIcon from '@ckeditor/ckeditor5-core/theme/icons/object-full-width.svg';
 import leftIcon from '@ckeditor/ckeditor5-core/theme/icons/object-left.svg';
 import centerIcon from '@ckeditor/ckeditor5-core/theme/icons/object-center.svg';
 import rightIcon from '@ckeditor/ckeditor5-core/theme/icons/object-right.svg';
-import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 /**
  * Default image styles provided by the plugin that can be referred in the
@@ -120,12 +118,9 @@ function _normalizeStyle( style ) {
 			 * There is no such image style of given name.
 			 *
 			 * @error image-style-not-found
-		 	 * @param {String} name Name of a missing style name.
+			 * @param {String} name Name of a missing style name.
 			 */
-			console.warn(
-				attachLinkToDocumentation( 'image-style-not-found' ),
-				{ name: styleName }
-			);
+			logWarning( 'image-style-not-found', { name: styleName } );
 
 			// Normalize the style anyway to prevent errors.
 			style = {

diff --git a/packages/ckeditor5-image/tests/imagestyle/utils.js b/packages/ckeditor5-image/tests/imagestyle/utils.js
@@ -109,7 +109,8 @@ describe( 'ImageStyle utils', () => {
 				sinon.assert.calledOnce( console.warn );
 				sinon.assert.calledWithExactly( console.warn,
 					sinon.match( /^image-style-not-found/ ),
-					{ name: 'foo' }
+					{ name: 'foo' },
+					sinon.match.string // Link to the documentation
 				);
 			} );
 		} );

diff --git a/packages/ckeditor5-media-embed/src/mediaregistry.js b/packages/ckeditor5-media-embed/src/mediaregistry.js
@@ -7,13 +7,11 @@
  * @module media-embed/mediaregistry
  */
 
-/* globals console */
-
 import mediaPlaceholderIcon from '../theme/icons/media-placeholder.svg';
 import TooltipView from '@ckeditor/ckeditor5-ui/src/tooltip/tooltipview';
 import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
 import Template from '@ckeditor/ckeditor5-ui/src/template';
-import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 const mediaPlaceholderIconViewBox = '0 0 64 42';
 
@@ -48,7 +46,7 @@ export default class MediaRegistry {
 					 *
 					 * @error media-embed-no-provider-name
 					 */
-					console.warn( attachLinkToDocumentation( 'media-embed-no-provider-name' ), { provider } );
+					logWarning( 'media-embed-no-provider-name', { provider } );
 
 					return false;
 				}

diff --git a/packages/ckeditor5-mention/src/mentionui.js b/packages/ckeditor5-mention/src/mentionui.js
@@ -7,16 +7,14 @@
  * @module mention/mentionui
  */
 
-/* global console */
-
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import clickOutsideHandler from '@ckeditor/ckeditor5-ui/src/bindings/clickoutsidehandler';
 import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
 import env from '@ckeditor/ckeditor5-utils/src/env';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
-import CKEditorError, { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import CKEditorError, { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import ContextualBalloon from '@ckeditor/ckeditor5-ui/src/panel/balloon/contextualballoon';
 import { debounce } from 'lodash-es';
 
@@ -156,11 +154,9 @@ export default class MentionUI extends Plugin {
 				 * See {@link module:mention/mention~MentionConfig}.
 				 *
 				 * @error mentionconfig-incorrect-marker
+				 * @param {String} marker Configured marker
 				 */
-				throw new CKEditorError(
-					'mentionconfig-incorrect-marker',
-					null
-				);
+				throw new CKEditorError( 'mentionconfig-incorrect-marker', null, { marker } );
 			}
 
 			const minimumCharacters = mentionDescription.minimumCharacters || 0;
@@ -348,8 +344,9 @@ export default class MentionUI extends Plugin {
 				 * not displayed at all.
 				 *
 				 * @error mention-feed-callback-error
+				 * @param {String} marker Configured marker for which error occurred.
 				 */
-				console.warn( attachLinkToDocumentation( 'mention-feed-callback-error' ) );
+				logWarning( 'mention-feed-callback-error', { marker } );
 			} );
 	}
 

diff --git a/packages/ckeditor5-mention/tests/mentionui.js b/packages/ckeditor5-mention/tests/mentionui.js
@@ -66,19 +66,19 @@ describe( 'MentionUI', () => {
 	describe( 'init()', () => {
 		it( 'should throw if marker was not provided for feed', () => {
 			return createClassicTestEditor( { feeds: [ { feed: [ 'a' ] } ] } ).catch( error => {
-				assertCKEditorError( error, /mentionconfig-incorrect-marker/, null );
+				assertCKEditorError( error, /mentionconfig-incorrect-marker/, null, { marker: undefined } );
 			} );
 		} );
 
 		it( 'should throw if marker is empty string', () => {
 			return createClassicTestEditor( { feeds: [ { marker: '', feed: [ 'a' ] } ] } ).catch( error => {
-				assertCKEditorError( error, /mentionconfig-incorrect-marker/, null );
+				assertCKEditorError( error, /mentionconfig-incorrect-marker/, null, { marker: '' } );
 			} );
 		} );
 
 		it( 'should throw if marker is longer then 1 character', () => {
 			return createClassicTestEditor( { feeds: [ { marker: '$$', feed: [ 'a' ] } ] } ).catch( error => {
-				assertCKEditorError( error, /mentionconfig-incorrect-marker/, null );
+				assertCKEditorError( error, /mentionconfig-incorrect-marker/, null, { marker: '$$' } );
 			} );
 		} );
 	} );
@@ -1249,7 +1249,12 @@ describe( 'MentionUI', () => {
 						expect( panelView.isVisible, 'panel is hidden' ).to.be.false;
 						expect( editor.model.markers.has( 'mention' ), 'there is no marker' ).to.be.false;
 
-						sinon.assert.calledWithExactly( warnSpy, sinon.match( /^mention-feed-callback-error/ ) );
+						sinon.assert.calledWithExactly(
+							warnSpy,
+							sinon.match( /^mention-feed-callback-error/ ),
+							sinon.match( { marker: '#' } ),
+							sinon.match.string // Link to the documentation
+						);
 						sinon.assert.calledOnce( eventSpy );
 					} );
 			} );

diff --git a/packages/ckeditor5-ui/src/toolbar/toolbarview.js b/packages/ckeditor5-ui/src/toolbar/toolbarview.js
@@ -7,8 +7,6 @@
  * @module ui/toolbar/toolbarview
  */
 
-/* globals console */
-
 import View from '../view';
 import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import FocusCycler from '../focuscycler';
@@ -19,7 +17,7 @@ import preventDefault from '../bindings/preventdefault.js';
 import Rect from '@ckeditor/ckeditor5-utils/src/dom/rect';
 import global from '@ckeditor/ckeditor5-utils/src/dom/global';
 import { createDropdown, addToolbarToDropdown } from '../dropdown/utils';
-import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import verticalDotsIcon from '@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg';
 
 import '../../theme/components/toolbar/toolbar.css';
@@ -299,7 +297,7 @@ export default class ToolbarView extends View {
 				 * @error toolbarview-item-unavailable
 				 * @param {String} name The name of the component.
 				 */
-				console.warn( attachLinkToDocumentation( 'toolbarview-item-unavailable' ), { name } );
+				logWarning( 'toolbarview-item-unavailable', { name } );
 			}
 		} ).filter( item => item !== undefined ) );
 	}

diff --git a/packages/ckeditor5-ui/tests/toolbar/toolbarview.js b/packages/ckeditor5-ui/tests/toolbar/toolbarview.js
@@ -421,7 +421,8 @@ describe( 'ToolbarView', () => {
 			sinon.assert.calledOnce( consoleWarnStub );
 			sinon.assert.calledWithExactly( consoleWarnStub,
 				sinon.match( /^toolbarview-item-unavailable/ ),
-				{ name: 'baz' }
+				sinon.match( { name: 'baz' } ),
+				sinon.match.string // Link to the documentation.
 			);
 		} );
 	} );

diff --git a/packages/ckeditor5-upload/src/adapters/simpleuploadadapter.js b/packages/ckeditor5-upload/src/adapters/simpleuploadadapter.js
@@ -7,11 +7,11 @@
  * @module upload/adapters/simpleuploadadapter
  */
 
-/* globals XMLHttpRequest, FormData, console */
+/* globals XMLHttpRequest, FormData */
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import FileRepository from '../filerepository';
-import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
 /**
  * The Simple upload adapter allows uploading images to an application running on your server using
@@ -71,7 +71,7 @@ export default class SimpleUploadAdapter extends Plugin {
 			 *
 			 * @error simple-upload-adapter-missing-uploadurl
 			 */
-			console.warn( attachLinkToDocumentation( 'simple-upload-adapter-missing-uploadurl' ) );
+			logWarning( 'simple-upload-adapter-missing-uploadurl' );
 
 			return;
 		}

diff --git a/packages/ckeditor5-upload/src/filerepository.js b/packages/ckeditor5-upload/src/filerepository.js
@@ -7,12 +7,10 @@
  * @module upload/filerepository
  */
 
-/* globals console */
-
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 
 import PendingActions from '@ckeditor/ckeditor5-core/src/pendingactions';
-import CKEditorError, { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+import CKEditorError, { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 import ObservableMixin from '@ckeditor/ckeditor5-utils/src/observablemixin';
 import Collection from '@ckeditor/ckeditor5-utils/src/collection';
 import mix from '@ckeditor/ckeditor5-utils/src/mix';
@@ -172,7 +170,7 @@ export default class FileRepository extends Plugin {
 			 *
 			 * @error filerepository-no-upload-adapter
 			 */
-			console.warn( attachLinkToDocumentation( 'filerepository-no-upload-adapter' ) );
+			logWarning( 'filerepository-no-upload-adapter' );
 
 			return null;
 		}

diff --git a/packages/ckeditor5-upload/tests/filerepository.js b/packages/ckeditor5-upload/tests/filerepository.js
@@ -178,7 +178,8 @@ describe( 'FileRepository', () => {
 			sinon.assert.calledOnce( consoleWarnStub );
 			sinon.assert.calledWithExactly(
 				consoleWarnStub,
-				sinon.match( /^filerepository-no-upload-adapter/ )
+				sinon.match( /^filerepository-no-upload-adapter/ ),
+				sinon.match.string // Link to the documentation
 			);
 		} );