Stabilize "Misc Failing" diffs in Happo

Each time this runs we get new diffs because the port changes, or the
asset hash changes. Example:

https://happo.io/a/77/p/1772/compare/c6918810f0c96cccda1168ee5f1cac9463a275cb/8c6016048861e7a1924277405b8c79a09d79fc45

I think we can stabilize this by using an error boundary and sanitizing
the error stack trace. This makes the story a little less accurate, but
I think that's totally okay in this case.

.storybook/Story.stories.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';
+import { ErrorBoundary } from 'react-error-boundary';
 import TetherComponent from 'react-tether';
 import Tooltip from '@mui/material/Tooltip';
 
@@ -231,9 +232,27 @@ export const MiscLarge = () => (
   <div style={{ width: 400, height: 400, backgroundColor: 'red' }} />
 );
 export const MiscFailingOnUnmount = () => <UnmountFail />;
-export const MiscFailing = () => {
+
+const ComponentThatThrows = () => {
   throw new Error('Some error');
 };
+
+// https://github.com/bvaughn/react-error-boundary?tab=readme-ov-file#errorboundary-with-fallbackrender-prop
+const fallbackRender = ({ error }) => {
+  // We need to sanitize ports, asset hashes, and line/col numbers from
+  // the stack trace to make the Happo diffs stabilized.
+  error.stack = error.stack.replace(
+    /http:\/\/localhost:\d{4}.*?:\d+:\d+/g,
+    'http://localhost:1234/path-to-file.1234abcd.bundle.js:1234:56',
+  );
+
+  throw error;
+};
+export const MiscFailing = () => (
+  <ErrorBoundary fallbackRender={fallbackRender}>
+    <ComponentThatThrows />
+  </ErrorBoundary>
+);
 MiscFailing.parameters = { happo: { delay: 300 } };
 
 export const WithTooltip = () => (

package.json

@@ -70,6 +70,7 @@
     "raw-loader": "^1.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-tether": "^2.0.0",
     "storybook": "^8.0.0",
     "styled-components": "^4.1.3",

yarn.lock

@@ -9740,6 +9740,7 @@ __metadata:
     raw-loader: "npm:^1.0.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
+    react-error-boundary: "npm:^4.0.13"
     react-tether: "npm:^2.0.0"
     rimraf: "npm:^2.6.3"
     storybook: "npm:^8.0.0"
@@ -13661,6 +13662,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-error-boundary@npm:^4.0.13":
+  version: 4.0.13
+  resolution: "react-error-boundary@npm:4.0.13"
+  dependencies:
+    "@babel/runtime": "npm:^7.12.5"
+  peerDependencies:
+    react: ">=16.13.1"
+  checksum: 10c0/6f3e0e4d7669f680ccf49c08c9571519c6e31f04dcfc30a765a7136c7e6fbbbe93423dd5a9fce12107f8166e54133e9dd5c2079a00c7a38201ac811f7a28b8e7
+  languageName: node
+  linkType: hard
+
 "react-is@npm:18.1.0":
   version: 18.1.0
   resolution: "react-is@npm:18.1.0"