feat(utils): more verbose useAppSize usage error message

Author: mlaursen

packages/documentation/src/components/DemoSandbox/CodePreview.tsx

@@ -3,12 +3,12 @@ import cn from "classnames";
 import { IFiles } from "codesandbox-import-utils/lib/api/define";
 
 import { CodeBlock } from "components/Code";
+import { useTheme } from "components/Theme";
 import { RMD_VERSION } from "constants/github";
 
 import FileNotFound from "./FileNotFound";
 
 import styles from "./CodePreview.module.scss";
-import { useTheme } from "components/Theme";
 
 export interface CodePreviewProps {
   fileName: string;

packages/utils/src/sizing/__tests__/useAppSize.tsx

@@ -43,7 +43,10 @@ describe("useAppSize", () => {
     consoleError.mockImplementation();
 
     expect(() => render(<Test />)).toThrowError(
-      "Attempted to use the current `AppSizeContext` without mounting the `AppSizeListener` component beforehand."
+      "Unable to get the current `AppSize` from `react-md` because the `AppSizeListener` " +
+        "could not be found when using the `useAppSize` hook. To fix this error, either " +
+        "initialize the `AppSizeListener` component from `@react-md/utils` or the " +
+        "`Configuration` component from `@react-md/layout` near the root of your app."
     );
   });
 });

packages/utils/src/sizing/useAppSize.ts

@@ -20,7 +20,10 @@ export default function useAppSize(): AppSize {
   const { __initialized, ...context } = useContext(AppSizeContext);
   if (!__initialized) {
     throw new Error(
-      "Attempted to use the current `AppSizeContext` without mounting the `AppSizeListener` component beforehand."
+      "Unable to get the current `AppSize` from `react-md` because the `AppSizeListener` " +
+        "could not be found when using the `useAppSize` hook. To fix this error, either " +
+        "initialize the `AppSizeListener` component from `@react-md/utils` or the " +
+        "`Configuration` component from `@react-md/layout` near the root of your app."
     );
   }