Merge pull request #182 from episerver/feature/CMS-47081-errors

Runtime errors

Author: exacs

packages/optimizely-cms-sdk/src/graph/error.ts

@@ -13,6 +13,7 @@ type GraphRequest = {
 export class OptimizelyGraphError extends Error {
   constructor(message: string) {
     super(message);
+    this.name = 'OptimizelyGraphError';
   }
 }
 
@@ -29,6 +30,7 @@ export class GraphMissingContentTypeError extends OptimizelyGraphError {
     super(
       `Content type "${contentType}" not included in the registry. Ensure that you called "initContentTypeRegistry()" with it before fetching content.`
     );
+    this.name = 'GraphMissingContentTypeError';
     this.contentType = contentType;
   }
 }
@@ -39,6 +41,7 @@ export class GraphResponseError extends OptimizelyGraphError {
   constructor(message: string, options: { request: GraphRequest }) {
     super(message);
     this.request = options.request;
+    this.name = 'GraphResponseError';
   }
 }
 
@@ -52,6 +55,7 @@ export class GraphHttpResponseError extends GraphResponseError {
   ) {
     super(message, options);
     this.status = options.status;
+    this.name = 'GraphHttpResponseError';
   }
 }
 
@@ -81,5 +85,6 @@ export class GraphContentResponseError extends GraphHttpResponseError {
     super(message, options);
 
     this.errors = errors;
+    this.name = 'GraphContentResponseError';
   }
 }

packages/optimizely-cms-sdk/src/react/server.tsx

@@ -105,12 +105,6 @@ export async function OptimizelyComponent({
   });
 
   if (!Component) {
-    console.log(
-      `[optimizely-cms-sdk] No component found for content type ${
-        opti.__typename
-      } ${opti.__tag ? `with tag "${opti.__tag}"` : ''}`
-    );
-
     return (
       <FallbackComponent>
         No component found for content type <b>{opti.__typename}</b>

samples/hello-world/src/app/error.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { useEffect } from 'react';
+import { GraphErrors } from '@optimizely/cms-sdk';
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Use `instanceof` to get specific types of errors and handle differently
+    if (error instanceof GraphErrors.GraphResponseError) {
+      console.error(
+        'Optimizely Graph Error: ',
+        error.message,
+        'see the query and variables in the logs'
+      );
+      console.log('Showing the query:');
+      console.log(error.request.query);
+      console.log('Showing variables:');
+      console.log(error.request.variables);
+    } else {
+      console.error(error);
+    }
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  );
+}