error reporting: rm ids from msgs for better Sentry grouping (#2738)

This removes the ids from shape paths so that they can be grouped on our
error reporting tool.

### Change Type

- [x] `patch` — Bug fix

### Release Notes

- Error reporting: improve grouping for Sentry.

packages/editor/src/lib/editor/Editor.ts

@@ -7886,7 +7886,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 					assets[i] = result.value as TLAsset
 				} else {
 					throw Error(
-						`Could not put content:\ncould not migrate content for asset:\n${asset.id}\n${asset.type}\nreason:${result.reason}`
+						`Could not put content:\ncould not migrate content for asset:\n${asset.type}\nreason:${result.reason}`
 					)
 				}
 			}
@@ -7944,7 +7944,7 @@ export class Editor extends EventEmitter<TLEventMap> {
 				newShapes[i] = result.value as TLShape
 			} else {
 				throw Error(
-					`Could not put content:\ncould not migrate content for shape:\n${shape.id}, ${shape.type}\nreason:${result.reason}`
+					`Could not put content:\ncould not migrate content for shape:\n${shape.type}\nreason:${result.reason}`
 				)
 			}
 		}

packages/tldraw/src/lib/shapes/video/VideoShapeUtil.tsx

@@ -52,7 +52,7 @@ export class VideoShapeUtil extends BaseBoxShapeUtil<TLVideoShape> {
 	}
 }
 
-// Function from v1, could be improved bu explicitly using this.model.time (?)
+// Function from v1, could be improved but explicitly using this.model.time (?)
 function serializeVideo(id: string): string {
 	const splitId = id.split(':')[1]
 	const video = document.querySelector(`.tl-video-shape-${splitId}`) as HTMLVideoElement
@@ -62,7 +62,7 @@ function serializeVideo(id: string): string {
 		canvas.height = video.videoHeight
 		canvas.getContext('2d')!.drawImage(video, 0, 0)
 		return canvas.toDataURL('image/png')
-	} else throw new Error('Video with id ' + splitId + ' not found')
+	} else throw new Error('Video with not found when attempting serialization.')
 }
 
 const TLVideoUtilComponent = track(function TLVideoUtilComponent(props: {

packages/validate/src/lib/validation.ts

@@ -10,6 +10,7 @@ function formatPath(path: ReadonlyArray<number | string>): string | null {
 	if (!path.length) {
 		return null
 	}
+
 	let formattedPath = ''
 	for (const item of path) {
 		if (typeof item === 'number') {
@@ -24,6 +25,10 @@ function formatPath(path: ReadonlyArray<number | string>): string | null {
 			formattedPath += `.${item}`
 		}
 	}
+
+	// N.B. We don't want id's in the path because they make grouping in Sentry tough.
+	formattedPath = formattedPath.replace(/id = [^,]+, /, '').replace(/id = [^)]+/, '')
+
 	if (formattedPath.startsWith('.')) {
 		return formattedPath.slice(1)
 	}

packages/validate/src/test/validation.test.ts

@@ -59,7 +59,7 @@ describe('validations', () => {
 				x: 132,
 				y: NaN,
 			})
-		).toThrowErrorMatchingInlineSnapshot(`"At shape(id = abc123).y: Expected a number, got NaN"`)
+		).toThrowErrorMatchingInlineSnapshot(`"At shape().y: Expected a number, got NaN"`)
 
 		expect(() =>
 			T.model(
@@ -70,7 +70,7 @@ describe('validations', () => {
 				})
 			).validate({ id: 'abc13', color: 'rubbish' })
 		).toThrowErrorMatchingInlineSnapshot(
-			`"At shape(id = abc13).color: Expected "red" or "green" or "blue", got rubbish"`
+			`"At shape().color: Expected "red" or "green" or "blue", got rubbish"`
 		)
 	})
 
@@ -109,7 +109,7 @@ describe('validations', () => {
 		expect(() =>
 			T.model('animal', animalSchema).validate({ type: 'cat', moo: true, id: 'abc123' })
 		).toThrowErrorMatchingInlineSnapshot(
-			`"At animal(id = abc123, type = cat).meow: Expected boolean, got undefined"`
+			`"At animal(type = cat).meow: Expected boolean, got undefined"`
 		)
 	})
 })