[Bug]: The custom widget simply stops working whenever I write syntax that might cause an error.

[ITWBRDEV]

Is there an existing issue for this?

• I have searched the existing issues

Description

Every time I write an incomplete block of JSX code, it is reported as an error (as it should be). However, instead of just reporting the error in the console, the custom widget simply stops opening, preventing me from viewing the widget's internal code and fixing the problem.

Steps To Reproduce

1 - Open a custom React widget.
2 - Write incomplete code syntax. E.g., just write "function" without naming the function.
3 - This will cause an error that prevents you from opening the custom widget.

Public Sample App

No response

Environment

Production

Severity

High (Blocker to building or releasing)

Issue video log

No response

Version

Self Hosted - v2.2

[linear-code]

APP-15702

[ITWBRDEV]

When trying to debug, I noticed somethyng: if a single component (e.g., App) returns a very large and deeply nested JSX structure — specifically inside a .map() loop, the bug occurs.

Steps to Reproduce:

Create a new Custom Widget.

Inside the main App function, iterate over an array (5-10 items) using .map().

Inside the return of the map, place a massive block of raw HTML/JSX (e.g., 8 complex data cards, containing hundreds of nested div, span, h1, and p tags) without splitting them into sub-components.

add a tag "function" , for example, to generate a simple bug

Try to edit the code. The editor will silently crash and close the code window.

[SaifuddinM23]

Would love to work on this issue if possible !

[ITWBRDEV]

Just for reference: This is my REACT. (sorry if you find it hard to understand). If you try to add 3 or more cards, the bug will surely happen. I am starting to believe the bug only happens when i write the cards manually (without a loop), but im not actually sure...

import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";

const handleMachineFilterChange = (e) => {
  appsmith.updateModel({ machineFilter: e.target.value });
  appsmith.triggerEvent("onMachineFilterChange");
};

const handleBtnDocumentsPress = (e) => {
  e.stopPropagation();
  appsmith.updateModel({ productToViewDocuments: e.currentTarget.dataset.productOnMachine });
  appsmith.triggerEvent("onDocsButtonPress");
};

const handleLoginBtnPress = () => appsmith.triggerEvent('onLoginButtonPress');

function calculateRemainingTime(currentDate, targetDate) {
  if (!currentDate || !targetDate) return "";
  const current = new Date(currentDate), target = new Date(targetDate);
  if (isNaN(current.getTime()) || isNaN(target.getTime())) return "Invalid date";
  const diffSeconds = Math.floor((target.getTime() - current.getTime()) / 1000);
  if (diffSeconds <= 0) return "Atrasado";
  const days = Math.floor(diffSeconds / 86400);
  const hours = Math.floor((diffSeconds % 86400) / 3600);
  const minutes = Math.floor((diffSeconds % 3600) / 60);
  let text = "";
  if (days > 0) text += days + " dia(s) ";
  if (hours > 0) text += hours + "h ";
  if (minutes > 0 || (days === 0 && hours === 0)) text += minutes + "m";
  return text.trim();
}

// Created micro components to prevent the crash, but adding 3 more cards will still cause the bug

function Icon({ id, name, color }) {
  return (
    <span className="material-symbols-rounded" id={id} style={{color: color}}>{name}</span>
  );
}

function DataItem({ iconId, iconName, label, value }) {
  return (
    <div>
      <Icon id={iconId} name={iconName} />
      <div><p>{label}</p><h3>{value}</h3></div>
    </div>
  );
}

function Card({ bg, iconId, iconName, title, warning, infoClass, children }) {
  return (
    <li className="graph" id={"graph-" + bg}>
      <div className="graph-intro">
        <Icon id={iconId} name={iconName} />
        <h1>{title}</h1>
        {warning && <Icon id="warning-icon" name="warning" />}
      </div>
      <div className={infoClass}>
        {children}
      </div>
    </li>
  );
}

function PreLoadHeader() {
  return (
    <section className="main-menu">
      <div className="app-name">
        <Icon id="app-icon" name="factory" />
        <h1>ITW SmartFactory</h1>
      </div>
      <div className="menu-options">
        <div>
          <p>Painel</p>
          <p>Carregando...</p>
          <p>Carregando...</p>
        </div>
      </div>
      <button className="btn-login" onClick={handleLoginBtnPress}>
        <Icon id="login-icon" name="account_circle" /> Login
      </button>
    </section>
  );
}

// ======================================================================

