Debugging and error handling

When the editor doesn't open or behaves unexpectedly, start with the browser console: the integration script and the editor log what they do there. This page shows how to get detailed logs, lists the most common problems and how to fix them, and explains how to handle errors in your code.

TIP

Example: Initialization failure · source

Turn on detailed logging

Set the initial level on the script tag, or change it at runtime:

HTML

<script async src="https://app.trondesigner.com/js/website-integration.js" referrerpolicy="origin"
        data-td-api="https://app.trondesigner.com/api"
        data-td-api-key="{API_KEY}"
        data-td-log-level="debug"></script>

JavaScript

window.tronDesigner.setLogLevel('debug');
console.log(window.tronDesigner.getLogLevel()); // 'debug'

Level	Shows
'debug'	Everything, including each initialization step, every registered button and the full openDesigner arguments and options as JSON
'info'	Information, warnings and errors
'warn' (default)	Warnings and errors — for example buttons that are missing required attributes
'error'	Errors only

• The level also applies to the editor: the script passes it to each editor it opens, so after setLogLevel() reopen the editor to get its detailed logs.
• Use only these four values. An unknown data-td-log-level is ignored with a warning (the default warn is used); an unknown value passed to setLogLevel() is logged as an error and the current level is kept. Without data-td-log-level the script uses warn and logs nothing about it.
• Debug messages — of the script and of its translation library — are written only at debug; the editor follows the level the same way.
• Use debug while you build and test the integration, and warn or error in production.

Check that the script initialized

Most problems start here. The script initializes after the page has loaded: it checks the API key and your domain, creates the session customer and loads the editor. Only then can the editor open.

• Watch for failures with data-td-script-init-failed-callback or the userInitFailed event on the <script> element. The error's cause holds the server's reason, for example API key is invalid: Domain shop.example.com is not allowed.
• Wait for success with data-td-script-initialized-callback, getInitializing() or getInitialized(). getInitializing() rejects when initialization fails, so wrap await window.tronDesigner.getInitializing() in try … catch.
• An exception thrown inside your initialized or init-failed callback is logged to the console (init: the tdScriptInitializedCallback callback threw an error.) and doesn't affect initialization.

The full list of failure reasons and code for both options is in Loading the integration script.

Fix common problems

window.tronDesigner is undefined

• The script is loaded async, so your inline code can run before it. Wait for the window load event or use data-td-script-initialized-callback.
• Check the script URL: https://app.trondesigner.com/js/website-integration.js. Some older documentation loads it from the URL integration host (integration.trondesigner.com) instead; that address returns 404.

Initialization fails with "Domain … is not allowed"

Add the page's host name to the API key's allowed domains in the Admin Portal (Settings → API Keys). Enter host names only (shop.example.com, localhost) — no scheme, port or path; an entry also matches its subdomains. See Allowed domains.

A button with data-td-* attributes does nothing

