> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 18bafdbe-6769-42d6-81f5-1bf82cb27fcc
---

# no-console

> Prevent usage of console methods in UI extensions in favor of the SDK logger utility.

The `no-console` rule prevents usage of native [console](https://developer.mozilla.org/en-US/docs/Web/API/console) methods ([`console.log()`](https://developer.mozilla.org/en-US/docs/Web/API/console/log_static), [`console.error()`](https://developer.mozilla.org/en-US/docs/Web/API/console/error_static), etc.) in UI extensions.

## Rule details

UI extensions should use the SDK's structured [`logger`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#logging) 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()`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#display-alert-banners) or the [`<Alert>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/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:

```jsx theme={null}
// 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`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#logging):

```jsx theme={null}
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()`:

```jsx theme={null}
// Incorrect
function handleError(error) {
  console.error('An error occurred:', error);
}

globalThis.console.error('Failed to load data');
```

Use [`logger.error()`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#logging) for debugging and [`actions.addAlert()`](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#display-alert-banners) for user-facing errors:

```jsx theme={null}
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>`](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert) component for inline error messages:

```jsx theme={null}
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 />);
```

## Related resources

* [SDK logger](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#logging)
* [actions.addAlert()](/apps/developer-platform/add-features/ui-extensions/ui-extensions-sdk#display-alert-banners)
* [Alert component](/apps/developer-platform/add-features/ui-extensions/ui-components/standard-components/alert)