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.
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 |
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');
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');
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} />
));
<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 />);
