Forbid using console.error as it is being sent to Sentry (#3532)

M-i-k-e-l · web-flow · commit 7abd766e2dbc · 2025-03-09T09:19:45.000+02:00
* Forbid using console.error as it is being sent to Sentry

* Add forwardError
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,6 +8,13 @@ module.exports = {
     'no-undef': 'off',
     /* Other Rules */
     'no-unused-expressions': 'off',
+    'no-restricted-syntax': [
+      'error',
+      {
+        selector: `CallExpression[callee.object.name='console'][callee.property.name='error']`,
+        message: 'Using console.error is not allowed as it is sent to Sentry, please use LogService.error instead'
+      }
+    ],
     'arrow-parens': 'off',
     // TODO: remove after migration of legacy lifecycle methods
     camelcase: 'off',
diff --git a/src/components/card/index.tsx b/src/components/card/index.tsx
@@ -14,6 +14,7 @@ import {BlurViewPackage} from '../../optionalDependencies';
 import Assets from '../../assets';
 import CardContext from './CardContext';
 import * as CardPresenter from './CardPresenter';
+import {LogService} from 'services';
 
 const BlurView = BlurViewPackage?.BlurView;
 
@@ -122,7 +123,8 @@ class Card extends PureComponent<PropTypes, State> {
     this.styles = createStyles(this.props);
 
     if (props.enableBlur && !BlurView) {
-      console.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
 
diff --git a/src/components/connectionStatusBar/index.tsx b/src/components/connectionStatusBar/index.tsx
@@ -6,6 +6,7 @@ import {Colors, Typography} from '../../style';
 import TouchableOpacity from '../touchableOpacity';
 import View from '../view';
 import {Constants, asBaseComponent} from '../../commons/new';
+import {LogService} from 'services';
 import {ConnectionStatusBarProps, ConnectionStatusBarState, DEFAULT_PROPS} from './types';
 export {ConnectionStatusBarProps};
 
@@ -47,7 +48,8 @@ class ConnectionStatusBar extends PureComponent<ConnectionStatusBarProps, Connec
     if (NetInfo) {
       this.getInitialConnectionState();
     } else {
-      console.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib ConnectionStatusBar component requires installing "@react-native-community/netinfo" dependency`);
     }
   }
 
diff --git a/src/components/dateTimePicker/index.tsx b/src/components/dateTimePicker/index.tsx
@@ -22,6 +22,7 @@ import Button, {ButtonProps} from '../button';
 import ExpandableOverlay, {ExpandableOverlayMethods, RenderCustomOverlayProps} from '../../incubator/expandableOverlay';
 import useOldApi, {OldApiProps} from './useOldApi';
 import {isSameDate, isSameHourAndMinute} from '../../utils/dateUtils';
+import {LogService} from 'services';
 
 export type DateTimePickerMode = 'date' | 'time';
 
@@ -170,7 +171,7 @@ const DateTimePicker = forwardRef((props: DateTimePickerPropsInternal, ref: Forw
   useEffect(() => {
     if (!RNDateTimePicker) {
       // eslint-disable-next-line max-len
-      console.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
+      LogService.error(`RNUILib DateTimePicker component requires installing "@react-native-community/datetimepicker" dependency`);
     }
   }, []);
 
diff --git a/src/components/dateTimePicker/useOldApi.ts b/src/components/dateTimePicker/useOldApi.ts
@@ -1,6 +1,7 @@
 // TODO: delete whole file in v8
 import {useEffect} from 'react';
 import {MomentPackage as moment} from '../../optionalDependencies';
+import {LogService} from 'services';
 
 export interface OldApiProps {
   /**
@@ -35,7 +36,8 @@ const useOldApi = (props: OldApiProps) => {
 
   useEffect(() => {
     if (!moment && (dateFormat || timeFormat)) {
-      console.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib DateTimePicker component with date/time format requires installing "moment" dependency`);
     }
   }, [dateFormat, timeFormat]);
 
diff --git a/src/components/modal/index.tsx b/src/components/modal/index.tsx
@@ -14,6 +14,7 @@ import {BlurViewPackage} from '../../optionalDependencies';
 import {Constants, asBaseComponent} from '../../commons/new';
 import TopBar, {ModalTopBarProps} from './TopBar';
 import View from '../../components/view';
+import {LogService} from 'services';
 
 const BlurView = BlurViewPackage?.BlurView;
 
@@ -73,7 +74,8 @@ class Modal extends Component<ModalProps> {
     super(props);
 
     if (props.enableModalBlur && !BlurView) {
-      console.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
+      // eslint-disable-next-line max-len
+      LogService.error(`RNUILib Modal's "enableModalBlur" prop requires installing "@react-native-community/blur" dependency`);
     }
   }
 
diff --git a/src/components/pieChart/index.tsx b/src/components/pieChart/index.tsx
@@ -3,6 +3,7 @@ import View from '../view';
 import PieSegment, {PieSegmentProps} from './PieSegment';
 import {SvgPackage} from '../../optionalDependencies';
 const {Svg, Path} = SvgPackage;
+import {LogService} from 'services';
 
 export type PieChartSegmentProps = Pick<PieSegmentProps, 'percentage' | 'color'>;
 
@@ -23,7 +24,7 @@ const PieChart = (props: PieChartProps) => {
   const {segments, diameter = DEFAULT_DIAMETER, ...others} = props;
 
   if (!Svg || !Path) {
-    console.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
+    LogService.error(`RNUILib PieChart requires installing "@react-native-svg" dependency`);
     return null;
   }
 
diff --git a/src/components/skeletonView/index.tsx b/src/components/skeletonView/index.tsx
@@ -6,6 +6,7 @@ import {BorderRadiuses, Colors, Dividers, Spacings} from '../../style';
 import {createShimmerPlaceholder, LinearGradientPackage} from 'optionalDeps';
 import View from '../view';
 import {Constants, AlignmentModifiers, PaddingModifiers, MarginModifiers} from '../../commons/new';
+import {LogService} from 'services';
 
 const LinearGradient = LinearGradientPackage?.default;
 
@@ -174,9 +175,9 @@ class SkeletonView extends Component<SkeletonViewProps, SkeletonState> {
     };
 
     if (_.isUndefined(LinearGradientPackage?.default)) {
-      console.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-linear-gradient" dependency`);
     } else if (_.isUndefined(createShimmerPlaceholder)) {
-      console.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
+      LogService.error(`RNUILib SkeletonView's requires installing "react-native-shimmer-placeholder" dependency`);
     } else if (ShimmerPlaceholder === undefined) {
       ShimmerPlaceholder = createShimmerPlaceholder(LinearGradient);
     }
diff --git a/src/components/svgImage/index.tsx b/src/components/svgImage/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {isSvg, isSvgUri} from '../../utils/imageUtils';
 import {SvgPackage, SvgCssUri} from '../../optionalDependencies';
+import {LogService} from 'services';
 
 const SvgXml = SvgPackage?.SvgXml;
 // const SvgProps = SvgPackage?.SvgProps; TODO: not sure how (or if) we can use their props
@@ -20,7 +21,7 @@ function SvgImage(props: SvgImageProps) {
 
   if (!SvgXml) {
     // eslint-disable-next-line max-len
-    console.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
+    LogService.error(`RNUILib Image "svg" prop requires installing "react-native-svg" and "react-native-svg-transformer" dependencies`);
     return null;
   }
 
diff --git a/src/incubator/slider/SliderPresenter.ts b/src/incubator/slider/SliderPresenter.ts
@@ -1,5 +1,6 @@
 import {SharedValue, interpolate} from 'react-native-reanimated';
 import {SliderProps} from './index';
+import {LogService} from 'services';
 
 export function getOffsetForValue(value: number, span: number, minimumValue = 0, maximumValue = 1) {
   const range = maximumValue - minimumValue;
@@ -43,20 +44,20 @@ export function validateValues(props: SliderProps) {
     minimumValue > maximumValue ||
     (useRange && initialMinimumValue && initialMaximumValue && initialMinimumValue > initialMaximumValue)
   ) {
-    console.error('Your passed values are invalid. Please check if minimum values are not higher than maximum values');
+    LogService.forwardError({message: 'Your passed values are invalid. Please check if minimum values are not higher than maximum values'});
   }
   if (value !== undefined && minimumValue && maximumValue && !inRange(value, minimumValue, maximumValue)) {
-    console.error(`Your passed value (${value}) is invalid. 
-      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`);
+    LogService.forwardError({message: `Your passed value (${value}) is invalid. 
+      Please check that it is in range of the minimum (${minimumValue}) and maximum (${maximumValue}) values`});
   }
   if (useRange && initialMinimumValue && initialMaximumValue) {
     if (
       !inRange(initialMinimumValue, minimumValue, maximumValue) ||
       !inRange(initialMaximumValue, minimumValue, maximumValue)
     ) {
-      console.error(
-        'Your passed values are invalid. Please check that they are in range of the minimum and maximum values'
-      );
+      LogService.forwardError({
+        message: 'Your passed values are invalid. Please check that they are in range of the minimum and maximum values'
+      });
     }
   }
 }
diff --git a/src/services/HapticService.ts b/src/services/HapticService.ts
@@ -1,4 +1,5 @@
 import {HapticFeedbackPackage} from 'optionalDeps';
+import {LogService} from 'services';
 
 const options = {
   enableVibrateFallback: false,
@@ -19,7 +20,7 @@ function triggerHaptic(hapticType: HapticType, componentName: string) {
   if (HapticFeedbackPackage) {
     HapticFeedbackPackage.trigger(hapticType, options);
   } else {
-    console.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
+    LogService.error(`RNUILib ${componentName}'s requires installing "react-native-haptic-feedback" dependency`);
   }
 }
 
diff --git a/src/services/LogService.ts b/src/services/LogService.ts
@@ -1,7 +1,7 @@
 interface BILogger {
   log: (event: any) => void;
 }
-class LogService {
+class LogService<ErrorInfo extends {message: string;}> {
   private biLogger: BILogger | undefined;
 
   injectBILogger = (biLogger: BILogger) => {
@@ -20,10 +20,16 @@ class LogService {
 
   error = (message?: any, ...optionalParams: any[]) => {
     if (__DEV__) {
+      // eslint-disable-next-line no-restricted-syntax
       console.error(message, ...optionalParams);
     }
   };
 
+  forwardError = (errorInfo: ErrorInfo) => {
+    // eslint-disable-next-line no-restricted-syntax
+    console.error(errorInfo.message);
+  };
+
   deprecationWarn = ({component, oldProp, newProp}: {component: string; oldProp: string; newProp?: string}) => {
     this.warn(getDeprecationMessage({component, oldProp, newProp}));
   };

Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ import {BlurViewPackage} from '../../optionalDependencies';`
`14`	`14`	`import Assets from '../../assets';`
`15`	`15`	`import CardContext from './CardContext';`
`16`	`16`	`import * as CardPresenter from './CardPresenter';`
	`17`	`+import {LogService} from 'services';`
`17`	`18`
`18`	`19`	`const BlurView = BlurViewPackage?.BlurView;`
`19`	`20`
`@@ -122,7 +123,8 @@ class Card extends PureComponent<PropTypes, State> {`
`122`	`123`	`this.styles = createStyles(this.props);`
`123`	`124`
`124`	`125`	`if (props.enableBlur && !BlurView) {`
`125`		- console.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
	`126`	`+ // eslint-disable-next-line max-len`
	`127`	+ LogService.error(`RNUILib Card's "enableBlur" prop requires installing "@react-native-community/blur" dependency`);
`126`	`128`	`}`
`127`	`129`	`}`
`128`	`130`