feat(intl-messageformat): Add error type for better debugging

Author: Long Ho

packages/intl-messageformat/README.md

@@ -187,6 +187,7 @@ new IntlMessageFormat(
   "raw '<b>HTML</b>' with '<a>'{placeholder}'</a>'"
 ).format({placeholder: 'some word'}); // "raw <b>HTML</b> with <a>some word</a>"
 ```
+
 5. Embedded valid HTML tag is a bit of a grey area right now since we're not supporting the full HTML/XHTML/XML spec.
 
 ### `getAst` Method

packages/intl-messageformat/src/error.ts

@@ -0,0 +1,39 @@
+export const enum ErrorCode {
+  // When we have a placeholder but no value to format
+  MISSING_VALUE,
+  // When value supplied is invalid
+  INVALID_VALUE,
+  // When we need specific Intl API but it's not available
+  MISSING_INTL_API,
+}
+
+export class FormatError extends Error {
+  public readonly code: ErrorCode;
+  constructor(msg: string, code: ErrorCode) {
+    super(msg);
+    this.code = code;
+  }
+  public toString() {
+    return `[formatjs Error: ${this.code}] ${this.message}`;
+  }
+}
+
+export class InvalidValueError extends FormatError {
+  constructor(variableId: string, value: any, options: string[]) {
+    super(
+      `Invalid values for "${variableId}": "${value}". Options are "${Object.keys(
+        options
+      ).join('", "')}"`,
+      ErrorCode.INVALID_VALUE
+    );
+  }
+}
+
+export class MissingValueError extends FormatError {
+  constructor(variableId: string, originalMessage?: string) {
+    super(
+      `The intl string context variable "${variableId}" was not provided to the string "${originalMessage}"`,
+      ErrorCode.MISSING_VALUE
+    );
+  }
+}

packages/intl-messageformat/src/formatters.ts

@@ -14,6 +14,12 @@ import {
   parseDateTimeSkeleton,
   isTagElement,
 } from 'intl-messageformat-parser';
+import {
+  MissingValueError,
+  InvalidValueError,
+  ErrorCode,
+  FormatError,
+} from './error';
 
 export interface Formats {
   number: Record<string, Intl.NumberFormatOptions>;
@@ -58,14 +64,6 @@ export type MessageFormatPart<T> = LiteralPart | ObjectPart<T>;
 
 export type PrimitiveType = string | number | boolean | null | undefined | Date;
 
-class FormatError extends Error {
-  public readonly variableId?: string;
-  constructor(msg?: string, variableId?: string) {
-    super(msg);
-    this.variableId = variableId;
-  }
-}
-
 function mergeLiteral<T>(
   parts: MessageFormatPart<T>[]
 ): MessageFormatPart<T>[] {
@@ -139,9 +137,7 @@ export function formatToParts<T>(
 
     // Enforce that all required values are provided by the caller.
     if (!(values && varName in values)) {
-      throw new FormatError(
-        `The intl string context variable "${varName}" was not provided to the string "${originalMessage}"`
-      );
+      throw new MissingValueError(varName, originalMessage);
     }
 
     let value = values[varName];
@@ -235,11 +231,7 @@ export function formatToParts<T>(
     if (isSelectElement(el)) {
       const opt = el.options[value as string] || el.options.other;
       if (!opt) {
-        throw new RangeError(
-          `Invalid values for "${
-            el.value
-          }": "${value}". Options are "${Object.keys(el.options).join('", "')}"`
-        );
+        throw new InvalidValueError(el.value, value, Object.keys(el.options));
       }
       result.push(
         ...formatToParts(opt.value, locales, formatters, formats, values)
@@ -250,21 +242,20 @@ export function formatToParts<T>(
       let opt = el.options[`=${value}`];
       if (!opt) {
         if (!Intl.PluralRules) {
-          throw new FormatError(`Intl.PluralRules is not available in this environment.
+          throw new FormatError(
+            `Intl.PluralRules is not available in this environment.
 Try polyfilling it using "@formatjs/intl-pluralrules"
-`);
+`,
+            ErrorCode.MISSING_INTL_API
+          );
         }
         const rule = formatters
           .getPluralRules(locales, {type: el.pluralType})
           .select((value as number) - (el.offset || 0));
         opt = el.options[rule] || el.options.other;
       }
       if (!opt) {
-        throw new RangeError(
-          `Invalid values for "${
-            el.value
-          }": "${value}". Options are "${Object.keys(el.options).join('", "')}"`
-        );
+        throw new InvalidValueError(el.value, value, Object.keys(el.options));
       }
       result.push(
         ...formatToParts(