Supabase Error Translator JS

https://github.com/srothgan/supabase-error-translator-js
Admin
A JavaScript library that translates Supabase error codes and messages into 9 different languages,...
Tokens:3,805
Snippets:18
Trust Score:4.6
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Supabase Error Translator JS

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Instructions for installing the Supabase error translator library using npm or yarn, the two most common package managers for JavaScript projects.

```bash
npm install supabase-error-translator-js
```

```bash
yarn add supabase-error-translator-js
```

--------------------------------

### Set Up Supabase Error Translator Development Environment

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/CONTRIBUTING.md

This snippet provides the necessary `git` and `pnpm` commands to clone the Supabase Error Translator repository and install its dependencies, preparing your local development environment.

```bash
git clone https://github.com/srothgan/supabase-error-translator-js.git
cd supabase-error-translator-js

pnpm install
```

--------------------------------

### Commit Changes with Conventional Commits

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/CONTRIBUTING.md

Examples demonstrating how to write clear and descriptive commit messages following the Conventional Commits specification, categorizing changes such as features, fixes, documentation updates, and tests.

```bash
feat: add Italian error translations
fix: handle null error codes
docs: update README with new language support
test: add tests for edge cases
```

--------------------------------

### Run Development Tasks: Test, Build, Lint, Format, Type Check

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/CONTRIBUTING.md

This section provides `pnpm` commands to execute essential development tasks, including installing dependencies, running tests, building the project, linting with auto-fix, auto-formatting code, and performing type checks to maintain code quality.

```bash
pnpm install

pnpm test

pnpm build

pnpm run lint -- --fix

pnpm run format

pnpm run type-check
```

--------------------------------

### Get Supported Translation Languages

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Provides a list of all language codes supported by the error translation system.

```APIDOC
getSupportedLanguages(): SupportedLanguage[]
  Returns:
    Array of supported language codes
```

--------------------------------

### Get Current and Supported Languages in Supabase Error Translator JS

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Illustrates how to retrieve the currently active language set in the translator and obtain a comprehensive list of all languages supported by the Supabase error translator library.

```typescript
import { getCurrentLanguage, getSupportedLanguages } from 'supabase-error-translator-js';

// Get the currently active language
const currentLang = getCurrentLanguage();
console.log(currentLang); // e.g., 'en', 'de', etc.

// Get all supported languages
const supportedLangs = getSupportedLanguages();
console.log(supportedLangs); // ['en', 'de', 'es', 'fr', 'jp', 'kr', 'pl', 'pt', 'cn']
```

--------------------------------

### Get Current Translation Language

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Retrieves the currently active language used for error message translations.

```APIDOC
getCurrentLanguage(): SupportedLanguage
  Returns:
    The current language code as a string
```

--------------------------------

### Push Git Branch to GitHub

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/CONTRIBUTING.md

After committing your changes, use this `git` command to push your local working branch to the remote GitHub repository, making it available for pull request submission.

```bash
git push origin feature/your-feature-name
```

--------------------------------

### Create a Git Working Branch for Supabase Error Translator

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/CONTRIBUTING.md

Use these `git` commands to create a new feature or fix branch, ensuring your changes are isolated and follow standard development workflow practices before making modifications.

```bash
git checkout -b feature/your-feature-name
# or
git checkout -b fix/issue-you-are-fixing
```

--------------------------------

### Translate Supabase Error Codes with Basic Usage in TypeScript

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Demonstrates how to import the translation functions, set a default language for all subsequent translations, and then translate a specific Supabase error code using the configured language.

```typescript
import { translateErrorCode, setLanguage } from 'supabase-error-translator-js';

// Set the language (defaults to English if not set)
setLanguage('es'); // Set to Spanish

// Translate an error code
const message = translateErrorCode('email_not_confirmed', 'auth');
console.log(message); // Outputs the Spanish translation for this error code
```

--------------------------------

### Handle Supabase Auth Errors with Translation in React

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

This React functional component (`SignupForm`) demonstrates how to implement user signup with Supabase authentication, specifically focusing on translating error codes. It uses `supabase-error-translator-js` to convert raw Supabase error codes into localized, human-readable messages, enhancing the user experience. The component manages form state, displays translated errors, and handles loading states.

```jsx
import React, { useState, useEffect } from 'react';
import { setLanguage, translateErrorCode } from 'supabase-error-translator-js';
import { supabase } from './supabaseClient';
import { useRouter }nfrom 'next/navigation';

function SignupForm() {
  const router = useRouter();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    // Set language
    setLanguage('de');
  }, []);

  const handleSignup = async (e) => {
    e.preventDefault();
    setError(null);
    setIsLoading(true);

    try {
      const { error } = await supabase.auth.signUp({
        email,
        password,
      });

      if (error) {
        // Translate the error code from Supabase
        const translatedError = translateErrorCode(error.code, 'auth');
        setError(translatedError);
      } else {
        // Navigate to login page in Next.js 15
        router.push('/login');
        // Clear form
        setEmail('');
        setPassword('');
      }
    } catch (err) {
      setError(translateErrorCode('unknown_error', 'auth'));
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <form onSubmit={handleSignup}>
      {error && <div className="error">{error}</div>}

      <input
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Email"
        required
        disabled={isLoading}
      />
      <input
        type="password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
        placeholder="Passwort"
        required
        disabled={isLoading}
      />
      {/* Keep UI text in native language */}
      <button type="submit" disabled={isLoading}>
        {isLoading ? 'Wird angemeldet...' : 'Anmelden'}
      </button>
    </form>
  );
}
```

