Skip to main content
The Portal Web SDK provides built-in logging capabilities to help you debug and monitor SDK operations during development and production. The interface matches the React Native SDK for consistency across platforms.

​
Quick Start

Enable logging by setting the logLevel parameter when initializing Portal: 
import Portal from '@portal-hq/web'

const portal = new Portal({
  rpcConfig: {
    'eip155:1': 'https://...',
    'solana:5eykt4UsFv8P8NJdTREpY1vzqKqZKvdp': 'https://...',
  },
  apiKey: 'YOUR_PORTAL_CLIENT_API_KEY',
  logLevel: 'debug', // Enable debug-level logging
})

​
Log Levels

The SDK supports five log levels, ordered by verbosity:
LevelDescriptionUse Case
'none'No logging output (default)Production environments
'error'Only errors and critical failuresProduction with minimal logging
'warn'Errors and warningsStaging and production
'info'Errors, warnings, and informational messagesDevelopment and staging
'debug'All log messages including detailed debugging informationLocal development only
Default: 'none' — No logs are emitted unless you explicitly configure logging.

​
Logger Interface

Your custom logger must implement the ILogger interface (exported from @portal-hq/web): 

interface ILogger {
  error: (...args: unknown[]) => void
  warn: (...args: unknown[]) => void
  info: (...args: unknown[]) => void
  debug: (...args: unknown[]) => void
}

​
Custom logger example

import Portal from '@portal-hq/web'
import type { ILogger } from '@portal-hq/web'

const customLogger: ILogger = {
  error: (...args) => console.error('[MyApp]', ...args),
  warn: (...args) => console.warn('[MyApp]', ...args),
  info: (...args) => console.info('[MyApp]', ...args),
  debug: (...args) => console.debug('[MyApp]', ...args),
}

const portal = new Portal({
  rpcConfig: { /* ... */ },
  apiKey: 'your-api-key',
  logLevel: 'debug',
  logger: customLogger,
})

​
Production logger with timestamps

For better observability, add timestamps to your logs: 
const portalLogger: ILogger = {
  error: (...args: unknown[]) => {
    const timestamp = new Date().toISOString()
    console.error(`[${timestamp}] [PORTAL ERROR]`, ...args)
  },
  warn: (...args: unknown[]) => {
    const timestamp = new Date().toISOString()
    console.warn(`[${timestamp}] [PORTAL WARN]`, ...args)
  },
  info: (...args: unknown[]) => {
    const timestamp = new Date().toISOString()
    console.info(`[${timestamp}] [PORTAL INFO]`, ...args)
  },
  debug: (...args: unknown[]) => {
    const timestamp = new Date().toISOString()
    console.debug(`[${timestamp}] [PORTAL DEBUG]`, ...args)
  },
}

const portal = new Portal({
  rpcConfig: { /* ... */ },
  apiKey: 'YOUR_PORTAL_CLIENT_API_KEY',
  logLevel: 'info',
  logger: portalLogger,
})

​
How logging works

  1. SDK handles level filtering — The SDK filters messages based on your logLevel setting before calling your logger methods.
  2. Logger handles output — Your logger is responsible only for formatting and outputting the messages.
  3. No performance impact when disabled — When logLevel is 'none', log messages are not generated.
  4. Fallback on logger errors — If your logger throws, the SDK falls back to console for that call.

​
Next Steps