Skip to main content
The no-console rule prevents usage of native console methods (console.log(), console.error(), etc.) in UI extensions.

​
Rule details

UI extensions should use the SDK’s structured logger utility instead of native console.* methods. This helps streamline UI extension debugging, as you won’t need to sort through other framework logs and network activity to find extension-specific logs. The SDK logger integrates with HubSpot’s logging infrastructure, providing proper log levels, formatting, and the ability to filter and search across installs. Using console.* methods bypasses these benefits.

​
Console method alternatives

Use the following UI extension alternatives instead of browser console methods:
Console APISDK Logger AlternativePurpose
console.log()logger.debug()Debug-level logging
console.info()logger.info()Informational logging
console.warn()logger.warn()Warning-level logging
console.debug()logger.debug()Debug-level logging
console.error()logger.error()Error-level logging
For user-facing errors: use actions.addAlert() or the <Alert> component instead of console output. See the next section for an example of each alternative.

​
Examples

​
Basic logging

Instead of using console.* methods for logging: 
// Incorrect
function debugData(data) {
  console.log('Fetched data:', data);
}

window.console.log('Component mounted');
console.info('User logged in');
console.warn('Deprecated feature used');
console.debug('Debug information');
Use the SDK’s logger: 
import { hubspot, logger, Text } from '@hubspot/ui-extensions';

const Extension = () => {
  const debugData = (data) => {
    logger.debug('Fetched data:', data);
  };

  logger.info('User logged in');
  logger.warn('Deprecated feature used');

  return <Text>Content here</Text>;
};

export default hubspot.extend(() => <Extension />);

​
Error handling

Instead of using console.error(): 
// Incorrect
function handleError(error) {
  console.error('An error occurred:', error);
}

globalThis.console.error('Failed to load data');
Use logger.error() for debugging and actions.addAlert() for user-facing errors: 
import { Text, hubspot, logger } from '@hubspot/ui-extensions';

const Extension = ({ actions }) => {
  const handleError = (error) => {
    // Log for debugging
    logger.error('Failed to save data:', error);

    // Show user-friendly message
    actions.addAlert({
      type: 'danger',
      message: 'Unable to save. Please try again.',
    });
  };

  return <Text>Content here</Text>;
};

export default hubspot.extend(({ actions }) => (
  <Extension actions={actions} />
));
Or use the <Alert> component for inline error messages: 
import { Alert, Text, hubspot, logger } from '@hubspot/ui-extensions';
import { useState } from 'react';

const Extension = () => {
  const [error, setError] = useState(null);

  const handleAction = async () => {
    try {
      // Some operation...
    } catch (err) {
      logger.error('Operation failed:', err);
      setError('Unable to complete the operation. Please try again.');
    }
  };

  return (
    <>
      {error && (
        <Alert title="Error" variant="danger">
          <Text>{error}</Text>
        </Alert>
      )}
      {/* Rest of component */}
    </>
  );
};

export default hubspot.extend(() => <Extension />);
Last modified on February 19, 2026