--------------------------------

### Handle and Translate Supabase Database Errors in React Product Form

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

This React component (`ProductForm`) illustrates how to capture and translate Supabase database errors during data insertion. It uses `supabase-error-translator-js` to convert raw database error codes into localized, human-readable messages. The component initializes the translator's language to German, validates form inputs, attempts a Supabase insert operation, and displays either a success message or a translated error. It requires `react`, `supabase-error-translator-js`, and a configured Supabase client.

```jsx
import React, { useState, useEffect } from 'react';
import { setLanguage, translateErrorCode } from 'supabase-error-translator-js';
import { supabase } from './supabaseClient';

function ProductForm() {
  const [name, setName] = useState('');
  const [price, setPrice] = useState('');
  const [description, setDescription] = useState('');
  const [error, setError] = useState(null);
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [successMessage, setSuccessMessage] = useState('');

  useEffect(() => {
    // Set language to German
    setLanguage('de');
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setError(null);
    setSuccessMessage('');
    setIsSubmitting(true);

    // Basic validation
    if (!name || !price) {
      setError('Bitte fülle alle Pflichtfelder aus.');
      setIsSubmitting(false);
      return;
    }

    try {
      // Attempt to insert a new product into the database
      const { data, error: dbError } = await supabase
        .from('products')
        .insert([
          {
            name,
            price: parseFloat(price),
            description,
            created_at: new Date(),
          },
        ])
        .select();

      if (dbError) {
        // Simply translate the database error code
        const translatedError = translateErrorCode(dbError.code, 'database');
        setError(translatedError);
      } else {
        // Clear the form and show success message
        setName('');
        setPrice('');
        setDescription('');
        setSuccessMessage('Produkt erfolgreich gespeichert!');
      }
    } catch (err) {
      // Handle unexpected errors
      setError(translateErrorCode('unknown_error', 'database'));
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <div className="product-form">
      <h2>Neues Produkt hinzufügen</h2>

      {error && <div className="error-message">{error}</div>}
      {successMessage && <div className="success-message">{successMessage}</div>}

      <form onSubmit={handleSubmit}>
        <div className="form-group">
          <label htmlFor="name">Produktname*</label>
          <input
            id="name"
            type="text"
            value={name}
            onChange={(e) => setName(e.target.value)}
            disabled={isSubmitting}
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="price">Preis (€)*</label>
          <input
            id="price"
            type="number"
            step="0.01"
            min="0"
            value={price}
            onChange={(e) => setPrice(e.target.value)}
            disabled={isSubmitting}
            required
          />
        </div>

        <div className="form-group">
          <label htmlFor="description">Beschreibung</label>
          <textarea
            id="description"
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            disabled={isSubmitting}
            rows={4}
          />
        </div>

        <button type="submit" disabled={isSubmitting}>
          {isSubmitting ? 'Wird gespeichert...' : 'Produkt speichern'}
        </button>
      </form>
    </div>
  );
}

export default ProductForm;
```

--------------------------------

### Translate Supabase Error Code

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Translates a Supabase error code into localized text, handling blank or missing codes as 'unknown_error' and applying a four-step fallback chain.

```APIDOC
translateErrorCode(code?: string, service: ErrorService, lang?: SupportedLanguage | "auto"): string
  Parameters:
    code?: The Supabase error code to translate. If undefined or empty, treated as "unknown_error".
    service: The Supabase service that generated the error:
      'auth' - Authentication and user management errors
      'storage' - File storage errors
      'realtime' - Realtime subscription errors
      'database' - Database query errors
      'functions' - Edge Functions errors
    lang?: (Optional)
      Omitted → use currentLanguage
      "auto" → detect via detectBrowserLanguage(), fallback to 'en' if unsupported
      Any other value → if unsupported, fallback to 'en'
  Returns:
    The translated message, using this lookup chain:
      1. translations[target].services[service][key]
      2. translations.en.services[service][key]
      3. translations[target].unknown_error
      4. translations.en.unknown_error
```

--------------------------------

### Translate Supabase Storage Errors in React JSX

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

This React component demonstrates how to upload a file to Supabase Storage and translate any resulting errors using 'supabase-error-translator-js'. It shows how to set the translation language (Spanish in this case) and handle both Supabase-specific and general upload errors.