function App() {
  const [modelData, setModelData] = useState(appsmith.model || {});

  useEffect(() => {
    const unlisten = appsmith.onModelChange((newModel) => setModelData(newModel));
    return () => {
      if (typeof unlisten === "function") unlisten();
    };
  }, []);
  
  const CAR_COLORS = ['orange', 'blue', 'green', 'purple', 'red'];
  const CAR_COUNT = 3;

  const [chosenColors] = useState(() => {
    const startIndex = Math.floor(Math.random() * CAR_COLORS.length);
    return Array.from({ length: CAR_COUNT }, (_, i) =>
      CAR_COLORS[(startIndex + i) % CAR_COLORS.length]
    );
  });

  const injMachinesNLastOps = modelData?.injMachinesNLastOps;
  const productsStockInfo = modelData?.productsStockInfo;
  
  const isDataMissing = !injMachinesNLastOps || injMachinesNLastOps.length === 0 || 
                        !productsStockInfo || productsStockInfo.length === 0;
  
  const isModelLoading = modelData?.isLoading === true;
  
  const shouldShowPreload = isDataMissing || isModelLoading;
  
  if(shouldShowPreload) {
    return (
      <section className="preload-main">
        <PreLoadHeader/>
        <div className='animation'>
          {chosenColors.map((color, i) => (
            <Icon key={i} name="forklift" color={color} />
          ))}
        </div>
      </section>
    );
  }

  const currMachineFilter = modelData?.machineFilter || "100B";
  const currentMachineData = injMachinesNLastOps.find((m) => m.Maquina === currMachineFilter);
  const diffMachines = [...new Set(injMachinesNLastOps.map((m) => m.Maquina))];

  const lastSetupChkOnEachInjMachine = Object.groupBy(
    modelData?.lastSetupChkOnEachMachine || [],
    (r) => r.inj_machine_code
  );

  const lastPeriodicChkOnEachMachine = Object.groupBy(
    modelData?.lastPeriodicChkOnEachMachine || [],
    (r) => r.inj_machine_code
  );

  const now = new Date();

  const statusClasses = {
    Trabalhando: { class: "status-green", icon: "precision_manufacturing", backColor: "green" },
    Parado: { class: "status-red", icon: "pause_circle", backColor: "red" },
    " - ": { class: "status-grey", icon: "power_settings_new", backColor: "grey" },
    "Off-Line": { class: "status-grey", icon: "power_settings_new", backColor: "grey" },
    A: { class: "status-orange" },
    S: { class: "status-blue" },
    R: { class: "status-red" },
    C: { class: "status-green" },
    PNOK: { class: "status-pink" },
  };

  const chkTrans = {
    A: "Aguard. preenchimento",
    R: "Rejeitada",
    C: "Concluído",
    S: "Aguardando assinatura",
    PNOK: "Preenchida (C/Nok)",
  };
  
  return (
    <section className="main">
      <section className="main-menu">
        <div className="app-name">
          <Icon id="app-icon" name="factory" />
          <h1>ITW SmartFactory</h1>
        </div>
        <div className="menu-options">
          <div>
            <p>Painel</p>
            <select
              value={currMachineFilter}
              onChange={handleMachineFilterChange}
              className="machine-selector"
            >
              {diffMachines.map((m) => (
                <option key={m} value={m}>
                  {m}
                </option>
              ))}
            </select>
            <p
              onClick={handleBtnDocumentsPress}
              data-product-on-machine={currentMachineData?.Produto}
            >
              Docs Produto
            </p>
          </div>
        </div>
        <button className="btn-login" onClick={handleLoginBtnPress}>
          <Icon id="login-icon" name="account_circle" /> Login
        </button>
      </section>

      {injMachinesNLastOps.map((machine) => {
        if (machine.Maquina !== currMachineFilter) return null;

        const setupChk = lastSetupChkOnEachInjMachine[machine.Maquina]?.[0];
        const isSetupValid = setupChk?.nrop == machine.nrOp;
        const setupId = isSetupValid ? statusClasses[setupChk.fill_status]?.class : "status-grey";
        const setupLbl = isSetupValid ? chkTrans[setupChk.fill_status] : "Nenhum preenchimento";
        const setupNoks = isSetupValid ? setupChk.noks_quantity : 0;
        const setupUser = isSetupValid ? setupChk.opened_by : "(não informado)";

        const perChk = lastPeriodicChkOnEachMachine[machine.Maquina]?.[0];
        const isPerValid = perChk && perChk.product == machine.Produto;
        const perChosen = isPerValid
          ? perChk.checklist_title.replace(/\s/g, "").split("-")[1]
          : "Nenhuma!";
        const perId = isPerValid ? statusClasses[perChk.fill_status]?.class : "status-grey";
        const perLbl = isPerValid ? chkTrans[perChk.fill_status] : "Nenhum preenchimento";
        const perNoks = isPerValid ? perChk.noks_quantity : 0;
        const perLast = isPerValid ? perChk.last_time_answered : "";
        const perNext = isPerValid ? perChk.next_time_to_be_answered : "";

        const prodStartDate = new Date(machine.DataInicio).toLocaleString("pt-BR", {
          dateStyle: "short",
        });

        const prodFinishDate = machine.DataFim
          ? new Date(machine.DataFim).toLocaleString("pt-BR", { dateStyle: "short" })
          : `${new Date(machine.PrevisaoConclusao).toLocaleString("pt-BR", {
              dateStyle: "short",
            })} (prev)`;

        const isProdOnSchedule = machine.CicloMedio <= machine.CicloPadrao;

        let stopReason = machine.MotivoParada;
        if (stopReason && stopReason.length > 25) {
          stopReason = stopReason.slice(0, 26) + "...";
        }

        const stockInfo = productsStockInfo.filter(
          (info) => info.PR_COD == machine.Produto?.replace(/[.\-\/]/g, "")
        )[0];

        const fmt = (val) => {
          if (val === null || val === undefined || val === "" || isNaN(val)) {
            return { n: 0, d: "Não encontrado" };
          }
          const num = Number(val);
          return { n: num, d: num.toLocaleString("pt-BR", { minimumFractionDigits: 3 }) };
        };

        const pBal = fmt(stockInfo?.PR_SALDO80);
        const cqBal = fmt(stockInfo?.PR_SALDO98);
        const relBal = fmt(stockInfo?.PR_SALDO01);
        const tercBal = fmt(stockInfo?.PR_SALDOTERC);
        const rjBal = fmt(stockInfo?.PR_SALDORJ);

        const totBal = pBal.n + cqBal.n + relBal.n + tercBal.n;

        const dmd = stockInfo?.PR_DEMANDA ?? 0;
        const minStock = stockInfo?.PR_ESTOQUEMIN ?? "Não informado";
        const cMOH = dmd > 0 ? (totBal + rjBal.n) / dmd : "Indefinido";
        const amtPkg = stockInfo?.PR_QTDEMBALAGEM ?? "Não informado";

        let grading = stockInfo?.PR_GRADING;
        grading = !grading
          ? "Não informado"
          : { A: "Active", S: "Slow", O: "Obsolete" }[grading] || grading;

        const avgCons = dmd;
        const targetMRD = avgCons * ((stockInfo?.PR_MOH ?? 0) + (stockInfo?.PR_REPOSICAO ?? 0) + 1);
        const bg = statusClasses[machine.st]?.backColor || "transparent";

        return (
          <React.Fragment key={machine.Maquina}>
            <section className="header">
              <div className="name-and-status">
                <div className="machine-name">
                  <h1>{machine.Marca}</h1>
                  <p> -</p>
                  <h2>{machine.Tonelagem}</h2>
                </div>
                <div className="machine-status">
                  <Icon id={statusClasses?.[machine.st]?.class} name="circle" />
                  <p className="working-status">
                    {machine.st == "Parado" ? `${machine.st} (${stopReason}):` : `${machine.st}:`}
                  </p>
                  <div className="production-status">
                    <div>
                      <p>OP</p>
                      <h3>{machine.nrOp}</h3>
                    </div>
                    <div>
                      <p>Início/Fim de produção</p>
                      <h3>
                        {prodStartDate} - {prodFinishDate}
                      </h3>
                    </div>
                  </div>
                </div>
              </div>
            </section>

            <section className="section-graphs">
              <ul className="graphs-list">
                <Card
                  bg={bg}
                  iconId="product-icon"
                  iconName="brick"
                  title="Produto"
                  warning={!stockInfo}
                  infoClass="product-info"
                >
                  <div className="product-basics">
                    <DataItem
                      iconId="product-secondary-icon"
                      iconName="barcode_scanner"
                      label="Código"
                      value={machine.Produto}
                    />
                    <DataItem
                      iconId="product-secondary-icon"
                      iconName="extension"
                      label="Molde"
                      value={machine.CdGlobal?.slice(3)}
                    />
                    <DataItem
                      iconId="product-secondary-icon"
                      iconName="sell"
                      label="Categoria"
                      value={stockInfo?.PR_NOMECATEGORIA || "Não informada"}
                    />
                    <DataItem
                      iconId="product-secondary-icon"
                      iconName="shelf_auto_hide"
                      label="Subcategoria"
                      value={stockInfo?.PR_NOMESUBCATEGORIA || "Não informada"}
                    />
                    <div className="product-desc">
                      <Icon id="product-secondary-icon" name="description" />
                      <div>
                        <p>Descrição</p>
                        <h3>
                          {stockInfo?.PR_DESCRICAO || "Não informada... O código está correto?"}
                        </h3>
                      </div>
                    </div>
                  </div>
                </Card>

                <Card
                  bg={bg}
                  iconId="stock-icon"
                  iconName="forklift"
                  title="Disponibilidade de estoque"
                  warning={!stockInfo}
                  infoClass="stock-availability-info"
                >
                  <div className="stock-basics">
                    <DataItem
                      iconId="stock-secondary-icon"
                      iconName="precision_manufacturing"
                      label="Processo"
                      value={pBal.d}
                    />
                    <DataItem
                      iconId="stock-secondary-icon"
                      iconName="dropper_eye"
                      label="CQ"
                      value={cqBal.d}
                    />
                    <DataItem
                      iconId="stock-secondary-icon"
                      iconName="attach_money"
                      label="Liberado"
                      value={relBal.d}
                    />
                    <DataItem
                      iconId="stock-secondary-icon"
                      iconName="person"
                      label="Terceiros"
                      value={tercBal.d}
                    />
                    <DataItem
                      iconId="stock-secondary-icon"
                      iconName="description"
                      label="RJ"
                      value={rjBal.d}
                    />
                    <DataItem
                      iconId="stock-secondary-icon"
                      iconName="equal"
                      label="Total"
                      value={totBal.toLocaleString("pt-BR", { minimumFractionDigits: 3 })}
                    />
                  </div>
                </Card>

                <Card
                  bg={bg}
                  iconId="mrd-icon"
                  iconName="metro"
                  title="MRD"
                  warning={!stockInfo}
                  infoClass="mrd-info"
                >
                  <div className="mrd-basics">
                    <DataItem
                      iconId="mrd-secondary-icon"
                      iconName="box"
                      label="Estoque minimo"
                      value={
                        !isNaN(minStock)
                          ? minStock.toLocaleString("pt-BR", { minimumFractionDigits: 3 })
                          : minStock
                      }
                    />
                    <DataItem
                      iconId="mrd-secondary-icon"
                      iconName="back_hand"
                      label="MOH Atual"
                      value={
                        !isNaN(cMOH)
                          ? cMOH.toLocaleString("pt-BR", { minimumFractionDigits: 3 })
                          : cMOH
                      }
                    />
                    <DataItem
                      iconId="mrd-secondary-icon"
                      iconName="5k_plus"
                      label="Qtd. por embalagem"
                      value={
                        !isNaN(amtPkg)
                          ? amtPkg.toLocaleString("pt-BR", { minimumFractionDigits: 3 })
                          : amtPkg
                      }
                    />
                    <DataItem
                      iconId="mrd-secondary-icon"
                      iconName="kid_star"
                      label="Grading"
                      value={grading}
                    />
                    <DataItem
                      iconId="mrd-secondary-icon"
                      iconName="data_usage"
                      label="Consumo médio"
                      value={
                        !isNaN(avgCons)
                          ? avgCons.toLocaleString("pt-BR", { minimumFractionDigits: 3 })
                          : avgCons
                      }
                    />
                    <DataItem
                      iconId="mrd-secondary-icon"
                      iconName="target"
                      label="MRD target"
                      value={
                        !isNaN(targetMRD)
                          ? targetMRD.toLocaleString("pt-BR", { minimumFractionDigits: 3 })
                          : targetMRD
                      }
                    />
                  </div>
                </Card>

                <Card
                  bg={bg}
                  iconId="setup-icon"
                  iconName="settings"
                  title="Set-Up"
                  warning={
                    ["Nenhum preenchimento", "Aguard. preenchimento"].includes(setupLbl) ||
                    setupNoks > 0
                  }
                  infoClass="setup-info"
                >
                  <div className="setup-status">
                    <div>
                      <Icon id={setupId} name="circle" />
                      <p>{setupLbl}</p>
                    </div>
                    <div>
                      <Icon id={setupNoks > 0 ? "status-red" : "status-green"} name="circle" />
                      <p>{setupNoks} NOKs</p>
                    </div>
                  </div>
                  <div className="opened-by-text">
                    <Icon id="opened-by-icon" name="person_apron" />
                    <p>Aberta por: {setupUser}</p>
                  </div>
                </Card>

                <Card
                  bg={bg}
                  iconId="periodic-icon"
                  iconName="list_alt_check"
                  title="Periódica"
                  warning={perLbl == "Nenhum preenchimento" || perNoks > 0}
                  infoClass="periodic-info"
                >
                  <div className="periodic-status">
                    <div>
                      <Icon id={perId} name="circle" />
                      <p>{perLbl}</p>
                    </div>
                    <div>
                      <Icon id={perNoks > 0 ? "status-red" : "status-green"} name="circle" />
                      <p>{perNoks} NOKs</p>
                    </div>
                  </div>
                  <div
                    className="periodic-complementary-info"
                    id={`periodic-complementary-info-${bg}`}
                  >
                    <div className="periodic-chk-chosen">
                      <p>Aberta:</p>
                      <h3>{perChosen}</h3>
                    </div>
                    <div className="periodic-l-time-ansered">
                      <p>Horários revisados:</p>
                      <div>
                        <p>Último: <span>{perLast}</span></p>
                        <p>Próximo: <span>{perNext}</span></p>
                      </div>
                    </div>
                  </div>
                  <div className="opened-by-text">
                    <Icon id="opened-by-icon" name="person_apron" />
                    <p>Aberta por: </p>
                  </div>
                </Card>

                <Card
                  bg={bg}
                  iconId="cycles-icon"
                  iconName="cached"
                  title="Ciclos"
                  warning={false}
                  infoClass="cycles-info"
                >
                  <div className="cycles-status">
                    <div className="standard-cycle-status">
                      <Icon id="standard-cycle-icon" name="local_parking" />
                      <p>Padrão</p>
                      <h3>{machine.CicloPadrao || "Não informado"}</h3>
                    </div>
                    <div className="medium-cycle-status">
                      <Icon id="medium-cycle-icon" name="metro" />
                      <p>Médio</p>
                      <h3>{machine.CicloMedio || "Não informado"}</h3>
                    </div>
                    <div className="avaliation-cycle-status">
                      <Icon id="avaliation-cycle-star-icon" name="star" />
                      <p>Avaliação</p>
                      <Icon
                        id={isProdOnSchedule ? "thumb_up" : "thumb_down"}
                        name={isProdOnSchedule ? "thumb_up" : "thumb_down"}
                      />
                    </div>
                  </div>
                </Card>

                <Card
                  bg={bg}
                  iconId="cavities-icon"
                  iconName="widget_small"
                  title="Cavidades"
                  warning={false}
                  infoClass="cycles-info"
                >
                  <div className="cycles-status">
                    <div className="standard-cycle-status">
                      <Icon id="standard-cycle-icon" name="spellcheck" />
                      <p>Ativas</p>
                      <h3>{machine.CavAtivas}</h3>
                    </div>
                    <div className="medium-cycle-status">
                      <Icon id="medium-cycle-icon" name="title" />
                      <p>Totais</p>
                      <h3>{machine.CavTotais}</h3>
                    </div>
                    <div className="avaliation-cycle-status">
                      <Icon id="avaliation-cycle-star-icon" name="star" />
                      <p>Avaliação</p>
                      <Icon
                        id={machine.CavTotais === machine.CavAtivas ? "thumb_up" : "thumb_down"}
                        name={machine.CavTotais === machine.CavAtivas ? "thumb_up" : "thumb_down"}
                      />
                    </div>
                  </div>
                </Card>

                <Card
                  bg={bg}
                  iconId="production-icon"
                  iconName="package_2"
                  title="Produção"
                  warning={false}
                  infoClass="production-info"
                >
                  <div className="production-percentage-and-prevision">
                    <div className="production-percentage">
                      <p>{parseInt((machine.Producao / machine.Plano) * 100)}% da meta</p>
                    </div>
                    <div className="production-prevision">
                      <p>Previsão:</p>
                      <p>
                        {machine.Producao < machine.Plano
                          ? calculateRemainingTime(now, machine.PrevisaoConclusao)
                          : "Concluída"}
                      </p>
                    </div>
                  </div>
                  <div className="production-lbl">
                    <p>Produzidas: </p>
                    <h3>
                      {`${new Intl.NumberFormat("pt-BR").format(
                        machine.Producao
                      )} de ${new Intl.NumberFormat("pt-BR").format(machine.Plano)}`}
                    </h3>
                  </div>
                  <div className="production-tracker">
                    <progress value={machine.Producao} max={machine.Plano}></progress>
                  </div>
                </Card>
              </ul>
            </section>
          </React.Fragment>
        );
      })}
    </section>
  );
}

appsmith.onReady(() => {
  const rootElement = document.getElementById("root");
  if (rootElement) {
    const root = createRoot(rootElement);
    root.render(<App />);
  }
});

[ITWBRDEV]

Hi, were you able to reproduce the issue? I'm really struggling to develop my custom widget :(

[Anandoganiya]

Hi, were you able to reproduce the issue? I'm really struggling to develop my custom widget :(

can you make a video of it ?