Use Ignition UI v4 (#129)

* Refactor context types * Console log error when sharing to Flare * Bump Ignition UI version to v4 * Add new JS bundle build Co-authored-by: AlexVanderbist <[email protected]>
spatie · May 12, 2022 · 6aa8f1c · 6aa8f1c
1 parent 2483c5a
commit 6aa8f1c
Show file tree

Hide file tree

Showing 9 changed files with 40 additions and 131 deletions.
diff --git a/composer.json b/composer.json
@@ -63,5 +63,10 @@
         "forum": "https://twitter.com/flareappio",
         "source": "https://github.com/spatie/ignition",
         "docs": "https://flareapp.io/docs/ignition-for-laravel/introduction"
+    },
+    "extra": {
+        "branch-alias": {
+            "dev-main": "1.2.x-dev"
+        }
     }
 }
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
         "postinstall": "sed -i '' '/For example <script/d' ./node_modules/@fortawesome/fontawesome-svg-core/index.es.js; sed -i '' '/For example <script/d' ../node_modules/@fortawesome/fontawesome-svg-core/index.es.js; exit 0"
     },
     "dependencies": {
-        "@flareapp/ignition-ui": "^3.3.5",
+        "@flareapp/ignition-ui": "^4.0.1",
         "@fortawesome/fontawesome-common-types": "^6.1.1",
         "@fortawesome/fontawesome-svg-core": "^6.1.1",
         "@fortawesome/free-brands-svg-icons": "^6.1.1",

diff --git a/resources/compiled/ignition.js b/resources/compiled/ignition.js
diff --git a/resources/js/components/NavBar.tsx b/resources/js/components/NavBar.tsx
@@ -30,7 +30,7 @@ function useClickOutsideListener(ref: React.MutableRefObject<any>, handler: () =
 function resolveDocs(
     errorOccurrence: ErrorOccurrence,
 ): null | { type: 'generic' | 'php' | 'laravel'; url: string; tailored: boolean } {
-    if (errorOccurrence.context_items.env?.find((env) => env.name === 'laravel_version')) {
+    if (!!errorOccurrence.context_items.env.laravel_version) {
         const laravelDocs = errorOccurrence.documentation_links.find((link) => link.startsWith('https://laravel.com/'));
 
         if (laravelDocs) {

diff --git a/resources/js/components/ShareDropdown.tsx b/resources/js/components/ShareDropdown.tsx
@@ -56,6 +56,7 @@ export default function ShareDropdown({ isOpen }: Props) {
 
             setPublicUrl(response.public_url);
         } catch (e) {
+            console.error(e);
             setError('Something went wrong while sharing, please try again.');
         }
 
@@ -98,7 +99,7 @@ export default function ShareDropdown({ isOpen }: Props) {
                                 className={'bg-violet-500 border-violet-500/25 CopyButton text-white'}
                                 onClick={onShareError}
                             >
-                                <FontAwesomeIcon icon={faExternalLinkAlt} className="opacity-50 text-xs mr-1"/>
+                                <FontAwesomeIcon icon={faExternalLinkAlt} className="opacity-50 text-xs mr-1" />
                                 Create Share
                             </Button>
                         </div>

diff --git a/resources/js/index.tsx b/resources/js/index.tsx
@@ -24,111 +24,23 @@ function transformIgnitionError({ report, solutions }: IgniteData): ErrorOccurre
             class: frame.class || '',
         })),
         context_items: {
-            request: [
-                { group: 'request', name: 'url', value: report?.context?.request?.url },
-                {
-                    group: 'request',
-                    name: 'useragent',
-                    value: report.context?.request?.useragent,
-                },
-                { group: 'request', name: 'ip', value: report.context?.request?.ip },
-                { group: 'request', name: 'method', value: report.context?.request?.method },
-            ],
-            request_data: [
-                {
-                    group: 'request_data',
-                    name: 'queryString',
-                    value: report.context.request_data.queryString,
-                },
-                {
-                    group: 'request_data',
-                    name: 'body',
-                    value: report.context.request_data.body,
-                },
-                {
-                    group: 'request_data',
-                    name: 'files',
-                    value: report.context.request_data.files,
-                },
-            ],
-            queries: report.context.queries
-                ? report.context?.queries?.map((query, i) => ({
-                      group: 'queries',
-                      name: String(i),
-                      value: {
-                          ...query,
-                          replace_bindings: true,
-                          bindings: Object.values(query.bindings).map((binding) => ({
-                              type: typeof binding,
-                              value: binding,
-                          })),
-                      },
-                  }))
-                : null,
-            dumps: report.context.dumps
-                ? report.context?.dumps?.map((value, i) => ({
-                      group: 'dumps',
-                      name: String(i),
-                      value,
-                  }))
-                : null,
-            logs: report.context.logs
-                ? report.context?.logs?.map((value, i) => ({
-                      group: 'logs',
-                      name: String(i),
-                      value,
-                  }))
-                : null,
-            headers: Object.entries(report.context.headers || {}).map(([name, [value]]) => ({
-                group: 'headers',
-                name,
-                value,
-            })),
-            cookies: Object.entries(report.context.cookies || {}).map(([name, value]) => ({
-                group: 'cookies',
-                name,
-                value,
-            })),
-            session: Object.entries(report.context.session || {}).map(([name, value]) => ({
-                group: 'session',
-                name,
-                value,
-            })),
-            env: Object.entries(report.context.env || {}).map(([name, value]) => ({
-                group: 'env',
-                name,
-                value,
-            })),
-            user: report.context.user
-                ? Object.entries(report.context.user).map(([name, value]) => ({
-                      group: 'user',
-                      name,
-                      value,
-                  }))
-                : null,
-            route: report.context.route
-                ? Object.entries(report.context.route).map(([name, value]) => ({
-                      group: 'route',
-                      name,
-                      value,
-                  }))
-                : null,
-            git: report.context.git
-                ? Object.entries(report.context.git).map(([name, value]) => ({
-                      group: 'git',
-                      name,
-                      value,
-                  }))
-                : null,
+            request: report.context?.request,
+            request_data: report.context?.request_data,
+            queries: report.context?.queries || null,
+            dumps: report.context?.dumps || null,
+            logs: report.context.logs || null,
+            headers: report.context?.headers || null,
+            cookies: report.context?.cookies || null,
+            session: report.context?.session || null,
+            env: report.context?.env,
+            user: report.context?.user || null,
+            route: report.context?.route || null,
+            git: report.context?.git || null,
             livewire: report.context.livewire || null,
             view: report.context.view || null,
-            context: [] /* @todo ? */,
         },
-        id: 0,
-        error_id: 0,
-        occurrence_number: 0,
-        received_at: new Date(report.seen_at * 1000).toISOString(),
-        seen_at_url: report?.context?.request?.url,
+        type: 'web',
+        entry_point: report?.context?.request?.url,
         exception_class: report.exception_class,
         exception_message: report.message || '',
         application_path: report.application_path,
@@ -139,11 +51,7 @@ function transformIgnitionError({ report, solutions }: IgniteData): ErrorOccurre
         stage: report.stage,
         first_frame_class: report.stacktrace[0].class || '',
         first_frame_method: report.stacktrace[0].method,
-        glows: report.glows.map((glow) => ({
-            ...glow,
-            id: 0,
-            received_at: '',
-        })),
+        glows: report.glows,
         solutions,
         documentation_links: report.documentation_links,
     };

diff --git a/resources/js/types.ts b/resources/js/types.ts
@@ -1,4 +1,4 @@
-import { ErrorSolution, IgnitionConfig, LogLevel, ViewContext } from '@flareapp/ignition-ui';
+import { ErrorSolution, IgnitionConfig, ViewContext, LogLevel } from '@flareapp/ignition-ui';
 
 export type IgniteData = {
     report: IgnitionErrorOccurrence;
@@ -50,22 +50,24 @@ export type IgnitionErrorOccurrence = {
             files: Array<any>;
         };
         headers: Record<string, string>;
-        cookies: Record<string, string>;
+        cookies: Record<string, string | object | boolean>;
         session: Record<string, string>;
         route?: {
             route: string | null;
-            routeParameters: Record<string, any>;
-            controllerAction: string;
+            routeParameters: Record<string, number | string | null>;
+            controllerAction: string | null;
             middleware: Array<string>;
         } | null;
         user?: Record<string, any> | null;
-        env?: {
+        env: {
             laravel_version: string;
             laravel_locale: string;
             laravel_config_cached: boolean;
+            app_debug: boolean;
+            app_env: string;
             php_version: string;
         };
-        logs?: Array<{ message: string; level: string; context: any; microtime: number }>;
+        logs?: Array<{ message: string; level: LogLevel; context: any; microtime: number }>;
         dumps?: Array<{
             html_dump: string;
             file: string;

diff --git a/resources/js/util.ts b/resources/js/util.ts
@@ -1,11 +1,4 @@
-import keyBy from 'lodash/keyBy';
-import mapValues from 'lodash/mapValues';
 import isString from 'lodash/isString';
-import { ErrorOccurrence } from '@flareapp/ignition-ui';
-
-export function getContextValues(errorOccurrence: ErrorOccurrence, group: string): { [name: string]: any } {
-    return mapValues(keyBy(errorOccurrence.context_items[group] || [], 'name'), 'value');
-}
 
 export function stringifyOccurrenceData(value: any): string {
     if (value === undefined) {

diff --git a/yarn.lock b/yarn.lock
@@ -1031,10 +1031,10 @@
   dependencies:
     error-stack-parser "^2.0.2"
 
-"@flareapp/ignition-ui@^3.3.5":
-  version "3.3.5"
-  resolved "https://registry.yarnpkg.com/@flareapp/ignition-ui/-/ignition-ui-3.3.5.tgz#52f1d39e9d602ecf648b5a97a8f0f7de3f21bf54"
-  integrity sha512-/LPCzahgECmrtmOzfCCgDIi9N069ybRmjeBfN9u7gpudCGHL7L1tGpG4sS5ceLDZrcs85wWXmNjPdjJujl3cmw==
+"@flareapp/ignition-ui@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@flareapp/ignition-ui/-/ignition-ui-4.0.1.tgz#2077769aa76368fb5b9d24a0db1c5f7a273188a4"
+  integrity sha512-ON05h0j0wfIH75pGdhGSWc34bWe4Mmcqu8+Iq2M11+Ga0LrriCNHGpfgTf+wfwr1H06t5TWLqQXuk4ut02Dhkg==
   dependencies:
     "@fortawesome/fontawesome-common-types" "^6.1.1"
     "@fortawesome/fontawesome-svg-core" "^6.1.1"