Improve error reporting for hydration bindings

[janechu]

Description

Currently error reporting gives us example errors such as:

HydrationBindingError: HydrationView was unable to successfully target bindings inside "<sidebar-footer>".
 
Mismatch Details:
  - Expected target node ID: "r.3.3.3"
  - Available target IDs: [r.3.1, r.3.1.0, r.3.3.1, r.3.3.1.0]
  - Expected tag name: "MY-ELEMENT"
  - Source aspect: "@click"
  - Aspect type: 6
 
This usually means:
  1. The server-rendered HTML doesn't match the client template
  2. The hydration markers are missing or corrupted
  3. The DOM structure was modified before hydration
 
Template: 
<template>
<div class="footer">
<my-link-element href="#" @click="fast-qvinvc{fast-qvinvc-3}fast-qvinvc">fast-qvinvc{fast-qvinvc-4}fast-qvinvc</my-link-element>
    at HydrationView.bind (./main.js:2430:17)

It would be more useful if we can identify this from the rendered DOM or given a link to the node so that it can be identified from the console.