fix: add error boundary on NFT grid items

[Prithpal-Sooriya]

Description

This allows us to capture errors when rendering grid items and prevent them from bubbling up and crashing the app.

Ideally we want to handle the actual causes for the crash. In this case it was an NFT that has 2 images, when we expect a single image string.

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[metamaskbot]

Builds ready [12324bf]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1673 ± 50 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	236	1908	1537	405	195
		domContentLoaded	1487	1858	1635	103	49
		load	1501	1919	1673	104	50
		domInteractive	23	171	42	32	15
		backgroundConnect	12	94	35	22	11
		firstReactRender	14	79	32	23	11
		getState	5	64	21	20	10
		initialActions	0	1	0	0	0
		loadScripts	1052	1337	1197	90	43
		setupStore	7	71	22	23	11
		uiStartup	1741	2233	1915	128	61

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 1.12 KiB (0.01%)
• common: 0 Bytes (0.00%)

[gambinish]

Sad that error boundaries like this need to be class components, seems like a framework limitation of React.

[metamaskbot]

Builds ready [96f149a]

• builds: chrome, firefox
• builds (flask): chrome, firefox
• builds (MMI): chrome
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • content-script: 0
  • offscreen: 0

Page Load Metrics (1567 ± 57 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	451	1862	1459	355	170
		domContentLoaded	1367	1811	1549	113	54
		load	1389	1866	1567	120	57
		domInteractive	23	82	35	17	8
		backgroundConnect	8	77	23	18	9
		firstReactRender	14	72	24	18	9
		getState	5	51	19	20	10
		initialActions	0	1	0	0	0
		loadScripts	1003	1387	1140	94	45
		setupStore	7	58	19	18	9
		uiStartup	1575	2202	1790	139	67

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 1.12 KiB (0.01%)
• common: 0 Bytes (0.00%)