feat(intl-messageformat): add more debug info to errors

Author: Long Ho

packages/intl-messageformat/src/error.ts

@@ -9,22 +9,47 @@ export const enum ErrorCode {
 
 export class FormatError extends Error {
   public readonly code: ErrorCode;
-  constructor(msg: string, code: ErrorCode) {
+  /**
+   * Original message we're trying to format
+   * `undefined` if we're only dealing w/ AST
+   *
+   * @type {(string | undefined)}
+   * @memberof FormatError
+   */
+  public readonly originalMessage: string | undefined;
+  constructor(msg: string, code: ErrorCode, originalMessage?: string) {
     super(msg);
     this.code = code;
+    this.originalMessage = originalMessage;
   }
   public toString() {
     return `[formatjs Error: ${this.code}] ${this.message}`;
   }
 }
 
 export class InvalidValueError extends FormatError {
-  constructor(variableId: string, value: any, options: string[]) {
+  constructor(
+    variableId: string,
+    value: any,
+    options: string[],
+    originalMessage?: string
+  ) {
     super(
       `Invalid values for "${variableId}": "${value}". Options are "${Object.keys(
         options
       ).join('", "')}"`,
-      ErrorCode.INVALID_VALUE
+      ErrorCode.INVALID_VALUE,
+      originalMessage
+    );
+  }
+}
+
+export class InvalidValueTypeError extends FormatError {
+  constructor(value: any, type: string, originalMessage?: string) {
+    super(
+      `Value for "${value}" must be of type ${type}`,
+      ErrorCode.INVALID_VALUE,
+      originalMessage
     );
   }
 }
@@ -33,7 +58,8 @@ 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
+      ErrorCode.MISSING_VALUE,
+      originalMessage
     );
   }
 }

packages/intl-messageformat/src/formatters.ts

@@ -203,7 +203,7 @@ export function formatToParts<T>(
       const {children, value} = el;
       const formatFn = values[value];
       if (!isFormatXMLElementFn<T>(formatFn)) {
-        throw new TypeError(`Value for "${value}" must be a function`);
+        throw new InvalidValueTypeError(value, 'function', originalMessage);
       }
       const parts = formatToParts<T>(
         children,
@@ -231,7 +231,12 @@ export function formatToParts<T>(
     if (isSelectElement(el)) {
       const opt = el.options[value as string] || el.options.other;
       if (!opt) {
-        throw new InvalidValueError(el.value, value, Object.keys(el.options));
+        throw new InvalidValueError(
+          el.value,
+          value,
+          Object.keys(el.options),
+          originalMessage
+        );
       }
       result.push(
         ...formatToParts(opt.value, locales, formatters, formats, values)
@@ -246,7 +251,8 @@ export function formatToParts<T>(
             `Intl.PluralRules is not available in this environment.
 Try polyfilling it using "@formatjs/intl-pluralrules"
 `,
-            ErrorCode.MISSING_INTL_API
+            ErrorCode.MISSING_INTL_API,
+            originalMessage
           );
         }
         const rule = formatters
@@ -255,7 +261,12 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
         opt = el.options[rule] || el.options.other;
       }
       if (!opt) {
-        throw new InvalidValueError(el.value, value, Object.keys(el.options));
+        throw new InvalidValueError(
+          el.value,
+          value,
+          Object.keys(el.options),
+          originalMessage
+        );
       }
       result.push(
         ...formatToParts(