Error Handling

try {
  await memberstack.loginMemberEmailPassword({ email, password });
} catch (error) {
  const message = getErrorMessage(error);
  // "The provided credentials are invalid."

  // Display to user
  document.getElementById('error').textContent = message;
}

import { isErrorCode, ErrorCodes } from '@memberstack/dom';

try {
  await memberstack.signupMemberEmailPassword({ email, password });
} catch (error) {
  if (isErrorCode(error, ErrorCodes.EMAIL_ALREADY_EXISTS)) {
    // Suggest logging in instead
    showMessage("This email is already registered. Try logging in.");
  } else if (isErrorCode(error, ErrorCodes.INVALID_PASSWORD)) {
    showMessage("Password doesn't meet the requirements.");
  } else if (isErrorCode(error, ErrorCodes.INVALID_EMAIL)) {
    showMessage("Please enter a valid email address.");
  } else {
    showMessage(getErrorMessage(error));
  }
}

const category = getErrorCategory(error);

switch (category) {
  case 'authentication':
    // Show login-related error UI
    break;
  case 'validation':
    // Highlight invalid form fields
    break;
  case 'payment':
    // Show payment-related error UI
    break;
  case 'authorization':
    // Show access denied message
    break;
  case 'not_found':
    // Show "not found" message
    break;
  case 'network':
    // Show "check your connection" message
    break;
}

// Available categories:
// 'authentication' | 'authorization' | 'validation' | 'not_found'
// 'conflict' | 'payment' | 'limit' | 'account'
// 'data_tables' | 'network' | 'unknown'

const suggestions = getErrorSuggestions(error);
// ["Verify the email address is spelled correctly", "Check if Caps Lock is enabled"]

if (suggestions?.length) {
  suggestions.forEach(suggestion => {
    const li = document.createElement('li');
    li.textContent = suggestion;
    errorList.appendChild(li);
  });
}

try {
  await memberstack.loginMemberEmailPassword({ email, password });
} catch (error) {
  const userMessage = formatErrorForUser(error);
  alert(userMessage);
  // Example output (a single curated sentence):
  // "Invalid email or password. Please check your credentials and try again."
}

try {
  await memberstack.signupMemberEmailPassword({ email, password });
} catch (error) {
  if (isMemberstackError(error)) {
    // Safe to access .code, .category, .suggestions, etc.
    console.log('Memberstack error:', error.code, error.category);
  } else {
    // Network error, TypeError, or other non-Memberstack error
    console.error('Unexpected error:', error);
  }
}

const report = getErrorReport(error);
// {
//   message: "The provided credentials are invalid.",
//   code: "invalid-credentials",
//   statusCode: 401,
//   category: "authentication",
//   suggestions: ["Verify the email...", "Check if Caps Lock..."],
//   docsUrl: "https://docs.memberstack.com/..."
// }

// Log to your error tracking service
errorTracker.captureError(report);

import { useState } from 'react';
import { isErrorCode, ErrorCodes, getErrorMessage, getErrorSuggestions } from '@memberstack/dom';

function LoginForm({ memberstack }) {
  const [error, setError] = useState(null);
  const [suggestions, setSuggestions] = useState([]);

  async function handleLogin(e) {
    e.preventDefault();
    setError(null);
    setSuggestions([]);

    const formData = new FormData(e.target);

    try {
      await memberstack.loginMemberEmailPassword({
        email: formData.get('email'),
        password: formData.get('password')
      });
    } catch (err) {
      setError(getErrorMessage(err));
      setSuggestions(getErrorSuggestions(err) || []);
    }
  }

  return (
    <form onSubmit={handleLogin}>
      <input name="email" type="email" placeholder="Email" />
      <input name="password" type="password" placeholder="Password" />
      <button type="submit">Log In</button>

      {error && (
        <div className="error">
          <p>{error}</p>
          {suggestions.length > 0 && (
            <ul>
              {suggestions.map((s, i) => <li key={i}>{s}</li>)}
            </ul>
          )}
        </div>
      )}
    </form>
  );
}

<script>
  import { getErrorMessage, getErrorSuggestions, isErrorCode, ErrorCodes } from '@memberstack/dom';
  import { getMemberstack } from '$lib/memberstack';

  let error = $state(null);
  let suggestions = $state([]);

  async function handleLogin(email, password) {
    error = null;
    suggestions = [];
    const ms = getMemberstack();

    try {
      await ms.loginMemberEmailPassword({ email, password });
    } catch (err) {
      error = getErrorMessage(err);
      suggestions = getErrorSuggestions(err) || [];
    }
  }
</script>

{#if error}
  <div class="error">
    <p>{error}</p>
    {#if suggestions.length > 0}
      <ul>
        {#each suggestions as suggestion}
          <li>{suggestion}</li>
        {/each}
      </ul>
    {/if}
  </div>
{/if}