GrapesJS/grapesjs · error

await response.text()

Error message

await response.text()

What it means

When loading data from a remote provider (fetch), GrapesJS checks `response.ok`; if the HTTP status is not 2xx it throws an Error whose message is the raw response body text, so the surfaced message is whatever the server returned (e.g. 'await response.text()' content shown here is the body).

Source

Thrown at packages/core/src/data_sources/model/DataSource.ts:266

    if (!provider) return;

    if (isString(provider)) {
      // TODO: implement providers as plugins (later)
      return;
    }

    const providerGet = isString(provider.get) ? { url: provider.get } : provider.get;
    const { url, method, headers, body } = providerGet;

    const fetchProvider = async () => {
      const dataSource = this;

      try {
        em.trigger(em.DataSources.events.providerLoadBefore, { dataSource });

        const response = await fetch(url, { method, headers, body });
        if (!response.ok) throw new Error(await response.text());
        const result: DataSourceProviderResult = await response.json();

        if (result?.records) this.setRecords(result.records as any);
        if (result?.schema) this.upSchema(result.schema);

        em.trigger(em.DataSources.events.providerLoad, { result, dataSource });
      } catch (error: any) {
        em.logError(error.message);
        em.trigger(em.DataSources.events.providerLoadError, { dataSource, error });
      }
    };

    await fetchProvider();
  }

  /**
   * Removes a record from the data source by its ID.
   *

View on GitHub (pinned to 2bdeda85b8)

Solutions

1. Inspect the thrown message (server response body) and fix the underlying HTTP problem (URL, auth headers, method, body).
2. Verify the endpoint returns 2xx with JSON of shape `{ records: [...], schema: [...] }`.
3. Check CORS and credentials if the fetch is cross-origin; wrap `dataSource.load()` in try/catch and retry or show a UI error.
4. Test the URL with curl/fetch outside GrapesJS to confirm the API works.

Example fix

// before
await dataSource.load(); // throws with server body text on 401
// after
try {
  await dataSource.load();
} catch (err) {
  console.error('Provider load failed:', err.message); // inspect server response
  // fix url/headers, then retry
}

const res = await fetch(url, { method, headers, body });
if (!res.ok) throw new Error(`Provider endpoint unhealthy: ${res.status}`);
// only then call dataSource.load()

null

try {
  await dataSource.load();
} catch (err) {
  console.error('Data provider load failed:', err.message); // err.message = server body
  // fix url/headers based on message, or retry with backoff
}

When it happens

Trigger: `dataSource.load()` / `fetchProvider` hitting a URL that returns 401/403/404/500, CORS failures producing error statuses, wrong `url`/`method`/`headers`/`body` in the provider config, or server returning non-JSON errors.

Common situations: Expired auth tokens on a REST endpoint, misconfigured provider URL in the Data Sources config, server downtime, or a proxy returning an HTML error page.

Understand the failure class

Background: 'Something went wrong' / 'Request failed (500)' / 'HTTP error! status: 404' — what failed HTTP requests actually mean and how to find the real cause — this error's family across 28 libraries.

Related errors

• Failed to send telemetry data ${await response.text()}
• Cannot modify immutable record
• Cannot remove immutable record

AI-assisted analysis of GrapesJS/grapesjs@2bdeda85b8 (2026-08-30). Data as JSON: /api/errors/976b6ac123d1320c. Report an issue: GitHub.