• Too early. The script attaches click handlers at the end of initialization. Clicks before that, or after a failed initialization, do nothing.
• Wrong action. data-td-action must be exactly OpenCreate, OpenEdit or OpenView (or the element must have data-td-options). Other values, such as Create or opencreate, are ignored without a message.
• Missing attributes. An element without a valid combination of attributes is skipped with the warning cannot initialize element for action: openDesigner - missing required data props. See HTML data attributes for the valid combinations.
• Added later. The script scans the page once. For buttons your code adds or completes later, set data-td-monitored-element-id to the ID of a container that exists when the page loads (new child elements are picked up automatically; changed attributes aren't), call subscribeElementChanges(root), or call refreshRegisteredElements() after the change.
• Invalid values. An invalid data-td-result-action (anything but None, Close, Dialog) or invalid JSON in data-td-options stops the click with an error in the console.

The editor doesn't open from JavaScript

• Too early or after a failed initialization. openDesigner(), open() and the other methods that open the editor then log openDesigner: cannot open, the script is not initialized. … and do nothing. Wait for getInitializing() or the initialized callback, or check getInitialized() first.
• Editor component not loaded. If <trondesigner-editor> isn't defined within 10 seconds, the console shows openDesigner: cannot open, trondesigner-editor is not defined (the editor did not load).
• A dialog is already open. A second dialog is ignored with the warning openDesigner: the editor dialog is already open - ignored.; a container that already holds an editor gives openDesigner: an editor is already open in this container - ignored.
• In container mode, check that container is an existing element (openDesigner: cannot open, container is empty.).
• openDesigner() needs complete EditorArguments. Without openMode or printJob — for example a flat object such as { supplierCode, productCode } from older documentation — it logs openDesigner: cannot open, the editor arguments need "openMode" and "printJob" … and does nothing.
• open() and openDesigner() need a mode in the options — see Dialog and inline display.

The editor shows an error instead of the design

The editor checks the editor arguments and loads the product data; problems end in an error dialog, and closing it calls onClose('Error'). Common causes:

• Codes not found. In the Exact data mode, a product variant or print option code that doesn't exist for the supplier shows Selected product variants not found: … or Selected print options not found: …; when none of the variant codes exist, the editor shows No products found. In the Partial data mode unknown codes are dropped instead; with editorOptions.showSelectedVariants / showSelectedPrintOptions set to 'Missing', the editor then lets the customer pick the missing items. See Data modes.
• Open mode doesn't match the data — for example View with product or printing changes, or Create with a printJobGuid. See Open modes.
• Unknown open mode. Open modes are case-sensitive. A value such as 'CREATE' logs Unknown openMode "CREATE"… and the editor closes right away with onClose('Error'), without an error dialog.
• Unexpected errors show An error occurred while processing your request… with a Copy diagnostic data to clipboard button. Include that data when you contact support.

The editor opens but stays empty, or closes right away

The editor shows the design only after its stylesheets have loaded. If one of them can't be loaded, the console shows Failed to load the stylesheet …; closing the editor. and the editor closes with onClose('Error'). Check the Network tab for failed requests to trondesigner-styles.css, trondesigner-variables.css, trondesigner-icons.css or your ownCssVariablesUrl. If your site uses a Content Security Policy, these stylesheets and the icon font also come from https://app.trondesigner.com — see Content Security Policy and Styling the editor.

A callback function is never called

Callback attributes such as data-td-print-job-created-callback take the name of a global function. Declare it with function name() {} in a classic script; const name = () => {} and functions inside <script type="module"> aren't global. The console then shows Global callback function '…' not found or … is not a function.

Handle errors in your code

The script reports most problems in the console instead of throwing. Plan for these cases:

Situation	How it's reported
Initialization	getInitializing() rejects with the error; the data-td-script-init-failed-callback and the userInitFailed event receive the same error.
openDesigner() / open()	Return nothing — no promise. Chaining .then() or .catch() throws a TypeError. The outcome arrives through onClose and the events.
An exception in your event callback	Logged to the console (handleDesignerEvent: a … callback threw an error.); the other subscribers are still called.
Invalid custom buttons	setEditorButtons() / addEditorButton() throw an Error synchronously (see Custom editor buttons).
Invalid editor arguments or data	Missing openMode or printJob: a console error, and nothing opens. An unknown openMode: a console error and onClose('Error'). Other problems: the editor's error dialog, then onClose('Error').
Methods that call the API (getPrintJob, getProofreading, clonePrintJob, …)	The promise rejects with ApiCaller::call: failed - response status <code> (error.cause holds the reason for 401). Before the script has read its attributes, or without data-td-api-key / data-td-api, they resolve to undefined.

function openDesignerSafely(buttonsFromConfig) {
  const td = window.tronDesigner;
  if (!td?.getInitialized()) {
    alert('The designer is not available right now.');
    return;
  }

  try {
    td.setEditorButtons(buttonsFromConfig) // validate first: throws before anything else is added to the builder
      .setExactProduct('PFC', undefined, (product) => product.addVariant('10086021'))
      .addExactPrinting('front', 'PAD03')
      .open({
        mode: 'dialog',
        onClose: (reason) => {
          if (reason === 'Error') alert('The designer could not be loaded. Please contact us.');
        },
      });
  } catch (error) {
    console.error('Could not open the designer', error);
  }
}

async function loadPrintJob(printJobGuid) {
  try {
    return await window.tronDesigner.getPrintJob(printJobGuid);
  } catch (error) {
    console.error('Print job could not be loaded', error.message, error.cause);
    return undefined;
  }
}

What to send to support

If you can't solve the problem, contact PromoTron support via the TronDesigner support site and include:

• the page URL, browser and the time the problem occurred;
• the environment (production or development) and the name of the API key in the Admin Portal;
• the console output with data-td-log-level="debug", including the logged openDesigner arguments;
• failed network requests to …/api/… with their status code and response text;
• the Copy diagnostic data content, if the editor showed it;
• the print job GUID, if a print job was involved;
• ideally, a minimal HTML page that reproduces the problem (you can start from an example).

See also

• setLogLevel · getLogLevel · LogLevel — API reference
• Loading the integration script
• Dialog and inline display — close reasons
• Events and callbacks