fix(core): replace consoles logs with printIonWarning and printErrorWarning

Author: brandyscarney

core/src/components/alert/alert.tsx

@@ -5,6 +5,7 @@ import type { Gesture } from '@utils/gesture';
 import { createButtonActiveGesture } from '@utils/gesture/button-active';
 import { raf } from '@utils/helpers';
 import { createLockController } from '@utils/lock-controller';
+import { printIonWarning } from '@utils/logging';
 import {
   createDelegateController,
   createTriggerController,
@@ -318,7 +319,7 @@ export class Alert implements ComponentInterface, OverlayInterface {
     // checkboxes and inputs are all accepted, but they cannot be mixed.
     const inputTypes = new Set(inputs.map((i) => i.type));
     if (inputTypes.has('checkbox') && inputTypes.has('radio')) {
-      console.warn(
+      printIonWarning(
         `Alert cannot mix input types: ${Array.from(inputTypes.values()).join(
           '/'
         )}. Please see alert docs for more info.`

core/src/components/item-sliding/item-sliding.tsx

@@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 import { findClosestIonContent, disableContentScrollY, resetContentScrollY } from '@utils/content';
 import { isEndSide } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 import { watchForOptions } from '@utils/watch-options';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -343,7 +344,7 @@ export class ItemSliding implements ComponentInterface {
       case ItemSide.None:
         return;
       default:
-        console.warn('invalid ItemSideFlags value', this.sides);
+        printIonWarning('invalid ItemSideFlags value', this.sides);
         break;
     }
 

core/src/components/menu/menu.tsx

@@ -6,6 +6,7 @@ import { GESTURE_CONTROLLER } from '@utils/gesture';
 import { shouldUseCloseWatcher } from '@utils/hardware-back-button';
 import type { Attributes } from '@utils/helpers';
 import { inheritAriaAttributes, assert, clamp, isEndSide as isEnd } from '@utils/helpers';
+import { printIonError } from '@utils/logging';
 import { menuController } from '@utils/menu-controller';
 import { BACKDROP, GESTURE, getPresentedOverlay } from '@utils/overlays';
 import { isPlatform } from '@utils/platform';
@@ -215,12 +216,12 @@ export class Menu implements ComponentInterface, MenuI {
     const content = this.contentId !== undefined ? document.getElementById(this.contentId) : null;
 
     if (content === null) {
-      console.error('Menu: must have a "content" element to listen for drag events on.');
+      printIonError('Menu: must have a "content" element to listen for drag events on.');
       return;
     }
 
     if (this.el.contains(content)) {
-      console.error(
+      printIonError(
         `Menu: "contentId" should refer to the main view's ion-content, not the ion-content inside of the ion-menu.`
       );
     }

core/src/components/nav/nav.tsx

@@ -820,7 +820,7 @@ export class Nav implements NavOutlet {
     const finalNumViews = this.views.length + (insertViews?.length ?? 0) - (removeCount ?? 0);
     assert(finalNumViews >= 0, 'final balance can not be negative');
     if (finalNumViews === 0) {
-      console.warn(
+      printIonWarning(
         `You can't remove all the pages in the navigation stack. nav.pop() is probably called too many times.`,
         this,
         this.el

core/src/components/refresher/refresher.tsx

@@ -8,6 +8,7 @@ import {
   printIonContentErrorMsg,
 } from '@utils/content';
 import { clamp, componentOnReady, getElementRoot, raf, transitionEndAsync } from '@utils/helpers';
+import { printIonError } from '@utils/logging';
 import { ImpactStyle, hapticImpact } from '@utils/native/haptic';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -452,7 +453,7 @@ export class Refresher implements ComponentInterface {
 
   async connectedCallback() {
     if (this.el.getAttribute('slot') !== 'fixed') {
-      console.error('Make sure you use: <ion-refresher slot="fixed">');
+      printIonError('Make sure you use: <ion-refresher slot="fixed">');
       return;
     }
     const contentEl = this.el.closest(ION_CONTENT_ELEMENT_SELECTOR);

core/src/components/router-outlet/router-outlet.tsx

@@ -4,6 +4,7 @@ import { getTimeGivenProgression } from '@utils/animation/cubic-bezier';
 import { attachComponent, detachComponent } from '@utils/framework-delegate';
 import { shallowEqualStringMap, hasLazyBuild } from '@utils/helpers';
 import { createLockController } from '@utils/lock-controller';
+import { printIonError } from '@utils/logging';
 import { transition } from '@utils/transition';
 
 import { config } from '../../global/config';
@@ -146,7 +147,7 @@ export class RouterOutlet implements ComponentInterface, NavOutlet {
     try {
       changed = await this.transition(enteringEl, leavingEl, opts);
     } catch (e) {
-      console.error(e);
+      printIonError('[ion-router-outlet]', e);
     }
     unlock();
     return changed;

core/src/components/router/router.tsx

@@ -2,6 +2,7 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
 import { Component, Element, Event, Listen, Method, Prop } from '@stencil/core';
 import type { BackButtonEvent } from '@utils/hardware-back-button';
 import { debounce } from '@utils/helpers';
+import { printIonError, printIonWarning } from '@utils/logging';
 
 import type { AnimationBuilder } from '../../interface';
 import type { NavigationHookResult } from '../route/route-interface';
@@ -166,14 +167,14 @@ export class Router implements ComponentInterface {
   @Method()
   async navChanged(direction: RouterDirection): Promise<boolean> {
     if (this.busy) {
-      console.warn('[ion-router] router is busy, navChanged was cancelled');
+      printIonWarning('[ion-router] router is busy, navChanged was cancelled');
       return false;
     }
     const { ids, outlet } = await readNavState(window.document.body);
     const routes = readRoutes(this.el);
     const chain = findChainForIDs(ids, routes);
     if (!chain) {
-      console.warn(
+      printIonWarning(
         '[ion-router] no matching URL for ',
         ids.map((i) => i.id)
       );
@@ -182,7 +183,7 @@ export class Router implements ComponentInterface {
 
     const segments = chainToSegments(chain);
     if (!segments) {
-      console.warn('[ion-router] router could not match path because some required param is missing');
+      printIonWarning('[ion-router] router could not match path because some required param is missing');
       return false;
     }
 
@@ -232,7 +233,7 @@ export class Router implements ComponentInterface {
     animation?: AnimationBuilder
   ): Promise<boolean> {
     if (!segments) {
-      console.error('[ion-router] URL is not part of the routing set');
+      printIonError('[ion-router] URL is not part of the routing set');
       return false;
     }
 
@@ -253,7 +254,7 @@ export class Router implements ComponentInterface {
     const routes = readRoutes(this.el);
     const chain = findChainForSegments(segments, routes);
     if (!chain) {
-      console.error('[ion-router] the path does not match any route');
+      printIonError('[ion-router] the path does not match any route');
       return false;
     }
 
@@ -275,7 +276,7 @@ export class Router implements ComponentInterface {
     try {
       changed = await this.writeNavState(node, chain, direction, segments, redirectFrom, index, animation);
     } catch (e) {
-      console.error(e);
+      printIonError('[ion-router]', e);
     }
     unlock();
     return changed;
@@ -338,7 +339,7 @@ export class Router implements ComponentInterface {
     animation?: AnimationBuilder
   ): Promise<boolean> {
     if (this.busy) {
-      console.warn('[ion-router] router is busy, transition was cancelled');
+      printIonWarning('[ion-router] router is busy, transition was cancelled');
       return false;
     }
     this.busy = true;

core/src/components/router/utils/dom.ts

@@ -1,4 +1,5 @@
 import { componentOnReady } from '@utils/helpers';
+import { printIonError } from '@utils/logging';
 
 import type { AnimationBuilder } from '../../../interface';
 
@@ -51,7 +52,7 @@ export const writeNavState = async (
     }
     return changed;
   } catch (e) {
-    console.error(e);
+    printIonError('[ion-router]', e);
     return false;
   }
 };

core/src/components/segment-button/segment-button.tsx

@@ -3,6 +3,7 @@ import { Component, Element, Host, Prop, Method, State, Watch, forceUpdate, h }
 import type { ButtonInterface } from '@utils/element-interface';
 import type { Attributes } from '@utils/helpers';
 import { addEventListener, removeEventListener, inheritAttributes } from '@utils/helpers';
+import { printIonError, printIonWarning } from '@utils/logging';
 import { hostContext } from '@utils/theme';
 
 import { getIonMode } from '../../global/ionic-global';
@@ -75,7 +76,7 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
 
     // Prevent buttons from being disabled when associated with segment content
     if (this.contentId && this.disabled) {
-      console.warn(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
+      printIonWarning(`Segment Button: Segment buttons cannot be disabled when associated with an <ion-segment-content>.`);
       this.disabled = false;
     }
   }
@@ -102,13 +103,13 @@ export class SegmentButton implements ComponentInterface, ButtonInterface {
 
     // If no associated Segment Content exists, log an error and return
     if (!segmentContent) {
-      console.error(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
+      printIonError(`Segment Button: Unable to find Segment Content with id="${this.contentId}".`);
       return;
     }
 
     // Ensure the found element is a valid ION-SEGMENT-CONTENT
     if (segmentContent.tagName !== 'ION-SEGMENT-CONTENT') {
-      console.error(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
+      printIonError(`Segment Button: Element with id="${this.contentId}" is not an <ion-segment-content> element.`);
       return;
     }
   }

core/src/components/select/select.tsx

@@ -4,6 +4,7 @@ import type { NotchController } from '@utils/forms';
 import { compareOptions, createNotchController, isOptionSelected } from '@utils/forms';
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from '@utils/helpers';
 import type { Attributes } from '@utils/helpers';
+import { printIonWarning } from '@utils/logging';
 import { actionSheetController, alertController, popoverController, modalController } from '@utils/overlays';
 import type { OverlaySelect } from '@utils/overlays-interface';
 import { isRTL } from '@utils/rtl';
@@ -426,14 +427,14 @@ export class Select implements ComponentInterface {
   private createOverlay(ev?: UIEvent): Promise<OverlaySelect> {
     let selectInterface = this.interface;
     if (selectInterface === 'action-sheet' && this.multiple) {
-      console.warn(
+      printIonWarning(
         `Select interface cannot be "${selectInterface}" with a multi-value select. Using the "alert" interface instead.`
       );
       selectInterface = 'alert';
     }
 
     if (selectInterface === 'popover' && !ev) {
-      console.warn(
+      printIonWarning(
         `Select interface cannot be a "${selectInterface}" without passing an event. Using the "alert" interface instead.`
       );
       selectInterface = 'alert';