# Error Handling

The SDK emits errors as events and (when applicable) throws a custom `SDKError`. Your app should handle both.

## SDKError

All SDK errors use a custom error class:

```typescript
class SDKError extends Error {
  constructor(message: string, reThrow?: boolean);
  name: 'SDKError';
  isSdk: boolean;
  reThrow: boolean;
}
```

## Catching Errors

```javascript
try {
  await window.LiquidCommerce.elements.injectProductElement([
    { containerId: 'product', identifier: 'invalid_id' }
  ]);
} catch (error) {
  if (error.name === 'SDKError') {
    console.error('SDK Error:', error);
  }
}
```

## Error Isolation

The SDK catches and contains its own errors so your app keeps running:

```javascript
window.LiquidCommerce.elements.actions.cart.addProduct([/* invalid */]);
console.log('App still working');
```

## Error Events

Listen for failure events to show user-friendly messages or trigger retries:

```javascript
// Cart add failed
window.addEventListener('lce:actions.cart_product_add_failed', (event) => {
  console.error('Failed to add:', event.detail.data.error);
});

// Address failed
window.addEventListener('lce:actions.address_failed', (event) => {
  console.error('Address error:', event.detail.data.error);
});

// Checkout submit failed
window.addEventListener('lce:actions.checkout_submit_failed', (event) => {
  console.error('Checkout failed:', event.detail.data.error);
});
```

## UI Errors

When a component fails to load, the SDK renders an error view inside the container and logs details to the console.

## Related Docs

- [Events Guide](../guides/events.md)
- [Client API](../api/client.md)
- [Troubleshooting](./troubleshooting.md)