[Theme/Warning] Optional callback argument to setEuiDevProviderWarning

packages/eui/changelogs/upcoming/7820.md

@@ -0,0 +1 @@
+- Updated `setEuiDevProviderWarning` to additionally accept a custom callback function, which warning messages will be passed to

packages/eui/src-docs/src/views/provider/provider_example.js

@@ -15,7 +15,7 @@ import { GuideSectionPropsTable } from '../../components/guide_section/guide_sec
 
 import Setup from './provider_setup';
 import GlobalStyles from './provider_styles';
-import Warnings from './provider_warning';
+import Warnings, { CallbackExample } from './provider_warning';
 import {
   EuiComponentDefaultsProps,
   euiProviderComponentDefaultsSnippet,
@@ -237,8 +237,7 @@ export const ProviderExample = {
           <Warnings />
 
           <p>
-            <EuiCode>setEuiDevProviderWarning</EuiCode>
-            accepts three levels:
+            <EuiCode>setEuiDevProviderWarning</EuiCode> accepts three levels:
           </p>
           <ul>
             <li>
@@ -254,6 +253,13 @@ export const ProviderExample = {
               exception
             </li>
           </ul>
+
+          <p>
+            It also accepts a callback function instead of a default warning
+            level. The warning message string will be passed to your callback,
+            where any custom action can be performed on it. Example usage:
+          </p>
+          <CallbackExample />
         </EuiText>
       ),
     },

packages/eui/src-docs/src/views/provider/provider_warning.tsx

@@ -35,3 +35,16 @@ const AppWithDuplicateProvider = () => (
     </>
   );
 };
+
+export const CallbackExample = () => (
+  <EuiCodeBlock language="tsx" fontSize="m" isCopyable>
+    {`import { setEuiDevProviderWarning } from '@elastic/eui';
+
+const customWarningHandler = (message: string) => {
+  sendWarningToTelemetryService(message);
+  console.debug(message);
+};
+
+setEuiDevProviderWarning(customWarningHandler);`}
+  </EuiCodeBlock>
+);

packages/eui/src/services/theme/warning.test.ts

@@ -80,5 +80,18 @@ describe('EUI provider dev warnings', () => {
       expect(consoleLogSpy).not.toHaveBeenCalled();
       expect(consoleWarnSpy).not.toHaveBeenCalled();
     });
+
+    it('passes messages to callback functions', () => {
+      const devCallback = jest.fn();
+      setEuiDevProviderWarning(devCallback);
+
+      emitEuiProviderWarning(providerMessage);
+
+      expect(devCallback).toHaveBeenCalledWith('hello world');
+      expect(devCallback).toHaveBeenCalledTimes(1);
+
+      expect(consoleLogSpy).not.toHaveBeenCalled();
+      expect(consoleWarnSpy).not.toHaveBeenCalled();
+    });
   });
 });

packages/eui/src/services/theme/warning.ts

@@ -7,16 +7,22 @@
  */
 
 type LEVELS = 'log' | 'warn' | 'error';
+type ProviderCallback = (message: string | Error) => void;
 
-let providerWarning: LEVELS | undefined = undefined;
+let providerWarning: LEVELS | ProviderCallback | undefined = undefined;
 
-export const setEuiDevProviderWarning = (level: LEVELS | undefined) =>
-  (providerWarning = level);
+export const setEuiDevProviderWarning = (warningType: typeof providerWarning) =>
+  (providerWarning = warningType);
 
 export const getEuiDevProviderWarning = () => providerWarning;
 
 // Not a public top-level EUI export, currently for internal use
 export const emitEuiProviderWarning = (providerMessage: string) => {
+  // Handle callback types
+  if (typeof providerWarning === 'function') {
+    return providerWarning(providerMessage);
+  }
+  // Handle level types
   switch (providerWarning) {
     case 'log':
       console.log(providerMessage);