algorithm-visualizer/algorithm-visualizer · warning

data ? typeof data === 'string' ? data : JSON.stringify(data

Error message

data ? typeof data === 'string' ? data : JSON.stringify(data) : statusText

What it means

This is not a thrown error but a fragile expression in BaseComponent.handleError that extracts a message string from an axios error.response. The nested ternary `data ? typeof data === 'string' ? data : JSON.stringify(data) : statusText` has two failure modes: (1) JSON.stringify(data) throws a TypeError if data is an object with circular references, and (2) if data is falsy and statusText is empty/undefined, the resulting `message` is undefined — which then propagates to console.error and showErrorToast.

Source

Thrown at src/components/BaseComponent/index.js:13

import React from 'react';

class BaseComponent extends React.Component {
  constructor(props) {
    super(props);

    this.handleError = this.handleError.bind(this);
  }

  handleError(error) {
    if (error.response) {
      const { data, statusText } = error.response;
      const message = data ? typeof data === 'string' ? data : JSON.stringify(data) : statusText;
      console.error(message);
      this.props.showErrorToast(message);
    } else {
      console.error(error.message);
      this.props.showErrorToast(error.message);
    }
  }
}

export default BaseComponent;

View on GitHub (pinned to 18de2edf6b)

Solutions

1. Wrap JSON.stringify(data) in a try-catch with a fallback to statusText.
2. Provide a terminal fallback so message is never undefined: `... : statusText || 'Unknown error'`.
3. Use a safe-stringify utility (e.g. flatted or a custom replacer) if circular responses are expected from the backend.

Example fix

// before
const message = data ? typeof data === 'string' ? data : JSON.stringify(data) : statusText;

// after
let message;
try {
  message = data ? (typeof data === 'string' ? data : JSON.stringify(data)) : statusText;
} catch (e) {
  message = statusText;
}
message = message || 'Unknown error';

// Pre-validate that data is safely serializable before calling JSON.stringify
const isSafeToSerialize = (data) => {
  if (data == null || typeof data === 'string') return true;
  if (typeof data !== 'object') return true;
  try { JSON.stringify(data); return true; } catch { return false; }
};

const extractErrorMessage = (response) => {
  if (!response) return null;
  const { data, statusText } = response;
  if (typeof data === 'string' && data.length > 0) return data;
  if (data != null && typeof data === 'object') {
    try { return JSON.stringify(data); } catch { return statusText || null; }
  }
  return statusText || null;
};

// Wrap the entire message extraction defensively
handleError(error) {
  let message;
  if (error.response) {
    const { data, statusText } = error.response;
    try {
      message = typeof data === 'string' ? data
        : (data != null ? JSON.stringify(data) : null);
    } catch (e) {
      message = null;
    }
    message = message || statusText || `Request failed (${error.response.status})`;
  } else {
    message = (error instanceof Error ? error.message : String(error)) || 'Unknown error';
  }
  console.error(message, error);
  this.props.showErrorToast(message);
}

When it happens

Trigger: An API returns an error response where response.data is a non-serializable object (circular structure from a framework error envelope), or a response with an empty body and no statusText (e.g. a 502 from a proxy that strips headers). JSON.stringify throws and crashes handleError itself.

Common situations: Backend framework error serializers that include circular request/response objects, misconfigured reverse proxies returning bare status codes with no body, or axios interceptor (line 4 of apis/index.js) returning response.data as a complex object.

Related errors

• message
• error.message

AI-assisted analysis of algorithm-visualizer/algorithm-visualizer@18de2edf6b (2026-08-13). Data as JSON: /api/errors/49ec11c6d2f70221. Report an issue: GitHub.