no-console - HubSpot docs

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 API	SDK Logger Alternative	Purpose
`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 />);

​Rule details

​Console method alternatives

​Examples

​Basic logging

​Error handling

​Related resources

Rule details

Console method alternatives

Examples

Basic logging

Error handling

Related resources