```jsx
import React, { useState, useEffect } from 'react';
import { setLanguage, translateErrorCode } from 'supabase-error-translator-js';
import { supabase } from './supabaseClient';

function FileUploader() {
  const [file, setFile] = useState(null);
  const [error, setError] = useState(null);
  const [isUploading, setIsUploading] = useState(false);

  useEffect(() => {
    // Set language
    setLanguage('es');
  }, []);

  const handleFileChange = (event) => {
    setFile(event.target.files);
    setError(null); // Clear previous errors
  };

  const handleUpload = async () => {
    if (!file) {
      setError('Por favor, selecciona un archivo para subir.'); // Example of a non-Supabase error
      return;
    }

    setIsUploading(true);
    setError(null);

    try {
      const { data, error: uploadError } = await supabase.storage
        .from('your-bucket-name') // Replace with your bucket name
        .upload(`public/${file.name}`, file);

      if (uploadError) {
        // translate error code if existing
        const translatedError = translateErrorCode(uploadError.code, 'storage');
        setError(translatedError);
      } else {
        console.log('File uploaded successfully:', data);
        // Handle success (e.g., show a success message or clear the form)
        setFile(null);
      }
    } catch (err) {
      // Assuming a general error during the async operation should use unknown_error
      setError(translateErrorCode('unknown_error', 'storage'));
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <div>
      {error && <div className="error">{error}</div>}
      <input type="file" onChange={handleFileChange} disabled={isUploading} />
      <button onClick={handleUpload} disabled={!file || isUploading}>
        {isUploading ? 'Subiendo...' : 'Subir Archivo'}
      </button>
    </div>
  );
}
```

--------------------------------

### Auto-Detect Browser Language for Supabase Error Translation in TypeScript

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Shows how to configure the library to automatically detect and use the user's browser language for error message translation, providing a seamless localized experience without manual language setting.

```typescript
import { setLanguage, translateErrorCode } from 'supabase-error-translator-js';

// Automatically detect and use the browser's language
setLanguage('auto');

// Translate an error code using the detected language
const message = translateErrorCode('invalid_credentials', 'auth');
console.log(message);
```

--------------------------------

### Translate Supabase Realtime Channel Errors in React JSX

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

This React component demonstrates how to subscribe to a Supabase Realtime channel and handle potential errors during the subscription process using 'supabase-error-translator-js'. It sets the translation language to French and specifically translates 'CHANNEL_ERROR' status codes.

```jsx
import React, { useState, useEffect } from 'react';
import { setLanguage, translateErrorCode } from 'supabase-error-translator-js';
import { supabase } from './supabaseClient';

function RealtimeListener() {
  const [realtimeError, setRealtimeError] = useState(null);
  const [messages, setMessages] = useState([]); // To show received messages

  useEffect(() => {
    // Set language
    setLanguage('fr');

    // Subscribe to a channel
    const channel = supabase
      .channel('my-realtime-channel') // Replace with your channel name
      .on('broadcast', { event: 'my-event' }, (payload) => {
        console.log('Realtime message received:', payload);
        setMessages((prevMessages) => [...prevMessages, payload.payload]);
      })
      // Error handling for the channel
      .subscribe((status, err) => {
        if (status === 'CHANNEL_ERROR') {
          console.error('Realtime Channel Error:', err);
          if (err) {
            // Check for error code
            // Attempt to translate the Realtime error code
            const translatedError = translateErrorCode(err.code, 'realtime');
            setRealtimeError(translatedError);
          } else {
            // Fallback for unexpected Realtime error structures
            setRealtimeError(translateErrorCode('unknown_error', 'realtime'));
          }
        } else if (status === 'TIMED_OUT') {
          // Handle specific Realtime statuses if needed
          setRealtimeError('Connexion Realtime expirée. Veuillez réessayer.');
        }
      });

    // Clean up subscription on component unmount
    return () => {
      supabase.removeChannel(channel);
    };
  }, []); // Empty dependency array means this effect runs once on mount

  return (
    <div>
      <h2>Messages Realtime</h2>
      {realtimeError && <div className="error">{realtimeError}</div>}
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{JSON.stringify(msg)}</li>
        ))}
      </ul>
    </div>
  );
}
```

--------------------------------

### Set Translation Language

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Sets the current language for error message translations. Supports specific ISO codes or automatic browser detection.

```APIDOC
setLanguage(lang: SupportedLanguage | "auto"): void
  Parameters:
    lang: A supported ISO language code ('en', 'de', 'es', 'fr', 'jp', 'kr', 'pl', 'pt', 'cn') or "auto"
  Behavior:
    If an unsupported language is provided, falls back to English ('en')
```

--------------------------------

### Override Language for Specific Supabase Error Translations in TypeScript

Source: https://github.com/srothgan/supabase-error-translator-js/blob/main/README.md

Demonstrates how to translate an error code into a specific language by passing the desired language as an argument, without altering the globally configured default language for other translations.

```typescript
import { translateErrorCode } from 'supabase-error-translator-js';

// Translate using a specific language (without changing the default)
const message = translateErrorCode('phone_exists', 'auth', 'fr');
console.log(message); // French translation
```
Tokens:
Raw